SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member Mini-Me's Avatar
    Join Date
    Aug 2004
    Location
    US
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    click a link, change the picture?

    Ok, first the files:
    Page:
    http://www.minime001.net/california.html
    Main JS file:
    http://www.minime001.net/scripts.js
    Pic loading JS file:
    http://www.minime001.net/calipics.js

    Shortened version of scripts:
    javascript:
    Code:
    if (document.images)
     {
       Cali01on= new Image(65,50);
       Cali01on.src="cali/Cali01s.JPG";
     
       Cali01off= new Image(65,50);
       Cali01off.src="cali/Cali01sp.jpg";
       
       pCali01= new Image(615,461);
       pCali01.src="cali/Cali01.JPG";
     }
     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;
       }
     }
    html:
    Code:
    <a href="#" onmouseover="lightup('Cali01')" onmouseout="turnoff('Cali01')"><img border=0 name="Cali01" width="65" height="50" src="cali/Cali01sp.jpg" alt=""></a>
     
     <img src="cali/Cali01.jpg" name="pCali01" border=0 width="615" height="461" alt="">
    Now the problems:
    I want to be able to click one of the thumbs and change the picture in the middle. How would I do this?
    Also, the way I have it, it scrolls to the top of the page when I click the link. Is there a way to make it not do this?

  2. #2
    SitePoint Guru
    Join Date
    Jun 2004
    Location
    Finland
    Posts
    703
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    HTML Code:
    <a href="#" onmouseover="switchImg('Cali01','cali/Cali01s.JPG'); return false" onmouseout="switchImg('Cali01','cali/Cali01sp.jpg'); return false" onclick="switchImg('pCali01','new_image.jpg'); return false"><img border=0 id="Cali01" width="65" height="50" src="cali/Cali01sp.jpg" alt=""></a>
     
    <img src="cali/Cali01.jpg" id="pCali01" border=0 width="615" height="461" alt="">
    Code:
    // preload only the images that don't show up in img-tags
    Cali01on = new Image();
    Cali01on.src = "cali/Cali01s.JPG";
    
    function switchImg(imgId,newImg) {
      img = new Image();
      img.src = newImg;
      imgElement = document.getElementById(imgId);
      imgElement.parentNode.replaceChild(img,imgElement); // this'll reset the width & height to whatever the image's width & height are. 
    }

  3. #3
    SitePoint Member Mini-Me's Avatar
    Join Date
    Aug 2004
    Location
    US
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    doesn't work. not a single bit of it. :/ Simply doesn't do a thing.
    -MM

  4. #4
    SitePoint Member Mini-Me's Avatar
    Join Date
    Aug 2004
    Location
    US
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    aha, I got it to work like this:
    Code:
      Cali01on= new Image(65,50);
      Cali01on.src="cali/Cali01s.JPG";
      Cali01off= new Image(65,50);
      Cali01off.src="cali/Cali01sp.JPG";
      pCali01= new Image(615,461);
      pCali01.src="cali/Cali01.JPG";
    
    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;
      }
    }
    
    function switchImg(picName,imgName)
    {
      if (document.images)
      {
        imgOn=eval(imgName + ".src");
        document[picName].src= imgOn;
      }
    }
    Code:
    <a href="javascript:switchImg('mainimage','pCali01')" onmouseover="lightup('Cali01')" onmouseout="turnoff('Cali01')"><img border=0 name="Cali01" width="65" height="50" src="cali/Cali01sp.jpg" alt=""></a> 
    
    <img src="cali/Cali01.JPG" name="mainimage" border=0 width="615" height="461" alt="">
    Thanks for the help, though!
    -MM


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
  •