Html image menus |
Html image menus |
jposemato |
Aug 11 2014, 11:20 PM
Post
#1
|
Group: Members Posts: 4 Joined: 11-August 14 Member No.: 21,387 |
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 |
Aug 16 2014, 03:39 AM
Post
#2
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
Maybe you could use this menu (with additional styling): http://www.htmldog.com/articles/suckerfish/dropdowns/
|
jposemato |
Aug 16 2014, 06:34 PM
Post
#3
|
Group: Members Posts: 4 Joined: 11-August 14 Member No.: 21,387 |
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 |
Aug 16 2014, 07:48 PM
Post
#4
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
So replace the text with images.
|
jposemato |
Aug 17 2014, 03:52 PM
Post
#5
|
Group: Members Posts: 4 Joined: 11-August 14 Member No.: 21,387 |
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 |
Aug 17 2014, 04:04 PM
Post
#6
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
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 |
Aug 20 2014, 01:30 PM
Post
#7
|
Group: Members Posts: 4 Joined: 11-August 14 Member No.: 21,387 |
Ill give it a shot, thankyou
|
Lo-Fi Version | Time is now: 23rd April 2024 - 11:26 PM |