PDA

View Full Version : image rollovers



Kal
Mar 13th, 2007, 05:43 PM
Hi guys

probably one thats been heard often, but i have an onmouseover and onmouseout event, which basically swaps between two images. but how can i also get it to change an image elsewhere on the same page?

Thanks inadvance.

BarrMan
Mar 13th, 2007, 06:31 PM
You can have a div which changes its content when you have the mouseover and mouseout events. The content should be the image.

vwphillips
Mar 13th, 2007, 06:59 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
function Swap(id,img){
document.getElementById(id).src=img;
}
//-->
</script></head>

<body>
<img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" onmouseover="Swap('img1','http://www.vicsjavascripts.org.uk/StdImages/Three.gif');">
<img id="img1" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif">
</body>

</html>

Kal
Mar 14th, 2007, 10:00 AM
thanks for the replys guys, not having much luck though. i,ve posted what i have so far to give you an idea of what i have. under the closing table tag is where i would like the second image to change depending on what you hover over.



<script language="JavaScript1.2" type="text/javascript">

function MM_findObj(n, d)

{ //v4.01

var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length)

{
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);
}

if(!(x=d[n])&&d.all) x=d.all[n];

for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];

for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);

if(!x && d.getElementById) x=d.getElementById(n); return x;

}

function MM_swapImage()

{ //v3.0

var i,j=0,x,a=MM_swapImage.arguments;
document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)

if ((x=MM_findObj(a[i]))!=null)
{
document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];
}

}

function MM_swapImgRestore()

{ //v3.0

var i,x,a=document.MM_sr;

for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;

}

function MM_preloadImages()

{ //v3.0

var d=document; if(d.images)

{

if(!d.MM_p) d.MM_p=new Array();

var i,j=d.MM_p.length,a=MM_preloadImages.arguments;

for(i=0; i<a.length; i++)

if (a[i].indexOf("#")!=0)
{
d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];
}

}

}

</script>

<body background="../WEBSITE/WEBSITE_IMAGES/ORIGINALS/1159606963-608.jpg" onload="MM_preloadImages('WEBSITE_IMAGES/l_on.png','WEBSITE_IMAGES/i_on.png','WEBSITE_IMAGES/m_on.png','WEBSITE_IMAGES/v_on.png','WEBSITE_IMAGES/spare_on.png');">

<div align="center">

<table border="0" cellpadding="0" cellspacing="0" width="800">

<!-- fwtable fwsrc="home_page.png" fwbase="home_page.jpg" fwstyle="Dreamweaver" fwdocid = "1275324024" fwnested="0" -->

<tr>
<td><img src="spacer.gif" width="160" height="1" border="0" alt="" /></td>
<td><img src="spacer.gif" width="160" height="1" border="0" alt="" /></td>
<td><img src="spacer.gif" width="160" height="1" border="0" alt="" /></td>
<td><img src="spacer.gif" width="160" height="1" border="0" alt="" /></td>
<td><img src="spacer.gif" width="160" height="1" border="0" alt="" /></td>
<td><img src="spacer.gif" width="1" height="1" border="0" alt="" /></td>
</tr>

<tr>
<td colspan="5"><img name="home_page_r1_c1" src="home_page_r1_c1.jpg" width="800" height="500" border="0" id="home_page_r1_c1" alt="" /></td>
<td><img src="spacer.gif" width="1" height="500" border="0" alt="" /></td>
</tr>

<tr>
<td><a href="javascript:;" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('home_page_r2_c1','','WEBSITE_IMAGES/l_on.png',1);">
<img name="home_page_r2_c1" src="home_page_r2_c1.jpg" width="160" height="32" border="0" id="home_page_r2_c1" alt="" /></a></td>
<td><a href="javascript:;" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('home_page_r2_c2','','WEBSITE_IMAGES/i_on.png',1);">
<img name="home_page_r2_c2" src="home_page_r2_c2.jpg" width="160" height="32" border="0" id="home_page_r2_c2" alt="" /></a></td>
<td><a href="javascript:;" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('home_page_r2_c3','','WEBSITE_IMAGES/m_on.png',1);">
<img name="home_page_r2_c3" src="home_page_r2_c3.jpg" width="160" height="32" border="0" id="home_page_r2_c3" alt="" /></a></td>
<td><a href="javascript:;" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('home_page_r2_c4','','WEBSITE_IMAGES/v_on.png',1);">
<img name="home_page_r2_c4" src="home_page_r2_c4.jpg" width="160" height="32" border="0" id="home_page_r2_c4" alt="" /></a></td>
<td><a href="javascript:;" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('home_page_r2_c5','','WEBSITE_IMAGES/spare_on.png',1);">
<img name="home_page_r2_c5" src="home_page_r2_c5.jpg" width="160" height="32" border="0" id="home_page_r2_c5" alt="" /></a></td>
<td><img src="spacer.gif" width="1" height="32" border="0" alt="" /></td>
</tr>

