Jump to content
xisto Community
Sign in to follow this  

Rollover Image Tutorial

Recommended Posts

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.

Share this post

Link to post
Share on other sites

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,

Share this post

Link to post
Share on other sites

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 :P

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.