PDA

View Full Version : image rollover... ((yes! another newbie asks a question of the really nice smart ppl)

nebu
10-19-2002, 01:37 AM
I found this somewhere:
<html>

<head>

<script>
function overout(id,pic,msg) {
document.getElementById(id).src = pic;
document.getElementById('description').innerHTML = msg;
}
</script>

</head>

<body>

<img src="default1.gif" id="pic1" onmouseover="overout('pic1','hover1.gif','This is picture ONE');" onmouseout="overout('pic1','default1.gif','');">
<img src="default2.gif" id="pic2" onmouseover="overout('pic2','hover2.gif','This is picture TWO');" onmouseout="overout('pic2','default2.gif','');">
<img src="default3.gif" id="pic3" onmouseover="overout('pic3','hover3.gif','This is picture THREE');" onmouseout="overout('pic3','default3.gif','');">
<img src="default4.gif" id="pic4" onmouseover="overout('pic4','hover4.gif','This is picture FOUR');" onmouseout="overout('pic4','default4.gif','');">

<div id="description"></div>

</body>

</html>


How do I put an image in the "This is picture ONE" spot? Thax
brass fish
10-19-2002, 02:48 AM
try this

<html>

<head>

<script>
function overout(id,pic,msg) {
document.getElementById(id).src = pic;
document.getElementById('description').innerHTML = msg;
}
</script>

</head>

<body>

<img src="img.gif" id="pic1" onmouseover="overout('pic1',otherimg.gif','explanation of image');" onmouseout="overout('pic1','img.gif','');">
<img src="default2.gif" id="pic2" onmouseover="overout('pic2','hover2.gif','This is picture TWO');" onmouseout="overout('pic2','default2.gif','');">
<img src="default3.gif" id="pic3" onmouseover="overout('pic3','hover3.gif','This is picture THREE');" onmouseout="overout('pic3','default3.gif','');">
<img src="default4.gif" id="pic4" onmouseover="overout('pic4','hover4.gif','This is picture FOUR');" onmouseout="overout('pic4','default4.gif','');">

<div id="description"></div>

</body>

</html>

or
do u mean put an image where the explanation of image1 would be
example:

<html>

<head>

<script>
function overout(id,pic,msg) {
document.getElementById(id).src = pic;
document.getElementById('description').innerHTML = msg;
}
</script>

</head>

<body>

<img src="img.gif" id="pic1" onmouseover="overout('pic1',otherimg.gif','<img src=\"image.gif\">');" onmouseout="overout('pic1','img.gif','');">
<img src="default2.gif" id="pic2" onmouseover="overout('pic2','hover2.gif','This is picture TWO');" onmouseout="overout('pic2','default2.gif','');">
<img src="default3.gif" id="pic3" onmouseover="overout('pic3','hover3.gif','This is picture THREE');" onmouseout="overout('pic3','default3.gif','');">
<img src="default4.gif" id="pic4" onmouseover="overout('pic4','hover4.gif','This is picture FOUR');" onmouseout="overout('pic4','default4.gif','');">

<div id="description"></div>

</body>

</html>
adios
10-19-2002, 03:22 AM
I have no idea if this is what you want.

<html>
<head>
<base href="http://www.codingforums.com/images/">
<script type="text/javascript">

//preload
x = new Image;
x.src = 'http://www.codingforums.com/images/buddy.gif';
x = new Image;
x.src = 'http://www.codingforums.com/images/newthread.gif';

function overout(id, pic, other) {
document.getElementById(id).src = pic;
if (other) other = '<img border="0" src="' + other + '">';
document.getElementById('secondimage').innerHTML = other;
}

</script>
</head>
<body>
<img id="pic1" src="home.gif"
onmouseover="overout('pic1','buddy.gif','newthread.gif')"
onmouseout="overout('pic1','home.gif','')">
<div id="secondimage" style="position:absolute;right:0px;bottom:0px;"></div>
</body>
</html>

But, hey, the price is right. :thumbsup:

http://www.vortex-webdesign.com/help/3rdimageroll.htm