How to create Image Rollovers in HTML

Printable View

14-05-2009
Daniel craig

How to create Image Rollovers in HTML

I am building a website in HTML & suddenly i realized that i have forgotten the code of creating the image rollover & i badly need this. As i have to make this site live by this month with the final version of the site.

Its Urgent Please Help!
14-05-2009
Katty

Re: How to create Image Rollovers in HTML

Here the image is doing most of your work with it. Just you have to edit & put the path which is told to give at their respective places.

Quote:

var rollOverArr=new Array();
function setrollover(OverImgSrc,pageImageName)
{
if (! document.images)return;
if (pageImageName == null)
pageImageName = document.images[document.images.length-1].name;
rollOverArr[pageImageName]=new Object;
rollOverArr[pageImageName].overImg = new Image;
rollOverArr[pageImageName].overImg.src=OverImgSrc;
}

function rollover(pageImageName)
{
if (! document.images)return;
if (! rollOverArr[pageImageName])return;
if (! rollOverArr[pageImageName].outImg)
{
rollOverArr[pageImageName].outImg = new Image;
rollOverArr[pageImageName].outImg.src = document.images[pageImageName].src;
}
document.images[pageImageName].src=rollOverArr[pageImageName].overImg.src;
}

function rollout(pageImageName)
{
if (! document.images)return;
if (! rollOverArr[pageImageName])return;
document.images[pageImageName].src=rollOverArr[pageImageName].outImg.src;
}

Hope This Might have Help You....!
14-05-2009
Praetor

Re: How to create Image Rollovers in HTML

Image Rollover effect is created by java script which actually looks like this :

Quote:

<a href="index.html"
onmouseover="buttondown('homebutton')"
onmouseout="buttonup('homebutton')">
<img src="homebutton.gif" name="homebutton" border="0" />
</a>

In this Code when the mouse mouse comes on the image the function buttondown() will perform its action & when the mouse the mouse moves away from the image then the function button down will perform its action.

But now your web page need to call the JavaScript function. So copy the following script to the HTML Source in between <head>....</head>.

Quote:

if (document.images) {
homebuttonup = new Image();
homebuttonup.src = "homebutton.gif" ;
homebuttondown = new Image() ;
homebuttondown.src = "homebuttondown.gif" ;
}
function buttondown( buttonname )
{
if (document.images) {
document[ buttonname ].src = eval( buttonname + "down.src" );
}
}
function buttonup ( buttonname )
{
if (document.images) {
document[ buttonname ].src = eval( buttonname + "up.src" );
}
}
14-05-2009
Zecho

Re: How to create Image Rollovers in HTML

Rollover Buttons with pure CSS.

You just need to create menu using the following code :

Quote:

<div class="rollover">

<a href="#">Home</a>
<a href="#">Gallery</a>
<a href="#">TechArena</a>
<a href="#">Forums</a>
<a href="#">Exit</a>
</div>

You then need to make button in vertical manner in the way you want to see on page then on rollover & then on Hit.

After creating the images. Now you have to tie all the links in CSS 2.

Quote:

.rollover a {
display:block;
width: 90px;
padding:10px 10px 10px 7px;
font: bold 13px sans-serif;;
color:#333;
background: url("rollover-image.gif") 0 0 no-repeat;
text-decoration: none;
}
.rollover a:hover {
background-position: 0 -35px;
color: #049;
}
.rollover a:active {
background-position: 0 -70px;
color:#fff;
}