Html image menus Options

[jposemato]

So what I am trying to create is a navigation menu using only images, I have a list of circle images that when you hover over them they light up, then a few sidebars pretaining to the left icon will appear to let you click one of them. When clicking them it would then follow a link.

This is the left sidebar of the forum, for any SAO fans what i'm trying to do should instantly be understood lol. The little gear icon on the side. Right now it glows on the hover, I want it to glow, AND add 3 buttons to the right of it,

http://swordart-rpg.proboards.com/

I have images for all 3 seperate bars, each with a respective gold highlight aswell. I want them to glow on hover too, and be hyperlinks. It would look something like this in the end: http://th08.deviantart.net/fs71/PRE/i/2012...sun-d5neylk.jpg

Any help is greatly appreciated, thanks!

My current code is

CODE

<br>
<br>
<img src="http://s499.storage.proboards.com/5970499/i/GwsQE4jZPOgUej8qTmKz.png" width="50" height="50"
onmouseover="this.src='http://s499.storage.proboards.com/5970499/i/mfN1AjJQZy0dYU0Aj_v9.png';"
         onmouseout="this.src='http://s499.storage.proboards.com/5970499/i/GwsQE4jZPOgUej8qTmKz.png';">

[Christian J]

Maybe you could use this menu (with additional styling): http://www.htmldog.com/articles/suckerfish/dropdowns/

[jposemato]

Maybe you could use this menu (with additional styling): http://www.htmldog.com/articles/suckerfish/dropdowns/

Thats the idea, however im looking to do it with images rather than text.

[pandy]

So replace the text with images.

[jposemato]

Welp, thats why im posting here. Im not quite sure how to do that lol. I once found a similar thing posted but it only worked for hiearchy images that did not intend to be links. For some reason their method did not permit for links. Im kind of new to Html and dont really understand the phrasing of everything too well yet.

[pandy]

If you take the suckerfish, you have lists like this.

HTML

<ul>
<li><a href="#">Remoras</a></li>
<li><a href="#">Tilefishes</a></li>
<li><a href="#">Bluefishes</a></li>
<li><a href="#">Tigerfishes</a></li>
</ul>

I see no reason why it wouldn't work replacing the link text with an image.

HTML

<li><a href="#"><img src="remoras.gif" width="" hight="" alt="Remoras"></a></li>

and so on.

You would need to adjust the style sheet for the width of the images and maybe do something for the height also, not sure. Worth a try anyway.

[jposemato]

Ill give it a shot, thankyou