[dorian]

...again!

ow do I change the bg image on a div on mouse over??
It's got to be very simple... I'm just lost in all my google search results can it be done without using javascript?

this is what i have:



.b_menu {font-weight:bold; height:20px; border-bottom:1px solid #cecea3; padding:5px 0px 0px 0px; background-image:url(images/bg_b.gif);}
.b_menu a:link, .b_menu a:visited {color:#000066; text-decoration:none; padding:0px 0px 0px 9px;}
.b_menu a:hover, .b_menu a:active {color:#517dcb; text-decoration:underline;}

<div class="b_menu"><a href="#">mylink</a></div>



I want the bg image of the entire div to change... not only the link text! ...does this make sense...? link the whole div? how?

[emil]

IE only supports hover on anchors. so you need to use javascript to make it play along.
IE 7 will, though.

Your code ia applied to a link contained in the .b_menu div. If you want the div to change its background, the code should look like

.b_menu {some bg}
.b_menu:hover {other bg blah}

[emil]

If you look at this website though
www.badboy.ro
you'll see that the hovers work in IE, too, and that is doen by a tiny bit of javascript
you can see the code here, it's fairly simple
http://badboy.ro/ui/script/bbmd.js (the last bit)

[dorian]

hm... thanks Emil
that kind of put me on the right track!
i used something like this instead...:

<div class="b_menu" onMouseOver="this.className='b_menu_hover'" onMouseOut="this.className='b_menu'"><a href="#">mylink</a></div>

the only problem is... its slooowww :S
apparently its explorer.
any ideas how (if?) something can be done about that?

[emil]

Try this.
http://www.randomcolors.com/uploads/dt/dorian/

See source for details

[dorian]

woah! thanks for the demo...! looks pretty serious stuff!
will have a go at this later(at work now).
by the way... i have some flash eyecandy* running on the same page... which doesnt help the speed either... :S


*it was requested...

[emil]

Can you put up a link?
Maybe it's something else. (server, connection, etc)

[dorian]

dont think so... even locally its sluggish:
link

[emil]

It loaded instantly for me. Both IE and FF on PC. And it works fine. Even rollovers.
I'll try it at home on 256 Kb to tell you if it is as fast.

[dorian]

its not that - the mouse overs are slow :S

[emil]

I edited the previous post. They're fine with me. I mean they are ok.


EDIT AGAIN: Although they're blinking in IE, but that's because IE's caching issues, as far as I know.

[dorian]

no its the Power of The Animated Gif

[emil]

You can try and have both images in one then have the background change position on hover.
I'll post an example as soon as I get one together.

[dorian]

good idea! why not... check the link again.

[mx]

no speed probs here (firefox PC fat pipe)

[emil]

Originally Posted by dorian

good idea! why not... check the link again.

Yep, sorted now.
I have bodged together an example, too.
http://www.randomcolors.com/uploads/...orianMenu.html

[dorian]

looks like the bg position trick made it a little smoother - especially firefox!

[emil]

[dorian]

hm... not too confident with ul's and li's... will have a more thorough look later

[emil]

For your type of menu (if there will be no submenus) you can use the example I gave you. All you'll need to do is to customize the CSS to suit your needs in terms of color, width, background images, etc.
I used a list because you know that's more semantic, but you can use your current structure too, except that it'll be a bit code-heavy.
If you take a look at that bit of javascript, you'll see it's pretty straightforward, and you can take it to an external file to keep your pages as clean as possible. Trust me in the long run it's better to start experimenting...