...
PDA

image roll over

helen11
12-12-2011, 04:43 PM
I am trying to create a multiple image rollover and when you click on an image, the page will direct to a relevant external website. However only the first image changes when you rollover it, the other four images will not change. Any suggestions??

<HTML><HEAD><TITLE>Monsters Inc Rollover Images</TITLE>
<META content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<SCRIPT language=Javascript type=text/javascript>
<!--

var monstersincON = new Image;
var sulley = new Image;
var mike = new Image;
var booON = new Image;
var randallON = new Image;

var monstersincOFF = new Image;
var sulleyOFF = new Image;
var mikeOFF = new Image;
var booOFF = new Image;
var randallOFF = new Image;

monstersincON.src = "../images/monstersinc.jpg";
sulleyON.src = "../images/scully.jpg";
mikeON.src = "../images/mike.jpg";
booON.src = "../images/boo.jpg";
randallON.src = "../images/randall.jpg";

monstersincOFF.src = "../images/monstersincoff.jpg";
sulleyOFF.src = "../images/scullyoff.jpg";
mikeOFF.src = "../images/mikeoff.jpg";
booOFF.src = "../images/boooff.jpg";
randallOFF.src = "../images/randalloff.jpg";

/* Callout: This function takes two parameters, the version name (ON or OFF) and the image name. This makes it possible to handle all image swapping with only this one function. */

function swapImage(version, imagename){
if (document.images){
document[imagename].src = eval(imagename + version + ".src");
}
}

/* Callout: This function turns all images back to their 'off' versions. */
function rollOffAll(){
swapImage('OFF','monstersinc');
swapImage('OFF','sulley');
swapImage('OFF','mike');
swapImage('OFF','boo');
swapImage('OFF','randall');
}
//-->

</SCRIPT>

</HEAD>
<BODY bgColor=white>

<DIV align=center><A onmouseover="swapImage('ON','monstersinc');"
onmouseout=rollOffAll(); onclick="rollOffAll();return true;"
href="http://.html"><IMG
border=0 name=monstersinc alt="Monsters Inc"
src="../images/monstersincoff.jpg" width=250 height=250></A>

<HR>

<BR><A onmouseover="swapImage('ON','sulley');" onmouseout=rollOffAll();
onclick="rollOffAll();return true;"
href="http://www..html"><IMG border=0
name=sulley alt=Sulley src="../images/sulleyoff.jpg" width=175
height=225></A>

<BR><A onmouseover="swapImage('ON','mike');"
onmouseout=rollOffAll(); onclick="rollOffAll();return true;"
href="http://www..html"><IMG
border=0 name=mike alt=Mike src="../images/mikeoff.jpg" width=175
height=225></A>

<BR><A onmouseover="swapImage('ON','boo');"
onmouseout=rollOffAll(); onclick="rollOffAll();return true;"
href="http://www..html"><IMG
border=0 name=boo alt=Boo src="../images/boooff.jpg"
width=175 height=225></A><BR>

<BR><A onmouseover="swapImage('ON','randall');"
onmouseout=rollOffAll(); onclick="rollOffAll();return true;"
href="http://www..html"><IMG
border=0 name=randall alt=Randall src="../images/randalloff.jpg"
width=175 height=225></A><BR>

</DIV>
</BODY>
</HTML>
vwphillips
12-13-2011, 09:28 AM
<HTML><HEAD><TITLE>Monsters Inc Rollover Images</TITLE>
<META content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<SCRIPT language=Javascript type=text/javascript>
<!--

var monstersincON = new Image;
var sulleyON = new Image;
var mikeON = new Image;
var booON = new Image;
var randallON = new Image;

var monstersincOFF = new Image;
var sulleyOFF = new Image;
var mikeOFF = new Image;
var booOFF = new Image;
var randallOFF = new Image;

monstersincON.src = "http://www.vicsjavascripts.org.uk/StdImages/Two.gif";
sulleyON.src = "http://www.vicsjavascripts.org.uk/StdImages/Two.gif";
mikeON.src = "http://www.vicsjavascripts.org.uk/StdImages/Two.gif";
booON.src = "http://www.vicsjavascripts.org.uk/StdImages/Two.gif";
randallON.src = "http://www.vicsjavascripts.org.uk/StdImages/Two.gif";

monstersincOFF.src = "http://www.vicsjavascripts.org.uk/StdImages/One.gif";
sulleyOFF.src = "http://www.vicsjavascripts.org.uk/StdImages/One.gif";
mikeOFF.src = "http://www.vicsjavascripts.org.uk/StdImages/One.gif";
booOFF.src = "http://www.vicsjavascripts.org.uk/StdImages/One.gif";
randallOFF.src = "http://www.vicsjavascripts.org.uk/StdImages/One.gif";

/* Callout: This function takes two parameters, the version name (ON or OFF) and the image name. This makes it possible to handle all image swapping with only this one function. */

function swapImage(version, imagename){
document.getElementById(imagename).src = window[imagename + version].src;
}

/* Callout: This function turns all images back to their 'off' versions. */
function rollOffAll(){
swapImage('OFF','monstersinc');
swapImage('OFF','sulley');
swapImage('OFF','mike');
swapImage('OFF','boo');
swapImage('OFF','randall');
}
//-->

</SCRIPT>

</HEAD>
<BODY bgColor=white>

<DIV align=center><A onmouseover="swapImage('ON','monstersinc');"
onmouseout=rollOffAll(); onclick="rollOffAll();return true;"
href="http://.html"><IMG
border=0 id=monstersinc alt="Monsters Inc"
src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width=250 height=250></A>

<HR>

<BR><A onmouseover="swapImage('ON','sulley');" onmouseout=rollOffAll();
onclick="rollOffAll();return true;"
href="http://www..html"><IMG border=0
id=sulley alt=Sulley src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width=175
height=225></A>

<BR><A onmouseover="swapImage('ON','mike');"
onmouseout=rollOffAll(); onclick="rollOffAll();return true;"
href="http://www..html"><IMG
border=0 id=mike alt=Mike src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width=175
height=225></A>

<BR><A onmouseover="swapImage('ON','boo');"
onmouseout=rollOffAll(); onclick="rollOffAll();return true;"
href="http://www..html"><IMG
border=0 id=boo alt=Boo src="http://www.vicsjavascripts.org.uk/StdImages/One.gif"
width=175 height=225></A><BR>

<BR><A onmouseover="swapImage('ON','randall');"
onmouseout=rollOffAll(); onclick="rollOffAll();return true;"
href="http://www..html"><IMG
border=0 id=randall alt=Randall src="http://www.vicsjavascripts.org.uk/StdImages/One.gif"
width=175 height=225></A><BR>

</DIV>
</BODY>
</HTML>

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum