Alternative to Roll Over?

[SN3]

Note: I don't know if this would be better in the usability section or coding.

Is there a more reliable way to make a roll over (graphical) without using Flash? Almost every time I go to a site that has a graphical roll over, there is an error with a picture, at least once. Is there a way to fix this?

[Distorted]

Use JavaScript and/or CSS.

[SN3]

Code?

Is it reliable?

[kwvarga]

uhm.. well
uhm you could probably do something like
<style>
a:link { background-image:url('myimage.jpg'); }
a:hover { background-image:url('myimage2.jpg'); }
</style>

and for the links you will neeed a completely transparent png or gif
<a href="location.php"><img style="width:200px;height:100px;"></a>
of course change the width/height to whatever the background image is.. not sure if that would work.. but you could try.

[niceguyeddie]

Probably want to use lists for that instead.

http://www.accessify.com/tools-and-w...st-o-matic.asp

[GoldDust]

I was using Javascript for my rollovers but there was a short delay due to preloading - so I opted for CSS - works like a dreeeeeeeeeam, havnt looked back since.

[SubKamran]

I use JavaScript for image rollovers...once they're pre-loaded it's fine.

[LazyJim]

I'm, using CSS clipped bgs.
put the hover and non-hover image above each other in a single image file, then slide the bg up/down using css to show the right bit.

See my tabs:
www.alpha-matrix-design.co.uk
are made with this image:
using this HTML:
[code:1:bd2facf9f0]<ul id="mainmenu" class="menu">
<li><a class="left_current">Home</a></li>
<li><a class="mid" href="?section=portfolio">Portfolio</a></li>
<li><a class="mid" href="?section=contact">Contact</a></li>
<li><a class="right" href="?section=login">Client Log-in</a></li>

</ul>[/code:1:bd2facf9f0]
and this CSS: www.alpha-matrix-design.co.uk/css/tabs.css

[SN3]

Originally Posted by LazyJim

I'm, using CSS clipped bgs.
put the hover and non-hover image above each other in a single image file, then slide the bg up/down using css to show the right bit.

See my tabs:
www.alpha-matrix-design.co.uk
are made with this image:
using this HTML:
[code:1:865a423a02]<ul id="mainmenu" class="menu">
<li><a class="left_current">Home</a></li>
<li><a class="mid" href="?section=portfolio">Portfolio</a></li>
<li><a class="mid" href="?section=contact">Contact</a></li>
<li><a class="right" href="?section=login">Client Log-in</a></li>

</ul>[/code:1:865a423a02]
and this CSS: www.alpha-matrix-design.co.uk/css/tabs.css

That's Great! Mind if I borrow your code?

[LazyJim]

go ahead!

[SN3]

Thanks!

[Distorted]

I see, so you just move the background then!? That's a good idea.