Rollovers

kilo3000 · Apr 19, 2004

Hi I would like to create rollovers that change when hovered over, and change back to its original state ONLY when another tab it hovered over.

Can this be done in CSS?

I know how to do image rollovers in CSS with the a:hover option, but I need the hover state to stay when they mouse away from the image and only change when they mouse over another rollover image.

thanks!

LFI · Apr 19, 2004

Perhaps a partnership between CSS and javascript?

If, on the onmouseover event, you change the image with CSS, you ALSO save the object that was mousedover to a javascript variable, then you can also trigger the onmouseover event to check that javascript variable for a value FIRST, and (using javascript) change the old onmouseover'ed object back. 'sounds more complicated than it is. This works in IE6:

Code:

<html>
<head>
<style>
.regular{
 height:100px;
}

.mousedOver{
 height:10px;
}
</style>
<script>
var currMouseOver;
function mousedOver()
{
 if(currMouseOver)
  currMouseOver.className = 'regular';

 [b]event.toElement[/b].className = 'mousedOver';
 currMouseOver = [b]event.toElement[/b];
}
</script>
</head>
<body>
<img name='pic' class='regular' src='Nic1.bmp' onmouseover='mousedOver()' />
<br />
<br />
<br />
<br />
<br />
<br />
<img name='pic2' class='regular' src='Nic1.bmp' onmouseover='mousedOver()' />
</body>
</html>

You'll have to replace 'Nic1.bmp' with your own picture, of course.

You don't have to use the event.toElement in javascript (I think this is an IE-specific event attribute). You could, instead, send the image in the function call:

Code:

<html>
<head>
<style>
.regular{
 height:100px;
}

.mousedOver{
 height:10px;
}
</style>
<script>
var currMouseOver;
function mousedOver([b]mousedOverObject[/b])
{
 if(currMouseOver)
  currMouseOver.className = 'regular';

 [b]mousedOverObject[/b].className = 'mousedOver';
 currMouseOver = [b]mousedOverObject[/b];
}
</script>
</head>
<body>
<img name='pic' class='regular' src='Nic1.bmp' onmouseover='mousedOver([b]this[/b])' />
<br />
<br />
<br />
<br />
<br />
<br />
<img name='pic2' class='regular' src='Nic1.bmp' onmouseover='mousedOver([b]this[/b])' />
</body>
</html>

'hope this helps!

--Dave

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Rollovers

kilo3000

Programmer

LFI

Programmer

Similar threads

Part and Inventory Search

Sponsor