Rollover Image Tutorial

[arcanistherogue 0]

make it so that i have a button, probably an opaque one, and when it is scrolled over it displays another image, a solid one. I believe this is a javascript command, and I already have all the images set, i just need to know the coding.Thanks for the help.

[OpaQue 15]

IT is called a Rollever image.

Put the following code between the head tag to preload the images. This will not screw up the effect.

<script language="Javascript"><!--if (document.images) {     button1 = new Image     button2 = new Image     button1.src = 'img1.gif'     button2.src = 'img2.gif' }//--></script>

Then. When you want to insert such an image link, put the following code.

<a href="http://Xisto.com" onmouseover="document.rollover.src=button2.src" onmouseout="document.rollover.src=button1.src"><img src="img1.gif" border=0 name="rollover"></a>

Hope this helps,
OpaQue

[bjrn 0]

Depending a bit on what you have you don't even need JavaScript. If you have a form with a form button, you'll have to use JavaScript because of IE's lack of understanding of CSS. But if you have a normal link you can do everything with CSS (I've tested this in Firefox and IE).

This would work just fine, put this in the head of your page:

<style type="text/css">	a.btn div{ background: url(img1.gif);}	a.btn:hover div{ background: url(img2.gif); }	a.btn div { height:20px; width:150px; text-align:center;}</style>

and have the link look like so:

<a class="btn" href="http://Xisto.com"><div>Click here!</div></a>

You don't need to have text inside the div if you don't want to, it'll still work. Perhaps it can even be made a bit more compact, but I wasn't sure how to easily set a fixed size for it without having divs inside the anchor tag (and still have it work in IE).


Going back to your original question. I assume you meant it should go from being transparent to opaque (or the other way around). Just remove the text between the divs, have one of the images as standard and the other one for the :hover and you'll be fine.

Hope this helps