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. Advertising

  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. Advertising

  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. 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. Shaguf
    Replies:
    0
    Views:
    363
    Shaguf
    Dec 24, 2008
  2. Shaguf
    Replies:
    0
    Views:
    460
    Shaguf
    Dec 26, 2008
  3. Shaguf
    Replies:
    0
    Views:
    245
    Shaguf
    Dec 26, 2008
  4. Shaguf
    Replies:
    0
    Views:
    223
    Shaguf
    Dec 24, 2008
  5. Jason Heydasch
    Replies:
    1
    Views:
    315
Loading...

Share This Page