view images 2

celticking · Feb 15, 2001

I have used some javascript to show a main picture on my page. Below is 3 thumbnails that when clicked should replace the main picture but doesn't work. When i open the page, everything is in place, when i select the thumbnail, the main picture area goes blank with the little not found cross in the top left corner. Here is the code i have used.
<head>
<SCRIPT LANGUAGE="JavaScript">
browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);
ns3up = (browserName == "Netscape" && browserVer >= 3);
ie4up = (browserName.indexOf("Microsoft&quot

>= 0 && browserVer >= 4);
function doPic(imgName) {
if (ns3up || ie4up) {
imgOn = ("" + imgName);
document.mainpic.src = imgOn;
}
}
</script>
<body>
<table width=165 height=220 border=0 cellspacing=0 cellpadding=0>
<tr>
<td colspan=4 align=center height="180">
<img name="mainpic" src="art/pic1.jpg" width=168 height=180 border=0></td>
</tr>
<tr>
<td width="54" height="65" valign="top">
<a href="javascript:doPic('pic2.jpg');">
<img src="art/pic2.jpg" width=54 height=63 border=1></a></td>
<td width="54" valign="top">
<a href="javascript:doPic('pic3.jpg');">
<img src="art/pic3.jpg" width=54 height=63 border=1></a></td>
<td width="54" valign="top">
<a href="javascript:doPic('pic4.jpg');"><img src="art/pic4.jpg" width=54 height=63 border=1>
</a></td>

I hope someone can help with this. I've been pulling my hair out all day as it look correct to me.
Many thanks.

GIGN · Feb 15, 2001

Well, I got it to work - I think you have probably got your images in the wrong place - make sure of path and filename.

Also these images are being loaded every time == slow. You want to preload them using the Image() constructor - this way you can have them different size from your thumbnails, without stretching them.
image preload
<script>
...
var img_one = new Image();
img_one.src = "art/pic1.jpg";
...
/* Access via img_one.src - only loaded once, when page
loaded */
</script>

I also don't understand this:

function doPic(imgName) {
if (ns3up || ie4up) {
imgOn = ("" + imgName);
document.mainpic.src = imgOn;
}
}

You are actually passing the full path to the function, you don't need to store it - this will work too.

function doPic(imgName) {
if (ns3up || ie4up) {
document.mainpic.src = imgName;
}
}

You should also experiment with sending objects (by name or id) in function calls - saves a bit of mucking around.

b² - benbiddington@surf4nix.com

celticking · Feb 15, 2001

Thanks for your help but i'm still frustrated. Can you take a look at the actual page? It's here at

http://www.triartist.com/itc/itc_detail.lasso?user=stevemc

The paths and filenames look correct. I have 4 jpg's named pic1 thorugh pic4.

Thanks a lot.

celticking · Feb 15, 2001

Sorry, i have to apologize, it's working now. There was a problem with the path. Thanks for your help, i really appreciate it.

AndrewGrabovsky · Feb 16, 2001

Hi celticking!
I have an advise for you.
In your script you make sure that preloading and image change works. But how do you do it?! You determine whether the NN or IE version is appropriate.
And what other browsers? Like Opera, for example, that does it lot less good, but you don't give it a chance!

He's what you can place instead of (ns3up || ie4up):
if (document.images)
that's all, and you don't even need all that part of browserVer, ns3up, ie4up - it's just rubbish.

Abdrew | starway@mail.com

GIGN · Feb 16, 2001

Opera - isn't that somewhere rich people go for a nap?

b² - benbiddington@surf4nix.com

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

view images 2

celticking

Technical User

GIGN

Programmer

celticking

Technical User

celticking

Technical User

AndrewGrabovsky

Programmer

GIGN

Programmer

Similar threads

Part and Inventory Search

Sponsor