Forum Moderators: open
I'm making a simple gallery with thumbnails at the bottom of the page and a bigger version of the thumbnail appearing in the middle. When user clicks the thumbnail he sees the big image. For this I'm using this code:
in the <head>:
<script type="text/javascript">
function changeImage(filename)
{
document.mainimage.src = filename;
}
</script>
in the body:
<img src="images/main.jpg" name="mainimage" alt="" />
<a href="javascript:changeImage('images/01.jpg')">01</a>
what this does is it displays the image main.jpg when the page loads and than when someone clicks the link, it changes this image to another one. so far so good. all i want to add to this is that in addition to the new image appearing, while the new image is loading, the user sees some sort of animated gif which indicates that the new image is loading. that's it.
my question is, how do i do it? I'm complete noob and don't realy know javascript.
thanks,
krko
However, if I was to do this, I would probably need to have some event that fired when a picture finished loading. There is an img onload event (I don't know how reliable it is). But I think this will work (fill in your own image paths):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset:utf-8">
<title></title>
<script type="text/javascript">
// Preload the loading image
var loadingImg = new Image();
loadingImg.src = './img/loading.gif';
function changeImage(filename)
{
// Show the loading image
document.mainimage.src = loadingImg.src;
var bigImg = new Image();
bigImg.onload = function() {
// When the big image finishes loading, swap the main img with it
document.mainimage.src = bigImg.src;
}
bigImg.src = filename;
}
</script>
</head>
<body>
<a href="javascript:changeImage('./img/bigimg.jpg')">01</a> <br>
<img src="./img/bigimg.gif" name="mainimage" alt="" />
</body>
</html>
huge thanks!
krko
clicking the link changes the big image in the above script.
my question is, is there a way to highlight the last clicked link so user knows he's now watching image number 5 if he leaves the page and gets back to it after a few minutes?
thanks,
krko
Replace with:
<a href="javascript:changeImage('./img/bigimg.jpg');this.style.fontWeight='bold';">01</a>