<tr>
<td colspan="5"><img name="home_page_r3_c1" src="home_page_r3_c1.jpg" width="800" height="168" border="0" id="home_page_r3_c1" alt="" /></td>
<td><img src="spacer.gif" width="1" height="168" border="0" alt="" /></td>
</tr>

</table>

</div>

csjc2662
Mar 14th, 2007, 10:35 AM
<script language="JavaScript1.2" type="text/javascript">

function MM_findObj(n, d)

{ //v4.01

var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length)

{
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);
}

if(!(x=d[n])&&d.all) x=d.all[n];

for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];

for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);

if(!x && d.getElementById) x=d.getElementById(n); return x;

}

function Extra_Swap(New_image){ //function to swap extra img

document.getElementById(Other_One_toChange).src(New_image);
}



function MM_swapImage()

{ //v3.0

var i,j=0,x,a=MM_swapImage.arguments;
document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)

if ((x=MM_findObj(a[i]))!=null)
{
document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];
}

}

function MM_swapImgRestore()

{ //v3.0
document.getElementById(Other_One_toChange).src("First.jpg"); //This will restore it on mouse out with the other one

var i,x,a=document.MM_sr;

for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;

}

function MM_preloadImages()

{ //v3.0

var d=document; if(d.images)

{

if(!d.MM_p) d.MM_p=new Array();

var i,j=d.MM_p.length,a=MM_preloadImages.arguments;

for(i=0; i<a.length; i++)

if (a[i].indexOf("#")!=0)
{
d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];
}

}

}

</script>

<body background="../WEBSITE/WEBSITE_IMAGES/ORIGINALS/1159606963-608.jpg" onload="MM_preloadImages('WEBSITE_IMAGES/l_on.png','WEBSITE_IMAGES/i_on.png','WEBSITE_IMAGES/m_on.png','WEBSITE_IMAGES/v_on.png','WEBSITE_IMAGES/spare_on.png');">

<div align="center">

<table border="0" cellpadding="0" cellspacing="0" width="800">

<!-- fwtable fwsrc="home_page.png" fwbase="home_page.jpg" fwstyle="Dreamweaver" fwdocid = "1275324024" fwnested="0" -->

<tr>
<td><img src="spacer.gif" width="160" height="1" border="0" alt="" /></td>
<td><img src="spacer.gif" width="160" height="1" border="0" alt="" /></td>
<td><img src="spacer.gif" width="160" height="1" border="0" alt="" /></td>
<td><img src="spacer.gif" width="160" height="1" border="0" alt="" /></td>
<td><img src="spacer.gif" width="160" height="1" border="0" alt="" /></td>
<td><img src="spacer.gif" width="1" height="1" border="0" alt="" /></td>
</tr>

<tr>
<td colspan="5"><img name="home_page_r1_c1" src="home_page_r1_c1.jpg" width="800" height="500" border="0" id="home_page_r1_c1" alt="" /></td>
<td><img src="spacer.gif" width="1" height="500" border="0" alt="" /></td>
</tr>

<tr>//Now add this last part on all rollover links with correct source Extra_Swap("New_image.png");

