Jump to content

Need advice implementing a simple navigation menu

Nohana

By Nohana
in General

Recommended Posts

Nohana Newbie

Nohana

Posted
Posted

Don't know if this is the right board to post this... :)I need some help/advice on how to deal with IE (really painful browser). >.<To begin, I wanted to create a simple navigation menu with animated image buttons through use of JS. There are totally 8 buttons in my menu and when users bring the mouse over each button their bgcolor changes to highlight the button. I know this is all relatively simple and basic, the problem is that I have 8 buttons, which give me a total of at least 16 different image files. Being I don't like dealing with 16 or more image files, I find that number too much for a dinky navigation system -I'd rather have only about 4 or 5 files at most- I have come with the following idea:ex1-1.pngI place an image map above the buttons (Note that the red part should actually be transparent). This way I end up with only 3 image files, the map image, button_1 and button_2. If ever I want to add a new button to my navigation, all I have to do is modify the image map file and set the respective coords of the newly added button plus the event trigger. This saves me the trouble of creating new button files. The only annoying part is to do the coordinates. And, in theory, this is what I get:ex2-1.pngI tried this code out and it worked pretty much as expected in FF and Opera, but as usual, IE6 messed up big time with the my whole scheme. For some reason IE keeps a distance 2 pixels between each img element, much to my dismay. I've tried using CSS to solve this problem but without success so far. I'd be thankful if someone could tell me how I can fix this. I've tried several things without touching the essence of the navigation system.I'm relatively new to all the web designing, so if there are easier ways around to achieve this, please let me know. Just no php or any server-side scripts please. ^.~

Link to comment
Share on other sites
boen_robot w3schools Guru

boen_robot

Posted
Posted

Use CSS' :hover pseudo class. To keep compatibility with IE6, use it on achors ("a" elements), instead of whatever you're using it on. To ensure the achors fill in the whole box, give them

display:block;width:100%;height:100%;

as well, and give their container the real dimensions you want. CSSPlay contains tons of sample menus you could use.

Link to comment
Share on other sites
Nohana Newbie

Nohana

Posted
  • Author
Posted
Use CSS' :hover pseudo class. To keep compatibility with IE6, use it on achors ("a" elements), instead of whatever you're using it on. To ensure the achors fill in the whole box, give them
display:block;width:100%;height:100%;

as well, and give their container the real dimensions you want. CSSPlay contains tons of sample menus you could use.

I'm not using hover pseudo class at all. And unfortunately I have to stick to image files for the button as I'm using a special font for the button text. =)I have realized now that the way I explained things was awfully awkward and confusing, this is because I was in a hurry. Got lots of exams at school this week. ^^I managed to fix the whole problem using the <br> tag. The navigation problem is over.And thanks for the nice link. (w) Lots of hefty techniques using css there. I like the mini games specially! I'll make my own some time.
Link to comment
Share on other sites
Nohana Newbie

Nohana

Posted
  • Author
Posted

But there the hover class wouldn't work with an image map in front of the button images would it? I did try it using js first but it didn't work as the browser doesn't seem to detect your mouse over images that are below other images. I could be wrong though. =P

Link to comment
Share on other sites
  • 1 month later...
Coolguy Newbie

Coolguy

Posted
Posted

Forget everything you learned about image maps. With css you can turn any element (a div p etc...) into a rollover. Image maps are intended to be used to select specific parts of an image not rollovers. Also, JavaScript sucks at rollovers. You have to include a function and if the users disable JavaScript they quit working. This works. It's a little technique I call phantom links because you can't actually see the image or any content for the link in the body code. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><style type="text/css">img {border:none;}.button {position:absolute;width:24px;height:24px;background-image: url('button1.png');background-repeat: no-repeat;}.button:hover {background-image: url('button1a.png');}</style></head><body><a class="button" href=""></div></body></html>

Just put this html into a file with images for the buttons and adjust the dimensions accordingly.If you want to make it more copy/pastable you could separate out the css that is used over and over again and use multiple classes like this.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><style type="text/css">img {border:none;}.buttons {position:absolute;width:24px;height:24px;background-repeat: no-repeat;}.button1 {top:0px; background-image: url('button1.png');}.button1:hover {background-image: url('button1a.png');}.button2 {top:24px; background-image: url('button2.png');}.button2:hover {background-image: url('button2a.png');}</style></head><body><a class="buttons button1" href=""></a><a class="buttons button2" href=""></a></body></html>

Important: If you don't include an XHTML DOCTYPE, you'll need to place some sort of content in the <a> element. What I used to use is a placeholder image (1x1 pixel and transparent). You would have to include this CSS tag in the style section and make the links like this

[CSS].buttons img {width:24px;height:24px;}[HTML]<a class="buttons button1" href=""><img src="placeholder.gif" /></a>

If you want to see an advanced implementation of rollovers you can check out my page. I combined all the buttons for both states into a single sprite image. This makes the page load faster (1 file download vs 20 files). And it makes updating buttons easier (1 PSD file to edit and save for web vs 20 files)Website: http://jpasims.netExternal CSS: http://jpasims.net/_stylesheet/css.cssNavbar Sprite Graphic: http://jpasims.net/_template/navbar.gifSidenote: Using sprite graphics is a technique taken straight from old school game developers, nowadays it's used to create skins for 3D graphics.And, if you really wanted to you could place an image map on a rollover but the code would have to include some hairy JavaScript and I think that it is beyond the scope of this post.I hope this helps.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...