|
Posted by Jon Slaughter on 04/19/07 19:45
"Desmond" <otuatail@aol.com> wrote in message
news:1177011073.718864.22940@b75g2000hsg.googlegroups.com...
> Hi. I've been playing with drop down menus. They are working fine,
> but I would like to use an image map to activate the drop down menu
> with apossibility to merging the 2 together.
>
> I want to replace the Fruit Vegitabl menu with the image map Mozart
> Brahms above
>
> http://www.des-otoole.co.uk/Menu/Menu.htm
>
The best thing to do is break up your image into pieces. Then basically
instead of text for the link you'll use an image.
<ul id="nav">
<li><a href="#">Fruit</a>
<ul>
<li><a href="#">Apples</a></li>
<li><a href="#">Pears</a></li>
<li><a href="#">Bananas</a></li>
<li><a href="1.php">Grapes</a></li>
</ul>
</li>
<li><a href="#">Vegitables</a>
<ul>
<li><a href="#">Potatoes</a></li>
<li><a href="#">Carrot</a></li>
<li><a href="#">Swede</a></li>
<li><a href="#">Parsnip</a></li>
<li><a href="2.php">Onion</a></li>
</ul>
</li>
</ul>so in that code you have the li fuit.. but you would not use the text
Fruit but <img src="Mozart.gif">.<ul id="nav">
<li><a href="#"><img src="Mozart.gif"/></a>
<ul>
<li><a href="#">Apples</a></li>
<li><a href="#">Pears</a></li>
<li><a href="#">Bananas</a></li>
<li><a href="1.php">Grapes</a></li>
</ul>
</li>
<li><a href="#"><img src="Brahms.gif"/>.</a>
<ul>
<li><a href="#">Potatoes</a></li>
<li><a href="#">Carrot</a></li>
<li><a href="#">Swede</a></li>
<li><a href="#">Parsnip</a></li>
<li><a href="2.php">Onion</a></li>
</ul>
</li>
</ul>If you want to add some dynamic feedback you would then use css to
change the image on things such as active, hover, etc...Jon
Navigation:
[Reply to this message]
|