A couple of tricky image issues

Discussion in 'Javascript' started by daninbrum@hotmail.com, Feb 24, 2006.

  1. Guest

    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
    , Feb 24, 2006
    #1
    1. Advertising

  2. Csaba Gabor Guest

    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
    Csaba Gabor, Feb 24, 2006
    #2
    1. Advertising

  3. Guest

    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;
    }
    }
    , Feb 24, 2006
    #3
  4. d Guest

    <> wrote in message
    news:...
    > 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 :)
    d, Feb 24, 2006
    #4
  5. Randy Webb Guest

    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/
    Randy Webb, Feb 24, 2006
    #5
  6. 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.
    Richard Cornford, Feb 24, 2006
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Wayne  Wengert

    A Couple of Questions

    Wayne Wengert, Jan 22, 2004, in forum: ASP .Net
    Replies:
    1
    Views:
    307
    =?Utf-8?B?aSBkb250IGtub3cgbXVjaCBhYm91dCB2cy4uLmI=
    Jan 22, 2004
  2. Martin

    A Couple Of Questions

    Martin, Mar 6, 2004, in forum: ASP .Net
    Replies:
    1
    Views:
    329
    Mark Jerde
    Mar 6, 2004
  3. =?Utf-8?B?TWljaGHFgiBKYW51c3pjenlr?=

    aspnet server application hang for couple of minutes

    =?Utf-8?B?TWljaGHFgiBKYW51c3pjenlr?=, Aug 16, 2004, in forum: ASP .Net
    Replies:
    4
    Views:
    413
    =?Utf-8?B?TWljaGHFgiBKYW51c3pjenlr?=
    Aug 21, 2004
  4. Replies:
    9
    Views:
    517
    CBFalconer
    Apr 25, 2006
  5. Nicole

    background image tricky

    Nicole, Jan 8, 2009, in forum: HTML
    Replies:
    31
    Views:
    1,285
    dorayme
    Jan 11, 2009
Loading...

Share This Page