MouseOver image exchange in CSS (no link) and dropdown menus

[Jesus]

basically I want to change the image on mouseover without it being a link to anywhere, not even clickable.
currently I'm succesfully using this JS method:
http://jehiah.com/archive/simple-swap
it works well and rather fast, now what I'm wondering is if there's a method to do this with CSS. I became a CSS fan and addict about 15 minutes ago.
<!-- currently coding a webpage for a business and decided to try CSS. HAWT. -->
anyways I search the forums and found nothing.
Hope someone has mor einfo for me.

Other than that the company has a nav bar, which needs a dropdown, that doesn't drop down but expands to the right. kinda like this:

nav item #1
nav item #2 -> sub nav item #1
nav item #3    sub nav item #2
nav item #4    sub nav item #3
               sub nav item #4
               sub nav item #5

I need it like this because it would otherwise cover up the other selections in the nav. I have read this, but need to know how to make it appear on the right, change the float?
Any tips are welcome. I'm real new to CSS as you can read.

[Jalenack]

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

[Jesus]

thanks Jalenack, that's exactly what I was looking for. should have thought of looking for horizontal dropdown. oh well, stupid me.

Any ideas on the mouseover?

[_Aerospace_Eng_]

Well the mouseover I would do in CSS as well. See here. Just view the source.

[Jesus]

first of, thanks _Aerospace_Eng_, but that's not what I want. The javascript method I currently use does not require the image to be a link to anywhere, and that's what I'm looking for in css. I've found how to do it if the image is a link (or link to nowhere), but I don't want the image to be clickable at all. Thanks anyways.

[_Aerospace_Eng_]

Well then I'm afraid you can't do a css rollover then. You can disable a link though with javascript and change the cursor on hover to something else.

[SpirtOfGrandeur]

You can do a roll over on any thing using the :hover. This is part of CSS. Not just links. BTW this works in all NEWER browsers. Read up little one.


In order to fix it in IE you need to add something like this. Which unfortunatly just adds JS behind the scenes, but if they have a browser that supports :hover you should set it to ignore it.
http://www.xs4all.nl/~peterned/csshover.html

[Jesus]

thanks for the info SpirtOfGrandeur
I guess I'll stick to my current mouseover js solution. that solution just ends up in more js than I wanted, I was hoping that a better clean css solution exsists, maybe with a bit js, like the horiz-drop-downs.
Which btw have been updated by nick rigby:
http://www.nickrigby.com/article/25/...tal-style-pt-3

[_Aerospace_Eng_]

Well using the li:hover js found on alistapart using horizontal drop down menus you can change the background image on hover of the li.

[Jesus]

I guess you're right _Aerospace_Eng_
since I currently don't have access to the website I can't play around with and I'm off work so I'm too lazy atm aswell

[singedpiper]

there is a simple solution... i.e. is the only common browser that doesn't support :hover well, but it does support behaviors. there is a downloadable behavior file (lost link) that can easily be added to a page and it fixes the problem.

[Jesus]

this one here?
http://www.xs4all.nl/~peterned/hovercraft.html

If not please try to find it, this is the only .htc file I found via elgoog.

Thanks for the tip.

[SpirtOfGrandeur]

Originally Posted by singedpiper

there is a simple solution... i.e. is the only common browser that doesn't support :hover well, but it does support behaviors. there is a downloadable behavior file (lost link) that can easily be added to a page and it fixes the problem.

Yes that is the one I showed him.

Jesus : The point here is that the link i gave you is just a hack to stupid browser. I assume (I might be wrong here) that IE7 will support the :hover and then you will not need the behavior. But the :hover works in all other major browsers because it is part of the CSS standard. That and all you have to do is include it. All other browsers, other then IE, ignore it. It is the best way to go

[Jesus]

Ok, thanks for the info.
I am frustrated by IE anyway. Everything looks tight in Opera and FF, what ahppens, IE crys around and I have to code around IE.
As if the browser isn't standard compliant on purpose.
Didn't know how to make CSS exchange the images with the .htc file anyway. because I didn't know what to put here:
[code]body {
behaviour: url("csshover.htc");
}

img:hover {
... /* this is where the problem lies */
}

[mrruben5]

You can use a div , type text in it, set a width and height, and use text-indent: 999em to hide the text, then overflow hidden to hide scrollbar. This the best way since search engines will see your text while users see your image :P