NS 4 Change IMG in layer

**freakysid** · Mar 9, 2001 08:11

My knowledge of javascript is pathetic

I want to change the image in a layer when the user clicks on a thumbnail image (in another layer). Here is my function:

Code:

function swapImage(imgSRC) {
   if(document.layers) {
      document.layers['lyrLargeImg'].document.images['imgLarge'].src= imgSRC;
   }
   if (document.images) {
      imgLarge.src = imgSRC;
   }
}

And here is where it gets called (you will see that I'm calling some other macromedia dreamweaver functions too)

Code:

<!-- Large Image Layer -->
<div id="lyrLargeImg" style="position:absolute; left:361px;
   top:54px;width:375px; height:300; z-index:3">
   <img src="images/1pixel.gif" width="375" height="300" name="imgLarge"></div>
<!-- Thumbnail Layers -->
<div id="lyrThumb00" style="position:absolute; layer-background-color: #FFFFFF; background-color: #FFFFFF; left:141px; top:65px; width:85; height:68; z-index:5"> 
  <a href="#" 
     onMouseDown="MM_setTextOfLayer('lyrDesc','','fahf')" 
	 onMouseOver="MM_setTextOfLayer('lyrDesc','','blah')" 
	 onMouseOut="MM_setTextOfLayer('lyrDesc','','')" 
	 onClick="swapImage('<?php echo "images/" . $items[0]->large_image_name ?>')"> 
  <img src="<?php echo "images/" . $items[0]->small_image_name ?>" border="0" >
  </a> 
</div>

It works ticky-boo in IE but the image swap doesn't work in NS.

Code:

JavaScript Error: 
line 47:
imgLarge is not defined.

**freddydoesphp** · Mar 9, 2001 12:12

Sid one thing that Netscape 4. hates is inline style definitions and in order for Netscape 4 to recognize the layers you need to put the style definitions for the layers in a stylesheet that is in between the <head> tags of the current doc so cheange

<head>
<style type="text/css">
#lyrLargeImg { position:absolute; left:361px; top:54px;width:375px; height:300; z-index:3 }
#lyrThumb00 { position:absolute; layer-background-color: #FFFFFF; background-color: #FFFFFF; left:141px; top:65px; width:85; height:68; z-index:5 }
</style>
</head>
<body>

<div id="lyrLargeImg" >
<img src="images/1pixel.gif" width="375" height="300" name="imgLarge"></div>

<div id="lyrThumb00" >
<a href="#"
onMouseDown="MM_setTextOfLayer('lyrDesc','','fahf')"
onMouseOver="MM_setTextOfLayer('lyrDesc','','blah')"
onMouseOut="MM_setTextOfLayer('lyrDesc','','')"
onClick="swapImage('<?php echo "images/" . $items[0]->large_image_name ?>')">
<img src="<?php echo "images/" . $items[0]->small_image_name ?>" border="0" >
</a>
</div>

</body>

**freakysid** · Mar 9, 2001 16:02

Thanks for the code freddy. Still no joy however. Works in IE4, and not in NS4. But I'm not getting an error message now! Also I changed the event from onClick to onMouseDown but that didn't help either.

Help! Someone has done this successfully surely.

BTW - at the very beginning I had the onMouseDown event handling code right in the ?<img> tag and that worked. It was when I added the other code to handle writing to other layers that things broke down (ie mix of event handlers in the <a href> and <img> tags didn't work.

**freakysid** · Mar 9, 2001 17:03

Code:

<a href="javascript:swapImage('<?php echo "images/" . $items[0]->large_image_name ?>')"   
  onMouseDown="MM_setTextOfLayer('lyrDesc','','blah)"
  onMouseOver="MM_setTextOfLayer('lyrDesc','','fahf)"
  onMouseOut="MM_setTextOfLayer('lyrDesc','','')">
<img src="<?php echo "images/" . $items[0]->small_image_name ?>" border="0"></a>
</div>

That does the trick!

Blah - there's no rhyme or reason to cross-browser DHTML.

User Tag List

Thread: NS 4 Change IMG in layer

Thread Tools

Display

Bookmarks

Bookmarks

Posting Permissions