Javascript vs CSS, for mouse over, mouse out

I had this problem over some weeks ago and finally fixed it.

You can create a menu with mouseOver and mouse out function using javscript, so that when you put your mouse over the menu the image changes, but this is not good for two reasons:

one: you may have to build 10 pictures with photoshop if you want to have 5 menu bars,
two: i have read that SE's does not recognise image links for now.

So what is the solution you may ask,

I used a div:hover. It is the only possibility to make it in the css. I tried with a:hover (using background-image) and with li, but no way I could not do it.
Only using the div:hover. So I create a div and put image as a background then I use the div: hover to display other picture when mouse over.

Hope to help anyone!

 

IE < 7 does not understand div:hover. There is no reason to use div's and not li > a, and several reasons not to. If you want your a tag to behave like your div does, give it a proprty of display:block.

 

Well that is not true, my menu is working great with IE7, then I want it to display not in a block but inline.

 

Try something like this
#menu { list-style: none; width: 300px; height: 35px; }
#menu li{ width: 100px; float:left; background-color: pink;}
#menu li a { display: block; text decoration: none; line-height 35px; }
#menu li a:hover { background-color: blue; }

<ul id="menu">
<li><a>blah</a></li><li><a>blah</a></li><li><a>blah</a></li>
</ul>

Obvs change bck colors for bck images!! And Widths/Heights as you please!! Also untested so check for typo as I am pretty sleepy but it should work!

 

I will try tomorrow but you know I tried with ul, li, a, and none worked. I have seen it somewhere, that kind of menu.

 

:hover does not work in IE < 7 as Greg-J mentioned. You are way better off using li a, as it's the easiest, fastest and uses the least amount of code.

You can use wd_2k6's model for your menu, though I believe a has to be set to inline-block otherwise it will not show up right in IE6.

Regards,
Nick

 

I think IE6 is old, does anyone use it anymore. I bet nowadays people are using quatcore computers. I use IE7 on my pentium 3 dell laptop computer(I use pc at the moment).
Well I am stating that I have prooved all the ways to do it, using li, a, but not worked, because my menu will display inline and not in block, though I will give a try.

 

IE6 may be old, but so is a sizable portion of the internet's computers. what kind of traffic you're hoping to get to your site would probably determine your need to support older browsers; generally it's a good idea.

to get an image to change on hover, use something like this :

a {
	display: block;
	width: [B]XXX[/B]px;
	height: [B]XX[/B]px;
	background-image: url([B]xxx.jpg[/B]);
	text-decoration: none;
	text-indent: -999em;
}

a:hover {
	background-position: bottom;
}

Code (markup):

Change the stuff in bold to fit your image. Assuming both states are in the same image and you set the height to 1/2 of the image, then by hovering, you change which button is displayed. This keeps both images in one file so there's no delay in loading the hover state, there are fewer calls to the server and you have fewer files to manage.

 

thanks a lot I will give a try, I never heard about this before, especially that kind using one picture for both, a and a:hover

 

http://www.alistapart.com/articles/sprites

It's called image sprites. Basically you put two images into one, and then change the background position of that image to use the one you want.

Regards,
Nick

 

I tried but didn't work, the pics wouldn't display..sorry

 

your article is interesting..I'll give a detailed check right now, well why didn't you put ads?

 

Never read that sprites article, but I've been using a similar method for ages.

Create the rollover you want as image1 on top, image2 on bottom in the same image.

Style your link as a block, set it's width and height (half the height of your actual image) and set your image as it's background. Then in your a.whatever:hover you change the background position (move the image up).

As well as avoiding all the untidy javascript, both parts of your rollover load immediately, so you avoid any waiting for a rollover to load.

 

yes i know now, but will try later

 

Have you still not got your menu working yet?
dzdrazil has given you the idea, with a followup article from hayes, this is the best option.
You can use what I posted earlier copy and paste it exactly and you will see that it will work, you can then change the background colours to one image whereby you change the position of it as dzdrazil posted.

 

There are various ways to do this, but the CSS sprites will be the smallest in total file size (and faster loading) than any bloated Javajunk can do. Display block and none for submenus is a bad idea when considering the blind. And, as said before, adding extra divs in a menu is also just bloat.

Here's an example of a menu (not a drop-down though) using sprites and image replacement. The trick of it is that you have your large background and you just slide it around: http://stommepoes.nl/Menus/spritesmenu.html (hmm, server's down...)

The newer article: http://www.fiftyfoureleven.com/weblog/web-development/css/doors-meet-sprites

 

Just tried but not worked, but I think I figured out why, but have no time right now. It isn't such easy. You have to make the photos in photoshop, then make a try, if it does work I have to upload and change much files. So important is to have many posts here as it is a useful thread for everyone.
Hope to have much more time in the weekend!

Thanks again!

 

Looks like the server is still down Poes!
I've been reading the article from the fiftyfoureleven, would it be possible to add an li: hover to this, so that the background changes on hover?

Currently on my menu (square corners) I am putting the li items in Bold as well as an anchor whereby the Bold acts as the right side, to allow for different text lengths. Would be good if I didn't have to place them inside the B tags!

 

Huh, you can't have all the :hover stuff happening on the a? Or do you mean for instance changing a whole background on :hover using sliding doors?

Yesh my poor server is internetz-deprived because there was a nation-wide ADSL loss by the one company who controls everything (our company is xs4all which used to be independent but the KPN biggies bought them) and while it looks like most people recovered we didn't at home, only at work. So, server will stay down until KPN gets it fixed. Damn.

But, deathshadow did exactly the same thing as the menu I linked to, and actually I learned the technique from him, though I changed it a bit. You can search for pixelcommander and deathshadow and it's like page 2 or three where ds shows the menu image and then you can look at the code he posts... and yesh, there is an extra element (a span) which holds the image because here the text is also in the image and covering up the real text...

Ah here: http://forums.digitalpoint.com/showthread.php?t=427632&page=2

 

That's a wounder regarding the server problems, seek some compo (compensation) !!
Thanks very much for the link, it is really helpful. I'm a bit confused on how to change the whole background on a hover without the use of an extra element. Or is the extra element required. For example my menu is something like this:

#menu li {margin:0; padding:0; float: left;}
#menu li a {display:block; 
float:left;  
height:35px;  
padding:0 0 0 10px; 
background:url(PICONE) no-repeat; }
#menu li a b {float:left; display:block; padding:0 25px 0 15px; background:url(PIC2) no-repeat right top;}
#menu li a:hover, #menu li.current a  {background-position: left bottom; }
#menu li a:hover b, #menu li.current a b { background-position: right bottom; }

Code (markup):

This works fine but it requires the menu to be: <li><a><b>Blah</b></a></li> As Pic one Is the left side of the picture and pic2 is the right side. Is it not possible to do this without the use of the bold or another element.