How to Embed a Rollover on a GIF
When visiting sites, you may notice changing navigation buttons at the touch of a mouse pointer. This effect is called the rollover effect. It can by achieved by manipulating your image, or GIF, file through two methods: by embedding a JavaScript code or through the Cascading Style Sheet, or CSS. Each method works the same way, but is implemented differently. Both are widely used, but users with JavaScript turned off on their browsers may not see this effect.
Other People Are Reading
Instructions
-
Using JavaScript
-
1
Create two versions of your GIF file: one version for when the mouse hovers over it, and the other in its normal state.
-
2
Insert your GIF on a Web page using the following HTML code:
<a href="yoursite.com" onMouseOver="gifOver();return true;" onMouseOut="gifOut();return true;" >
<img name=myimage width=35 height=35 border=0
src="normal.gif">
</a>
Replace "yoursite.com" with the site you want the image to link to, and "normal.gif" with the name of the GIF file you created in its normal state.
-
-
3
Add the JavaScript code to swap out images in the <HEAD> section of your Web page:
<script language="JavaScript">
if (document.images) {
img_on =new Image(); img_on.src ="mouseover.gif";
img_off=new Image(); img_off.src="normal.gif";
}
function gifOver() {
if (document.images) document.imgName.src=img_on.src;
}
function gifOut() {
if (document.images) document.imgName.src=img_off.src;
}
</script>
Replace "mouseover.gif" with the name of the GIF you created for when the mouse hovers over the image and "normal.gif" with the image in its normal state.
-
4
Save the changes to your Web page.
Using CSS
-
5
Create a GIF image in its normal state and append the mouse-over state of the image at the bottom. Both images must be equal in height. For example, if the normal GIF is 35 by 35 pixels, the mouse-over GIF should also be 35 by 35 pixels. In total, the whole image should be 70 pixels high in this example. Save the image.
-
6
Insert the GIF in your Web page using the following HTML code:
<a href="yourwebsite.com" id="rollover">Text Here</a>
Replace"yourwebsite.com" with the URL where the image points to and "Text Here" with the text you want to appear on top of your GIF image. If you do not want text to appear, you can put a spacer such as " " or place an empty transparent GIF image.
-
7
Open Notepad and create a stylesheet with the following code:
a#rollover{
background: URL(myimage.gif);
display:block;
width: 35px;
height: 35px;
}
a#rollover:hover{
background-position: 0 -35px;
}
Replace "myimage.gif" with the name of your GIF file, and the height and weight with the dimensions of your image. Save it as "rollover.css."
-
8
Insert the stylesheet in the <HEAD> section of your Web page using this code:
<link rel="stylesheet" type="text/css" href="rollover.css" />
-
9
Save your Web page.
-
1
References
- Photo Credit Jupiterimages/Photos.com/Getty Images
