clicking small image to show a big image

Discussion in 'Javascript' started by handersonVA, Nov 28, 2005.

  1. handersonVA

    handersonVA Guest

    Hello,
    I'd like to put small images around a big image, so when a small image is
    clicked, that image is shown as a big image in the center.
    how should I do that? I will use a table tag to organize the images, but how
    can I make this thing happen?
     
    handersonVA, Nov 28, 2005
    #1
    1. Advertisements

  2. handersonVA wrote:

    > I'd like to put small images around a big image, so when a small image is
    > clicked, that image is shown as a big image in the center.
    > how should I do that?


    <a href="a-near-identical-page-with-a-different-image-in-the-middle.html">
    <img src="..." alt="...">
    </a>

    > I will use a table tag to organize the images


    It doesn't /sound/ like tabular data. An unordered list would probably be
    more appropriate (although with suitable CSS to create the layout you
    want).

    --
    David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
    Home is where the ~/.bashrc is
     
    David Dorward, Nov 28, 2005
    #2
    1. Advertisements

  3. handersonVA

    .:|:. Guest

    handersonVA wrote:
    > Hello, I'd like to put small images around a big image, so when a
    > small image is clicked, that image is shown as a big image in the
    > center. how should I do that? I will use a table tag to organize
    > the images, but how can I make this thing happen?


    The click on the small picture calls a function containing this:
    document.getElementById("IDofBigPicture").src=picFile[x]

    This tells the browser to put the imagefile whose name is contained
    in the variable "picFile[x]" in the html element with the given ID.

    The big picture appears where you've placed the tag
    <img id="IDofBigPicture" src="defaultPicture.jpg"... />

    Better to have an array of variables
    picFile[0] = "bigPicture0.jpg";
    picFile[1] = "bigPicture1.jpg";
    picFile[2] = "bigPicture2.jpg";
    ....

    See what I've done:
    html file:
    http://tinyurl.com/8zknx
    related javascript file:
    http://tinyurl.com/db8v6

    ..:|:.
     
    .:|:., Nov 28, 2005
    #3
  4. handersonVA

    Randy Webb Guest

    ..:|:. said the following on 11/28/2005 5:17 PM:
    > handersonVA wrote:
    >
    >>Hello, I'd like to put small images around a big image, so when a
    >>small image is clicked, that image is shown as a big image in the
    >>center. how should I do that? I will use a table tag to organize
    >>the images, but how can I make this thing happen?

    >
    >
    > The click on the small picture calls a function containing this:
    > document.getElementById("IDofBigPicture").src=picFile[x]


    No, the click on the small picture should call a function that contains
    something more like this:

    document.images['imageNAMEnotID'].src=someOtherFile.jpg

    That is what the images collection is for - accessing images.

    --
    Randy
    comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
    Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
     
    Randy Webb, Nov 28, 2005
    #4
  5. handersonVA

    McKirahan Guest

    "handersonVA" <> wrote in message
    news:bpKif.23004$rB3.15657@dukeread02...
    > Hello,
    > I'd like to put small images around a big image, so when a small image is
    > clicked, that image is shown as a big image in the center.
    > how should I do that? I will use a table tag to organize the images, but

    how
    > can I make this thing happen?



    How about something like this. Watch for word-wrap. Test as-is.

    <html>
    <head>
    <title>36images.htm</title>
    <script type="text/javascript">
    var http = "http://www.net4tv.com/voice/graphics/printables/";
    var img1 = "83_?_sm.jpg";
    var img2 = "83_?.gif";
    var lets = "abcdefghijklmnopqrstuvwxyz";
    var tag1 = "<img src='" + http + img1 + "' border='0' width='52' height='52'
    alt='?' style='cursor:pointer; cursor:hand' onclick='img.src=\"" + http +
    img2 + "\"'>";
    var tag2 = "<img src='" + http + img2.replace(/\?/,"letter_a") + "'
    border='0' width='416' height='416' alt='' name='img'>";
    var tags;
    var what;
    var e = 0;
    var tabl = new Array();
    tabl[e++] = "<table border='0' cellpadding='0' cellspacing='0'
    width='522' style='border:solid 1px black'>";
    tabl[e++] = "<caption><b>Click a character and see the center
    change!</b></caption>";
    tabl[e++] = "<tr>";
    tabl[e++] = " <td colspan='3'>";
    tabl[e++] = " <table border='0' cellpadding='0' cellspacing='0'>";
    tabl[e++] = " <tr>";
    for (var i=8; i<18; i++) {
    what = "letter_" + lets.substr(i,1);
    tags = tag1.replace(/\?/g,what);
    tabl[e++] = " <th>" + tags + "</th>";
    }
    tabl[e++] = " </tr>";
    tabl[e++] = " </table>";
    tabl[e++] = " </td>";
    tabl[e++] = "</tr>";
    tabl[e++] = "<tr>";
    tabl[e++] = " <td width='52'>";
    tabl[e++] = " <table border='0' cellpadding='0' cellspacing='0'>";
    for (var j=7; j>-1; j--) {
    what = "letter_" + lets.substr(j,1);
    tags = tag1.replace(/\?/g,what);
    tabl[e++] = " <tr><th>" + tags + "</th></tr>";
    }
    tabl[e++] = " </table>";
    tabl[e++] = " </td>";
    tabl[e++] = " <td width='416'>";
    tabl[e++] = " <table border='0' cellpadding='0' cellspacing='0'>";
    tabl[e++] = " <tr><th style='border:solid 1px black'>" + tag2 +
    "</th></tr>";
    tabl[e++] = " </table>";
    tabl[e++] = " </td>";
    tabl[e++] = " <td width='52'>";
    tabl[e++] = " <table border='0' cellpadding='0' cellspacing='0'>";
    for (var k=18; k<26; k++) {
    what = "letter_" + lets.substr(k,1);
    tags = tag1.replace(/\?/g,what);
    tabl[e++] = " <tr><th>" + tags + "</th></tr>";
    }
    tabl[e++] = " </table>";
    tabl[e++] = " </td>";
    tabl[e++] = "</tr>";
    tabl[e++] = "<tr>";
    tabl[e++] = " <td colspan='3'>";
    tabl[e++] = " <table border='0' cellpadding='0' cellspacing='0'>";
    tabl[e++] = " <tr>";
    for (var l=0; l<10; l++) {
    what = "number_" + l;
    tags = tag1.replace(/\?/g,what);
    tabl[e++] = " <th>" + tags + "</th>";
    }
    tabl[e++] = " </tr>";
    tabl[e++] = " </table>";
    tabl[e++] = " </td>";
    tabl[e++] = "</tr>";
    tabl[e++] = "</table>";
    document.write(tabl.join("\n"));
    </script>
    </head>
    <body>
    </body>
    </html>


    I know that the dimensions of the images are not the actual.
     
    McKirahan, Nov 28, 2005
    #5
  6. Jasen Betts wrote:

    > On 2005-11-28, handersonVA <> wrote:
    >> I'd like to put small images around a big image, so when a small
    >> image is clicked, that image is shown as a big image in the center.
    >> how should I do that? I will use a table tag to organize the images,
    >> but how can I make this thing happen?

    >
    > Something like this should work for most browsers.
    >
    > <script type="text/javascript">
    > if ( typeof(bigimg)=="undefined" )


    typeof is an operator, not a method. For the sake of Pretty Printing,
    its operand should be delimited with whitespace, not parentheses.

    > bigimg=document.getElementById("bigimg");


    Using features without proper feature test on runtime is considered
    harmful: <http://www.pointedears.de/scripts/test/whatami>, ยง 2.

    Variables should be declared before used.

    if (typeof bigimg == "undefined"
    && typeof document != "undefined"
    && document.images)
    {
    var bigimg = document.images["bigimg"];
    }

    > </script>
    >
    > <img id="pigimg" src="bigpic0.gif" />

    ^
    Internet Explorer does not support XHTML. Any UA really supporting
    HTML would parse this as <img id="pigimg" src="bigpic0.gif">&gt;

    And probably you meant id="bigimg".

    > <img src="smallpic1.gif" onclick="bigimg.src='bigpic1.gif'" />

    ^ ^
    > <img src="smallpic2.gif" onclick="bigimg.src='bigpic2.gif'" />

    ^ ^
    > <img src="smallpic3.gif" onclick="bigimg.src='bigpic3.gif'" />

    ^ ^
    And all those elements are missing the `alt' attribute value. Of
    course the assignment will error if `bigimg' is still undefined,
    hence it should take place guarded in a called method. Compare

    <http://www.pointedears.de/scripts/test/hoverMe/>


    PointedEars
     
    Thomas 'PointedEars' Lahn, Nov 30, 2005
    #6
  7. Jasen Betts wrote:

    > On 2005-11-30, Thomas 'PointedEars' Lahn <> wrote:
    >> HTML would parse this as <img id="pigimg" src="bigpic0.gif">&gt;
    >>
    >> And probably you meant id="bigimg".
    >>
    >>> <img src="smallpic1.gif" onclick="bigimg.src='bigpic1.gif'" />

    >> ^ ^
    >> [...] Of course the assignment will error if `bigimg' is still
    >> undefined, hence it should take place guarded in a called method.
    >> [...]

    >
    > or maybe a dummy bigimg object could be created, if bigimg couldn't be
    > referenced correctly Then it could have it's src attribute altered and
    > there would be no error.


    True. But `bigimg' spoils the global namespace; image references
    should be encapsulated in a user-defined object, as hoverMe does.

    > How do you figure that <tag /> translates to <tag>&gt


    It translates to <tag>&gt; because of the NET delimiter /

    ,-<URL:http://www.w3.org/TR/html401/sgml/sgmldecl.html>
    |
    | [...]
    | FEATURES
    | MINIMIZE
    | DATATAG NO
    | OMITTAG YES
    | RANK NO
    | SHORTTAG YES
    ^^^^^^^^^^^^
    | [...]

    Further information:
    [en] <URL:http://www.w3.org/TR/NOTE-sgml-xml.html>

    Test case:
    [de] <URL:http://www.dodabo.de/html+css/tests/shorttag.html>
    [en] <URL:http://translate.google.com/translate?u=http%3A%2F%2Fwww.dodabo.de%2Fhtml%2Bcss%2Ftests%2Fshorttag.html&langpair=de|en&ie=Unknown&oe=ISO-8859-1>


    PointedEars
     
    Thomas 'PointedEars' Lahn, Dec 1, 2005
    #7
    1. Advertisements

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. Disco Octopus

    to show image or to show flash

    Disco Octopus, May 13, 2004, in forum: HTML
    Replies:
    7
    Views:
    2,654
    Toby A Inkster
    May 14, 2004
  2. Chris
    Replies:
    2
    Views:
    554
    Beauregard T. Shagnasty
    Nov 26, 2007
  3. Shaguf
    Replies:
    0
    Views:
    797
    Shaguf
    Dec 24, 2008
  4. Shaguf
    Replies:
    0
    Views:
    689
    Shaguf
    Dec 26, 2008
  5. Shaguf
    Replies:
    0
    Views:
    439
    Shaguf
    Dec 26, 2008
  6. Shaguf
    Replies:
    0
    Views:
    442
    Shaguf
    Dec 24, 2008
  7. Jason Heydasch
    Replies:
    1
    Views:
    728
  8. sonic
    Replies:
    6
    Views:
    308
Loading...