PDA

View Full Version : rollover

DagGz
January 30th, 2003, 09:29 PM
hi ive made rollovers for my site but i want to create another one sort of linked to the original rollover.

so for instance i hover over an image that is black and white and it changes to colour......fair enuff easily done....but i want it so that when i hover over it text appears somewhere else on the page as well as the black and white to colour image at the same time...is this possible if so how..

thanks
degsy
January 31st, 2003, 01:57 PM
There are several ways using javascript.

In this example the GOOGLE logo changes the color of the text.
The IMDB logo uses the innerHTML element to change the text.

Both functions can be refined, but this is a basic start.


<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script>
function textColor(el)
{
document.getElementById(el).style.color = 'red'
}

function textColorReturn(el)
{
document.getElementById(el).style.color = 'white'
}


function showText(el)
{
document.getElementById(el).innerHTML = 'This is the imdbText'
}

function hideText(el)
{
document.getElementById(el).innerHTML = ''
}
</script>
</head>

<body>
<p><img src="http://www.google.com/logos/Logo_40wht.gif" onmouseover="textColor('googleText')" onmouseout="textColorReturn('googleText')" />

<img src="http://icons.imdb.com/Icons/logo.gif" onmouseover="showText('imdbText')" onmouseout="hideText('imdbText')" /></p>


<div id="googleText" style="color: white">This is the googleText</div>
<div id="imdbText">&nbsp;</div>
</body>
</html>
DagGz
January 31st, 2003, 07:09 PM
isnt there a way of doing it using layers. using the layer id and the show/hide features?
degsy
January 31st, 2003, 08:32 PM
Same technique

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script>
function showLayer(el)
{
document.getElementById(el).style.visibility = 'visible'
}

function hideLayer(el)
{
document.getElementById(el).style.visibility = 'hidden'
}
</script>
</head>

<body>


<img src="http://www.google.com/logos/Logo_40wht.gif" onmouseover="showLayer('googleLayer')" onmouseout="hideLayer('googleLayer')" />


<div id="googleLayer" style="visibility:hidden; border: 1px solid black; background-color: yellow; width: 200px; height:200px">This is the googleLayer</div>
</body>
</html>