Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > A couple of tricky image issues

Reply
Thread Tools

A couple of tricky image issues

 
 
daninbrum@hotmail.com
Guest
Posts: n/a
 
      02-24-2006
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

 
Reply With Quote
 
 
 
 
Csaba Gabor
Guest
Posts: n/a
 
      02-24-2006
http://www.velocityreviews.com/forums/(E-Mail Removed) wrote:
> 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

 
Reply With Quote
 
 
 
 
yuelinniao@gmail.com
Guest
Posts: n/a
 
      02-24-2006
annother way is:
var imgs = document.getElementsByTagName("img");
for (var i = 0; i < imgs.length; i++)
{
var img = imgs[i];
if (img.name = "bigimage")
{
img.src = "....";
break;
}
}

 
Reply With Quote
 
d
Guest
Posts: n/a
 
      02-24-2006
<(E-Mail Removed)> wrote in message
news:(E-Mail Removed) oups.com...
> annother way is:
> var imgs = document.getElementsByTagName("img");
> for (var i = 0; i < imgs.length; i++)
> {
> var img = imgs[i];
> 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


 
Reply With Quote
 
Randy Webb
Guest
Posts: n/a
 
      02-24-2006
(E-Mail 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.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
 
Reply With Quote
 
Richard Cornford
Guest
Posts: n/a
 
      02-24-2006
Csaba Gabor wrote:
<snip>
> 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.


 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
background image tricky Nicole HTML 31 01-11-2009 10:08 PM
TRICKY VLAN ACL issues (reflexive VACLs!!!) jagg Cisco 2 01-09-2009 06:51 PM
a tricky if else(maybe not tricky but impossible) nirkheys@gmail.com C Programming 9 04-25-2006 06:13 PM
couple issues, different computers jnasr Computer Support 0 01-18-2006 07:57 PM
Tricky AUTOLOAD behavior Jim Schueler Perl 1 08-25-2004 08:00 AM



Advertisments