<td><a href="javascript:;" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('home_page_r2_c1','','WEBSITE_IMAGES/l_on.png',1); Extra_Swap("New_image.png");"> //Now add this last part on all lines with correct source
<img name="home_page_r2_c1" src="home_page_r2_c1.jpg" width="160" height="32" border="0" id="home_page_r2_c1" alt="" /></a></td>
<td><a href="javascript:;" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('home_page_r2_c2','','WEBSITE_IMAGES/i_on.png',1);">
<img name="home_page_r2_c2" src="home_page_r2_c2.jpg" width="160" height="32" border="0" id="home_page_r2_c2" alt="" /></a></td>
<td><a href="javascript:;" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('home_page_r2_c3','','WEBSITE_IMAGES/m_on.png',1);">
<img name="home_page_r2_c3" src="home_page_r2_c3.jpg" width="160" height="32" border="0" id="home_page_r2_c3" alt="" /></a></td>
<td><a href="javascript:;" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('home_page_r2_c4','','WEBSITE_IMAGES/v_on.png',1);">
<img name="home_page_r2_c4" src="home_page_r2_c4.jpg" width="160" height="32" border="0" id="home_page_r2_c4" alt="" /></a></td>
<td><a href="javascript:;" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('home_page_r2_c5','','WEBSITE_IMAGES/spare_on.png',1);">
<img name="home_page_r2_c5" src="home_page_r2_c5.jpg" width="160" height="32" border="0" id="home_page_r2_c5" alt="" /></a></td>
<td><img src="spacer.gif" width="1" height="32" border="0" alt="" /></td>
</tr>

<tr>
<td colspan="5"><img name="home_page_r3_c1" src="home_page_r3_c1.jpg" width="800" height="168" border="0" id="home_page_r3_c1" alt="" /></td>
<td><img src="spacer.gif" width="1" height="168" border="0" alt="" /></td>
</tr>

</table>
<img name="Other_One_toChange" src="First.jpg" /> //image to change as well
</div>
That should help. I don't use getElementById() much but I think I got it's syntax right. If you are tring to make a your menu change the image kinda like a "screen" you might want to look at these (http://www.webtekonline.info/remote.html). They are done with FW as well.

Kal
Mar 14th, 2007, 10:50 AM
thanks for the reply just get an erro ron that, line 50 which would be the extra function, the error says

documeny.getelelemntbyid is null or not an object

csjc2662
Mar 14th, 2007, 11:25 AM
Yea sorry try this instead
document.Change_Extra.src = "New_source.gif";

Kal
Mar 14th, 2007, 11:31 AM
i get error saying Change_Extra is null or not an object, i tried changing Change_Extra to Extra_Swap but got the same error.

Kal
Mar 14th, 2007, 11:38 AM
i've managed to get rid of the error, it was my mistake forgot to change the img src tage name to Change_Extra.

but the image doesn't display to the new image. i've checked the path and it's correct.

csjc2662
Mar 14th, 2007, 01:18 PM
Give this a try sorry im just a little rusty.



//you might want to preload imgs into an array
//then you only have to pass the variable
//meaning less load time and easier updating
billboards = new Array();

billboards[0] = new Image();

billboards[0].src = "dragonandsword.gif";

billboards[1] = new Image();

billboards[1].src = "sword.gif";

billboards[2] = new Image();

billboards[2].src = "fireball.gif";
billboards[3] = new Image();
billboards[3].src = "lightningwizard.gif";


function Extra_Swap(New_image){ //function to swap extra img

document.Change_Extra.src = New_image;
}



document.Change_Extra.src = "First.gif"; //This will restore it on mouse out with the other one




//Now add this last part on all rollover links with correct source Extra_Swap(billboards[X]);

<td><a href="javascript:;" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('home_page_r2_c1','','WEBSITE_IMAGES/l_on.png',1); Extra_Swap(billboards[1]);"> //Now add this last part on all lines with correct source
<img name="home_page_r2_c1" src="home_page_r2_c1.jpg" width="160" height="32" border="0" id="home_page_r2_c1" alt="" /></a></td>

<td><a href="javascript:;" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('home_page_r2_c2','','WEBSITE_IMAGES/l_on.png',1); Extra_Swap(billboards[2]);"> //Now add this last part on all lines with correct source
<img name="home_page_r2_c1" src="home_page_r2_c1.jpg" width="160" height="32" border="0" id="home_page_r2_c1" alt="" /></a></td>

<img name="Other_Extra" src="First.jpg" />

Kal
Mar 14th, 2007, 01:41 PM
i get an object unexpected error on that. any ideas why the original version wouldn't work, well why it wouldn't display the image?

because it removed orginal image but didnt replace it wqith anything?