JS lightup 2 pix not working?

rangor gubbins · 7 Aug 2008 at 23:30

hi,
I'm trying to do something that should be simple. I would like 2 images to change with mouseover, but i can't get it to work :confused:

. Its slowly driving me crazy. I am a beginner at this so please excuse me if i've done something stupid

my JS code is:

Code:

<SCRIPT language="JavaScript">
<!--
if (document.images)
{
pic1on= new Image(30,31); 
pic1on.src="../Graphics/buttons/menu_icon.png";

pic1off= new Image(30.31);
pic1off.src="../Graphics/buttons/menu_icon_blank.png";


pic2on= new Image(30,31); 
pic2on.src="../Graphics/buttons/menu_icon.png";

pic2off= new Image(30.31);
pic2off.src="../Graphics/buttons/menu_icon_blank.png";


pic3on= new Image(30,31); 
pic3on.src="../Graphics/buttons/menu_icon.png";

pic3off= new Image(30.31);
pic3off.src="../Graphics/buttons/menu_icon_blank.png";

.... ETC, UP TO ...

pic8on= new Image(15,10); 
pic8on.src="../Graphics/buttons/subMenu2.png";

pic8off= new Image(15.10);
pic8off.src="../Graphics/buttons/subMenu2off.png";
}

function lightup(imgName)
 {
   if (document.images)
    {
      imgOn=eval(imgName + "on.src");
      document[imgName].src= imgOn;
    }
 }

function turnoff(imgName)
 {
   if (document.images)
    {
      imgOff=eval(imgName + "off.src");
      document[imgName].src= imgOff;
    }
 }
 
//-->
</SCRIPT>

(i realise these are all referring to the same image, but pic7 and pic8 refer to different images. I don't know how i can label one image several times other than using this method - if someone knows a tidier way i'd love to know

)

In the <body> my JS is:

Code:

		within my table:

	<tr>
				<td class="menuIcon"><a href="sessions.html" onMouseover="lightup('pic3')" onMouseout="turnoff('pic3')"><img src="../Graphics/buttons/menu_icon_blank.png" name="pic3" width="30" height="31"/></a></td>
				<td class="menuText"><a href="sessions.html" onMouseover="lightup('pic3')" onMouseout="turnoff('pic3')">Sessions</a></td>
			</tr>

				<tr>
					<td class="submenuIcon"><a href="reiki.html" onMouseover="lightup('pic8','pic3')" onMouseout="turnoff('pic8','pic3')"><img src="../Graphics/buttons/subMenu2off.png" name="pic8" class="submenuIcon"/></a></td>
					<td class="submenuText"><a href="reiki.html" onMouseover="lightup('pic3','pic8')" onMouseout="turnoff('pic3','pic8')">Reiki</a></td>
				</tr>

so in the second table row, I want the mouseover to change both pic8 and pic3, but it just changes whatever is the first 'pic' on the "lightup" function, not both

According to a google search, my code seems right. What am i doing wrong?

Cheers

SimonCHere · 8 Aug 2008 at 09:38

The lightup and turnoff functions accept only 1 pic at a time, the first parameter, it ignores the second parameter.
So I think the below will work, if not you'll have to change the functions to use the strings you are passing it.

Code:

<td class="submenuIcon"><a href="reiki.html" onMouseover="lightup('pic8');lightup('pic3')" onMouseout="turnoff('pic8');turnoff('pic3')"><img src="../Graphics/buttons/subMenu2off.png" name="pic8" class="submenuIcon"/></a></td>
									</tr>

and are you sure that
pic8off= new Image(15.10);

Shouldn't be

pic8off= new Image(15,10);

Simon

Ladforce · 8 Aug 2008 at 09:54

If your just using this to change the picture displayed in the cell thats having the mouse over, why not use CSS hover and change the image that way?

rangor gubbins · 8 Aug 2008 at 14:33

thanks for your replies. I'll try what you suggest Simon. And yes i think it should a , not a .
@Ladforce - the pictures are not in the same cell as the one the mouse is hovering over.

cheers

Ladforce · 8 Aug 2008 at 16:17

Heres a quick way to set up all the images in a more compact way

Code:

    imageArray =  new Array(16)
    
    for ( var i = 0; i < imageArray.length; i++)
    {
        img           = (i < 12) ? new Image(30,31) : new Image(15,10);
        img.src       = (i<12) ? ( i%2 ? "../Graphics/buttons/menu_icon_blank.png" : "../Graphics/buttons/menu_icon.png" ) : ( i%2 ? "../Graphics/buttons/subMenu2off.png" : "../Graphics/buttons/subMenu2.png"  )
        imageArray[i] = img;
    }

Hopefully this is of some use. Il leave it up to you to figure out how to index into it and set the picture images but let us know if you get stuck.

rangor gubbins · 8 Aug 2008 at 19:27

@ simon. it worked a treat. thanks. (i thought i'd already tried that approach yesterday and it didn't work, but i must have done it wrong because it worked today)

@Ladforce. That looks loads tidier and compact. Unfortunately I am a total noob at this (this is pretty much my first attempt at writing my own JS), so I got a bit lost. I've got no time at the moment (hectic weekend!) to go through it properly and try to work it out, but i'll take note of it and try to get my head round when i have mroe time.

thanks for your help with this.