SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    ********* Callithumpian silver trophy freakysid's Avatar
    Join Date
    Jun 2000
    Location
    Sydney, Australia
    Posts
    3,798
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  2. #2
    Dumb PHP codin' cat
    Join Date
    Aug 2000
    Location
    San Diego, CA
    Posts
    5,460
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>
    <!-- Large Image Layer -->
    <div id="lyrLargeImg" >
    <img src="images/1pixel.gif" width="375" height="300" name="imgLarge"></div>
    <!-- Thumbnail Layers -->
    <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>
    Please don't PM me with questions.
    Use the forums, that is what they are here for.

  3. #3
    ********* Callithumpian silver trophy freakysid's Avatar
    Join Date
    Jun 2000
    Location
    Sydney, Australia
    Posts
    3,798
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Last edited by freakysid; Mar 9, 2001 at 16:14.

  4. #4
    ********* Callithumpian silver trophy freakysid's Avatar
    Join Date
    Jun 2000
    Location
    Sydney, Australia
    Posts
    3,798
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •