An error in my code??

**sdh0013** · 02-07-2010, 07:41 PM

I have the following piece of code which nearly works.

It has five text links and five images, when you mouseover the textlink onbe of the five images changes, on mouseout it does not change back to the original image but a different one.

Can anyone help me with this?

thanks.

HTML Code:

<HTML>
<HEAD>

<SCRIPT language="JavaScript">
<!--
  if (document.images)
   {

     image_off= new Image(100,100);
     image_off.src="image1.jpg";
     image_off= new Image(100,100);
     image_off.src="image2.jpg";
     image_off= new Image(100,100);
     image_off.src="image3.jpg";
     image_off= new Image(100,100);
     image_off.src="image4.jpg";
     image_off= new Image(100,100);
     image_off.src="image5.jpg";

  
     image1= new Image(100,100);
     image1.src="image1.jpg";
     image2= new Image(100,100);
     image2.src="image2.jpg";
     image3= new Image(100,100);
     image3.src="image3.jpg";
     image4= new Image(100,100);
     image4.src="image4.jpg";
     image5= new Image(100,100);
     image5.src="image5.jpg";
     image6= new Image(100,100);
     image6.src="image6.jpg";
     image7= new Image(100,100);
     image7.src="image7.jpg";
     image8= new Image(100,100);
     image8.src="image8.jpg";
     image9= new Image(100,100);
     image9.src="image9.jpg";
     image10= new Image(100,100);
     image10.src="image10.jpg";
   }

function change1(picName,imgName)
 {
   if (document.images)
    {
      imgOn=eval(imgName + ".src");
      document[picName].src= imgOn;
    }
 }
//-->
</SCRIPT>

</HEAD>

<P>
<A HREF="url" onMouseover="change1('pic1','image6')" onMouseout="change1('pic1','image_off')">one</A>
&nbsp;&nbsp;
<A HREF="url" onMouseover="change1('pic2','image7')" onMouseout="change1('pic2','image_off')">two</A>
&nbsp;&nbsp;
<A HREF="url" onMouseover="change1('pic3','image8')" onMouseout="change1('pic3','image_off')">three</A>
&nbsp;&nbsp;
<A HREF="url" onMouseover="change1('pic4','image9')" onMouseout="change1('pic4','image_off')">four</A>
&nbsp;&nbsp;
<A HREF="url" onMouseover="change1('pic5','image10')" onMouseout="change1('pic5','image_off')">five</A>
<P>
<IMG SRC="image1.jpg" name="pic1" width="50" height="50" border="0">
&nbsp;&nbsp;
<IMG SRC="image2.jpg" name="pic2" width="50" height="50" border="0">
&nbsp;&nbsp;
<IMG SRC="image3.jpg" name="pic3" width="50" height="50" border="0">
&nbsp;&nbsp;
<IMG SRC="image4.jpg" name="pic4" width="50" height="50" border="0">
&nbsp;&nbsp;
<IMG SRC="image5.jpg" name="pic5" width="50" height="50" border="0">

</BODY>
</HTML>

**auntnini** · 02-08-2010, 02:31 AM

Got a little dizzy looking at the code. Glaringly, you have not specified the 5 different "OFF" images --such as off_01, off_02.

It reminds me of this old Craig Knuckles roll-over used at http://www.lineforeline.com/main/index.htm usingl two parallel arrays:

Code:

 <script type="text/javascript">
//Craig D. Knuckles "Intro. to Interactive Prog. ..." p.348
var first = new Array();
var next = new Array();

for (i=0; i<=7; i=i+1) { /*one less than total =8 */
first[i] = new Image(100,150); } 

for (i=0; i<=7; i=i+1) { 
next[i] = new Image(100,150); }
/* Load images into two parallel arrays*/
/* JavaScript code prior to function definitions preloads images*/
first[0].src = "cats.jpg";
first[1].src = "friskiesCat.jpg";
first[2].src = "prettyface.jpg";
first[3].src = "NewYorker.jpg";
first[4].src = "papa.jpg";
first[5].src = "selfmarker.jpg";
first[6].src = "MrTail.jpg";
first[7].src = "JAsketch.jpg";

next[0].src = "cats.gif";
next[1].src = "friskiesCat.gif";
next[2].src = "prettyface.gif";
next[3].src = "NewYorker.gif";
next[4].src = "papa.gif"; 
next[5].src = "selfmarker.gif"; 
next[6].src = "MrTail.gif";
next[7].src = "JAsketch.gif";

function change(which) {
document.images[which].src = next[which].src;
}
function changeback(which) {
document.images[which].src = first[which].src;
}
</script>

<a href="javascript:void(0)" onMouseOver="change(0)" onMouseOut="changeback(0)"> 
<img name="0" border="0" src="cats.jpg" width="100" height="150" alt="cat is essential."></a>

Or this from http://www.chanit.com/people/oil.htm

Code:

<script type="text/javascript">
var NS4 = navigator.appName.indexOf("Netscape") != -1 && navigator.appVersion.charAt(0) == "4";
if (NS4) {
document.write('<STYLE>');
document.write('#space { position: relative; z-order: 200; left: 0px; top: 0px; width: 526px; height: 475px; }');
document.write('</STYLE>');
}
// load big rollover images
MG1 = new Image(); MG1.src = 'youngSelf.jpg';
MG2 = new Image(); MG2.src = 'eileen78.jpg';
MG3 = new Image(); MG3.src = 'homework.jpg'; 
MG4 = new Image(); MG4.src = 'shima.jpg';
MG5 = new Image(); MG5.src = 'nyTimes.jpg';
MG6 = new Image(); MG6.src = 'clinton.jpg';
MG7 = new Image(); MG7.src = 'serenity.jpg';
MG8 = new Image(); MG8.src = 'oprah.jpg';
MG9 = new Image(); MG9.src = 'mama.jpg';
MG10 =new Image(); MG10.src = 'harveyD.jpg';
MG11 =new Image(); MG11.src = 'shaka78.jpg';
MG12 = new Image(); MG12.src = 'bernard.jpg';

// CHANGE IMAGES
function MGOn(MGName) {
if (document.images) {
if (!NS4) {
document["MGholder"].src = eval(MGName + ".src");
} else {
var myLeft = (526 - parseInt(eval(MGName + ".width"))) / 2;
var myTop = (475 - parseInt(eval(MGName + ".height"))) / 2;
document.layers["space"].document.open();
document.layers["space"].document.write('<span style="position: relative; top: ' + (myTop + 75) + 'px; left: ' + myLeft + 'px;"><img src="' + eval(MGName + ".src") + '" alt="" hspace=0 vspace=0 border=0 name="MGholder"></span>');
document.layers["space"].document.close();
}
} 
}
</SCRIPT>

I did not invoke an onMouseOut to change the "HOILDER" image back to original or to another image.

Code:

<a href="#" onMouseOver="MGOn('MG1')" target=""> 
<img name="1" class="thumb" alt="youngSelf" src="youngSelfT.gif"> </a>

**sdh0013** · 02-08-2010, 08:12 PM

Thank you.

Yes naming the individual image_off code has worked.

Thank you.

Thread: An error in my code??

Thread Tools

Search Thread

An error in my code??

Specify the different OFF images

Bookmarks

Bookmarks

Posting Permissions