Member Avatar for emilyhedgecock

Hi
I have made a javascript image viewer where there are thumbnails at the top and when you click on them the bigger image below the row of thumbnail image changes according

My question is, how do i make the larger image become a hyperlink to the corresponding page it represents. Alternatively, it would not be a problem if a caption could be displayed below which i could make into a hyperlink.

Any help appreciated

Here is my script .js file

function img1click() {document.IMG.src="imagelibrary/dazzlebig.jpg";}
function img2click() {document.IMG.src="imagelibrary/gunshotbig.jpg"}
function img3click() {document.IMG.src="imagelibrary/searoombig.jpg"}
function img4click() {document.IMG.src="imagelibrary/smokebig.jpg"}

Here is the HTML

<img src="imagelibrary/dazzlethumb.jpg" onmouseup="img1click()" border="5"  />
<img src="imagelibrary/gunshotthumb.jpg" onmouseup="img2click()" border="5" />
<img src="imagelibrary/searoomthumb.jpg" onmouseup="img3click()" border="5" />
<img src="imagelibrary/smokethumb.jpg" onmouseup="img4click()" border="5" />
</br>
<img src="imagelibrary/dazzlebig.jpg" name="IMG" width="320" border="0" />
  • 3 Contributors
  • 7 Replies
  • 4K Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by almostbob

Recommended Answers

All 7 Replies

Member Avatar for Taywin

You cannot just change the image URL source using JavaScript because those images are not dynamically loaded. If you want to do it dynamically, you should use Ajax.

There are many ways to do this, but I will show you one way using JavaScript. All images need to be loaded before hand but will be hidden using CSS. I group all images inside a div and order them exactly the same way the thumbs are ordered because getElementsByTagName will return an array in that order. I also pass in the number order of the image to the function, so there will be only 1 function. The code is below...

By the way, I would not recommend you to do it this way if there are many images because it could be very slow at loading time. Just a thought...

Javascript code:

function imgClick(num) {
    var imgTags = document.getElementById("bigImg").getElementsByTagName("img")
    var selImg = parseInt(num, 10)-1  // beware of parseInt bug
    for (var i=0; i<imgTags.length; i++) {
      if (i==selImg) {
        imgTags[i].style.display = null
      }
      else {
        imgTags[i].style.display = "none"
      }
    }
  }

HTML format

<img src="imagelibrary/dazzlethumb.jpg" onmouseup="imgClick(1)" border="5" />
  <img src="imagelibrary/gunshotthumb.jpg" onmouseup="imgClick(2)" border="5" />
  <img src="imagelibrary/searoomthumb.jpg" onmouseup="imgClick(3)" border="5" />
  <img src="imagelibrary/smokethumb.jpg" onmouseup="imgClick(4)" border="5" />
  <br />
  <div id="bigImg">
    <img src="imagelibrary/dazzlebig.jpg" width="320" border="0" />
    <img src="imagelibrary/gunshotbig.jpg" width="320" border="0" style="display:none" />
    <img src="imagelibrary/searoombig.jpg" width="320" border="0" style="display:none" />
    <img src="imagelibrary/smokebig.jpg" width="320" border="0" style="display:none" />
  </div>
Member Avatar for emilyhedgecock

I just tried it and i have it working brilliantly, just what i was going for

I will read through your message again and try and absorb it a bit more, currently my brain has been fried by Javascript

Thank you very much!!

Member Avatar for emilyhedgecock

it doesn't work in Internet Explorer - Any Suggestions?? :s

Member Avatar for Taywin

Sorry for not checking this earlier. IE does not use 'display' to show or hide but 'visibility' instead. You could use different CSS class and use 'visibility' property instead. The property should work on both IE and FF. If not, FF should work with 'display' but IE will work with 'visibility'. However, images may be displayed in different locations (not on top of each other), so you may need to use position absolute in order to force them to stay at the same location.

Member Avatar for almostbob 
<html><head>
<script type='text/javascript'>
<!--
function imgclick(image) { 
document.getElementById('bigimg').src="imagelibrary/"+image+'big.jpg';
document.getElementById('linkimg').href="/root/path/"+image+".html"; 
}
-->
</script>
</head><body>
<img src="imagelibrary/dazzlethumb.jpg" onclick="imgclick('dazzle');" border="5"  />
<img src="imagelibrary/gunshotthumb.jpg" onclick="imgclick('gunshot');" border="5" />
<img src="imagelibrary/searoomthumb.jpg" onclick="imgclick('searoom');" border="5" />
<img src="imagelibrary/smokethumb.jpg" onclick="imgclick('smoke');" border="5" />
<br>
<a href='#' id='linkimg'><img src="imagelibrary/dazzlebig.jpg" id="bigimg" width="320" border="0" /></a>
</body>
<script type="text/javascript">
<!--
image1 = new Image();
image1.src = "imagelibrary/dazzlebig.jpg";
image2 = new Image();
image2.src = "imagelibrary/gunshotbig.jpg";
image3 = new Image();
image3.src = "imagelibrary/searoombig.jpg";
image4 = new Image();
image4.src = "imagelibrary/smokebig.jpg";
-->
</script>
</html>

the initial javsacript makes the requested links and image changes
the second javascript between </body> and </html> preloads the larger images to tif after the page is loaded and functioning without displaying any, gives an apparent speed increase over images in a div with display:none, load time is not changed, but the page becomes functional before all the images are loaded

the link href makes the assumption that /root/path will be repaced by the right path and that the filename convention established with thumb-big has been continued to the html filename

Edited by almostbob because: n/a
Member Avatar for emilyhedgecock

Thank you so much - its work in IE - life saver!

Member Avatar for almostbob

Thank you so much - its work in IE - life saver!

IE non-compliance issues **expletive deleted**, but IE holds ~85% of all browsers so pages have to work in IE, those code scraps are compliant(just) and work across all browsers

As a reference http://www.browsershots.org creates screenshots of your page in just about every browser as a test bed
its distributed processing, (seti, folding, etc)
you can get screens from whatever browser is online at the time you make the request often 50+


glad to be of help, have a lot of assistancedebt to give back thanks to others here

Edited by almostbob because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.