A couple of tricky image issues

[daninbrum]

Dear All,

I'm kocking together a page along the following lines...

<DIV ID="container">
<DIV ID="thumbs"><IMG SRC="..."><IMG SRC="..."><IMG SRC="..."></DIV>
<DIV ID="mainimage"><IMG SRC="..." NAME="bigimage"></DIV>
</DIV>

Could anyone give me some clues as to how to change the src of
bigimage? document.bigimage.src obviously wont do it because of the
nested DIVs. Any other route?

Also, some of the images that could go into bigimage are of different
proportions - can I stop them stretching to the size of the original?

Any advise taken very very gratefully.

Dan

 

[Csaba Gabor]

Dear All,

I'm kocking together a page along the following lines...

<DIV ID="container">
<DIV ID="thumbs"><IMG SRC="..."><IMG SRC="..."><IMG SRC="..."></DIV>
<DIV ID="mainimage"><IMG SRC="..." NAME="bigimage"></DIV>
</DIV>

Could anyone give me some clues as to how to change the src of
bigimage? document.bigimage.src obviously wont do it because of the
nested DIVs. Any other route?

If, instead of (or in addition to) a name, you give an id, then you can
use document.getElementById:

<IMG src="..." id="bigimage">

document.getElementById('bigimage').src = "...new src..."

Csaba Gabor from Vienna

 

[yuelinniao]

annother way is:
var imgs = document.getElementsByTagName("img");
for (var i = 0; i < imgs.length; i++)
{
var img = imgs;
if (img.name = "bigimage")
{
img.src = "....";
break;
}
}

 

[d]

annother way is:
var imgs = document.getElementsByTagName("img");
for (var i = 0; i < imgs.length; i++)
{
var img = imgs;
if (img.name = "bigimage")
{
img.src = "....";
break;
}
}

Letting the browser's native code do the work will be a lot quicker than
iterating through a collection of images... getElementById() is the way
forward

 

[Randy Webb]

(e-mail address removed) said the following on 2/24/2006 6:56 AM:

Dear All,

I'm kocking together a page along the following lines...

<DIV ID="container">
<DIV ID="thumbs"><IMG SRC="..."><IMG SRC="..."><IMG SRC="..."></DIV>
<DIV ID="mainimage"><IMG SRC="..." NAME="bigimage"></DIV>
</DIV>

Could anyone give me some clues as to how to change the src of
bigimage? document.bigimage.src obviously wont do it because of the
nested DIVs. Any other route?

Says who? Did you test it? The nested DIVS are irrelevant to the images
collection:

document.images['bigimage'].src=newImage; will work.

Also, some of the images that could go into bigimage are of different
proportions - can I stop them stretching to the size of the original?

Give your img tags a width and height.

 

[Richard Cornford]

Csaba Gabor wrote:

If, instead of (or in addition to) a name, you give an id,
then you can use document.getElementById:

<IMG src="..." id="bigimage">

document.getElementById('bigimage').src = "...new src..."

The commonly (near universally) implemented, and W3C DOM standard,
convenience - document.images - collection is the place to quickly look
up references to images by name (and/or ID in modern browsers) in HTML
DOMs.

Richard.