Log in

View Full Version : 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>
<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:

<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




<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.

<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.