Solved

Image swap onclick

Posted on 2006-06-16
14
461 Views
Last Modified: 2008-01-16
I am using a javascript swap image onclick script, I have small thumbnails and when clicked they change a larger image on the page. The larger image is contained in a div and I have assigned a loading graphic as the background image of this div, so when the initial image is loading the user sees a loading graphic. However when the page is loaded and a thumbnail is clicked, the new image just replaces the original image and the loading graphic is never seen, which is where my problem lies. I need this loading graphic to appear each time a thumbnail is clicked, so that user knows they are waiting for the image to load.

Here is my current code:

<script type="text/javascript">
function imgChange( img )
{
document.bigpic.src = img
}
</script>

<div id="mainbody">
    <div id="textcol">
      <h2><a href="corporate-wear.asp" title="Back to Corporate Wear">Corporate Wear</a> : <a href="corporate-ladies.asp" title="Back to Ladies Wear">Ladies Wear</a> : Jackets </h2>
      <div class="textholder" id="fullheight">
        <p>Ut enim ad minim veniam, ut labore et dolore magna aliqua. Ut aliquip ex ea commodo consequat. Quis nostrud exercitation eu fugiat nulla pariatur.</p>
      </div>
      <div id="thumbs">
        <p id="enlarge">Click to enlarge</p>
        <p><a href="images/ladies-jacket-image2.jpg" title="Click to view larger image"><img src="images/ladies-jacket-thumb2.jpg" alt="Ladies Jacket Thumb" width="78" height="77" border="0" onclick="imgChange('images/ladies-jacket-image2.jpg'); return false" /></a><a href="images/ladies-jacket-image3.jpg" title="Click to view larger image"><img src="images/ladies-jacket-thumb3.jpg" alt="Ladies Jacket Thumb" width="78" height="77" border="0" onclick="imgChange('images/ladies-jacket-image3.jpg'); return false" /></a><a href="images/ladies-jacket-image4.jpg" title="Click to view larger image"><img src="images/ladies-jacket-thumb4.jpg" alt="Ladies Jacket Thumb" width="78" height="77" border="0" onclick="imgChange('images/ladies-jacket-image4.jpg'); return false" /></a><a href="images/ladies-jacket-image1.jpg" title="Click to view larger image"><img src="images/ladies-jacket-thumb1.jpg" alt="Ladies Jacket Thumb" width="78" height="77" border="0" onclick="imgChange('images/ladies-jacket-image1.jpg'); return false" /></a></p>
      </div>
    </div>

This is the div with the background loading image:

    <div id="imgcol"><img src="images/ladies-jacket-image1.jpg" alt="Ladies Jacket Image" name="bigpic" width="367" height="386" id="bigpic" /></div>
0
Comment
Question by:djfenom
  • 7
  • 6
14 Comments
 
LVL 7

Expert Comment

by:geordie007
ID: 16918857

if, when the user first views the page, the div already contains an image (the default image), why not simply apply the loading graphic as a background image to the "imgcol" div? this way, it'll always be present, but will only be seen when the div doesn't contain an image (when the image is loading for example).
0
 

Author Comment

by:djfenom
ID: 16918898
I'm not sure I understand, the imgcol div already has a background image called "loading.gif", this is seen only when the page loads the first time, when a thumbnail is clicked the image in the div is just replaced, it doesn't disappear first exposing the loading.gif background, so the user just gets a pause before the new image is loaded.
0
 
LVL 30

Expert Comment

by:callrs
ID: 16918923
On click: Why not show the loading graphic. Then use the setTimout to delay showing the new image.
0
 

Author Comment

by:djfenom
ID: 16918962
Ok, how would I go about that and is it cross-browser compatible?
0
 
LVL 30

Expert Comment

by:callrs
ID: 16919161
<script type="text/javascript">
function imgChange2(img){document.bigpic.src = img;}

function imgChange( img ) {
      document.bigpic.src = "loading_image.jpg";
      setTimeout("imgChange2(img)",1000);
}
</script>

Replace 'loading_image.jpg" with path to your background image.

setTimeout is a standard Javascript unction & as far as I knew it's cross-browser compatible:
http://www.w3schools.com/htmldom/met_win_settimeout.asp     HTML DOM setTimeout() Method
0
 

Author Comment

by:djfenom
ID: 16919486
Thanks for that, but I'm now getting 'img' is undefined? It changes to the loading graphic, then pauses for a few seconds, then gives the error?
0
 
LVL 30

Expert Comment

by:callrs
ID: 16919498
Oops. Try this:
setTimeout("ImgChange2("+img+")",1000);
0
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 

Author Comment

by:djfenom
ID: 16919523
Now I'm getting 'images' is undefined? The only place it mentions this is onclick="imgChange('images/ladies-jacket-image2.jpg'); ???
0
 
LVL 30

Expert Comment

by:callrs
ID: 16919663
setTimeout("imgChange2('"+img+"')",2000)
Ok now I decided to test it before posting code :O
That wont give you errors, but for some reason the other image is NOT being displayed after the timeout. Gimme bit more time.
0
 
LVL 30

Accepted Solution

by:
callrs earned 500 total points
ID: 16919864
function imgChange2(img){document.bigpic.src=img;return true;}

function imgChange(img,timeout) {
      document.bigpic.src = "3428.jpg"
      setTimeout('imgChange2("'+img+'")',timeout);
      }

I've added a "timeout" parameter, in case you want to vary the time from where you call the function.
But remove it if you don't need it & just set the timeout to any # of milliseconds in setTimeout
0
 

Author Comment

by:djfenom
ID: 16920258
Excellent, thanks very much!
0
 
LVL 30

Expert Comment

by:callrs
ID: 16920907
Welcome.
Here's a more flexible version: You can call it with or without the timeout parameter; without, then it uses default value.

function imgChange(img,timeout) {
      if(timeout==undefined) timeout=500;
      document.bigpic.src = "3428.jpg"
      setTimeout('imgChange2("'+img+'")',timeout);
      }

Usability note: unnecessary waits can be annoying on a web site. The faster your reader can view the page, the more they may like it. If a high speed Internet connection can let people see a bigger picture instantly instead of waiting a second or two, then why force a wait? Unless it's for artistic or similar purposes, but even then there may be better ways to doing what you want to do without the waits.

One alternative:
A "Loading..." banner below the bigpic div, displayed for a second or few. This way the image loads as fast as it can while giving the reader a cue that it's loading -- and you make a happy reader from the display speed.
0
 

Author Comment

by:djfenom
ID: 16921025
Thanks again, the larger images are between 35-50k, so there's not gonna be a massive wait anyway, even on dial up.
0
 
LVL 30

Expert Comment

by:callrs
ID: 16921884
Problem with this method is: if the image loads in 1/4 second, and you make the user wait 2 seconds, that's an unneeded wait.

There may be a way to find out when the image has finished loading. And theres also a "preload" feature....
0

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

759 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now