Want to creat rollover image to larger

Discussion in 'Javascript' started by Rock, Apr 22, 2006.

  1. Rock

    Rock Guest

    Hi,

    I want to create this..

    A 2 col table with 3 rows down.

    In the 1st col I want three thumb size images, 1 in each row

    When an image is rolled on, the larger image shows up in col 2

    In other words when a thumb is rolled on, its larger image is shown in another
    area of the table.

    Any help please?

    Can do the replace small image with larger okay, but they are in the same position.

    I am trying to duplicate something like this..

    http://cgi.ebay.com.au/ws/eBayISAPI.../search.dll?from=R40&satitle=6622724288&fvi=1


    Thanks

    Rock
     
    Rock, Apr 22, 2006
    #1
    1. Advertising

  2. Rock

    Ehsan Guest

    Hi Rock,

    Following are two javascript functions that you will require:

    <script language="javascript">
    function showbigimage(colid, imgName)
    {
    document.getElementById(colid).innerHTML = "<img src='"+imgName+"'>";
    }

    function hidebigimage(colid)
    {
    document.getElementById(colid).innerHTML = "";
    }
    </script>

    Here is the HTML table that you will want:

    <table border=1>
    <tr><td><img src=i1.jpg onmouseover='showbigimage("big1",
    "i1_big.jpg")' onmouseout='hidebigimage("big1")'></td>
    <td id='big1'></td></tr>
    <tr><td><img src=i2.jpg onmouseover='showbigimage("big2",
    "i2_big.jpg")' onmouseout='hidebigimage("big2")'></td>
    <td id='big2'></td></tr>
    <tr><td><img src=i3.jpg onmouseover='showbigimage("big3",
    "i3_big.jpg")' onmouseout='hidebigimage("big3")'></td>
    <td id='big3'></td></tr>
    </table>

    Hope this helps

    Thanks and God Bless!!

    Ehsan
    http://ehsan.bdwebwork.com
     
    Ehsan, Apr 22, 2006
    #2
    1. Advertising

  3. Rock

    Rock Guest

    Thanks Ehsan,

    Appreciate the trouble you went to.

    It is what I wanted. Now to look at the code so I can understand it.

    Regards,

    Rock

    in OZ.


    Ehsan wrote:
    > Hi Rock,
    >
    > Following are two javascript functions that you will require:
    >
    > <script language="javascript">
    > function showbigimage(colid, imgName)
    > {
    > document.getElementById(colid).innerHTML = "<img src='"+imgName+"'>";
    > }
    >
    > function hidebigimage(colid)
    > {
    > document.getElementById(colid).innerHTML = "";
    > }
    > </script>
    >
    > Here is the HTML table that you will want:
    >
    > <table border=1>
    > <tr><td><img src=i1.jpg onmouseover='showbigimage("big1",
    > "i1_big.jpg")' onmouseout='hidebigimage("big1")'></td>
    > <td id='big1'></td></tr>
    > <tr><td><img src=i2.jpg onmouseover='showbigimage("big2",
    > "i2_big.jpg")' onmouseout='hidebigimage("big2")'></td>
    > <td id='big2'></td></tr>
    > <tr><td><img src=i3.jpg onmouseover='showbigimage("big3",
    > "i3_big.jpg")' onmouseout='hidebigimage("big3")'></td>
    > <td id='big3'></td></tr>
    > </table>
    >
    > Hope this helps
    >
    > Thanks and God Bless!!
    >
    > Ehsan
    > http://ehsan.bdwebwork.com
    >
     
    Rock, Apr 22, 2006
    #3
  4. Rock

    ASM Guest

    Rock a écrit :
    > Hi,
    >
    > I want to create this..
    >
    > A 2 col table with 3 rows down.
    >
    > In the 1st col I want three thumb size images, 1 in each row
    >
    > When an image is rolled on, the larger image shows up in col 2


    is it difficult because you need to pre-charge all images

    best way would to have all images on the page
    some of then styled in invisible

    <style type="text/css">
    #visual img { position:absolute; visibility: hidden;}
    img#bigest { position: relative }
    #visual img.show { visibility: visible }
    </style>
    <script type="text/javascript">
    function hidImages() {
    var P = document.getElementById('visual').getElementsByTagName('IMG');
    for(var i=0;i<P.length;i++) P.className = '';
    }
    function showImage(pictIndex) {
    var P = document.getElementById('visual').getElementsByTagName('IMG');
    P[pictIndex-1].className = 'show';
    }
    </script>

    <table>
    <tr>
    <td>
    <img src="thumb/p1.jpg"
    onmouseover="showImage(1)" onmouseout="hidImages()">
    <img src="thumb/p2.jpg"
    onmouseover="showImage(2)" onmouseout="hidImages()">
    <img src="thumb/p3.jpg"
    onmouseover="showImage(3)" onmouseout="hidImages()">
    </td>
    <td id="visual">
    <img src="photos/p1.jpg">
    <img src="photos/p2.jpg" id="bigest">
    <img src="photos/p3.jpg">
    </td>
    </tr>
    </table>

    in this example your bigest image would be photos/p2.jpg
    and you give to it the id 'bigest'
    to arrange size of the td to this size


    --
    Stephane Moriaux et son [moins] vieux Mac
     
    ASM, Apr 22, 2006
    #4
  5. Rock

    Ehsan Guest

    Hi Stephane,

    Setting out "visiblity" property will occupy the space even the image
    is not being shown/kept hidden, i.e. in the column even if the image is
    hidden it will still show the YxY space occupied (width and height of
    the image). I think setting "display" property instead will be fine, if
    Rock wants to play around with CSS. Am I right?

    <style type="text/css">
    #visual img { position:absolute; display: none;}
    img#bigest { position: relative }
    #visual img.show { display: inline }
    </style>

    Thanks,

    Ehsan
     
    Ehsan, Apr 22, 2006
    #5
  6. Rock

    ASM Guest

    Ehsan a écrit :
    > Hi Stephane,
    >
    > Setting out "visiblity" property will occupy the space


    but as images are in absolute, they would occupy same space
    (not more space than bigest image with its own style)

    on my idea : visibility is a correct use here

    > <style type="text/css">


    perhaps would it miss :

    #virtual { position: relative; }

    --
    Stephane Moriaux et son [moins] vieux Mac
     
    ASM, Apr 22, 2006
    #6
  7. Rock

    Ehsan Guest

    Hi Stephane,

    Can you please check out the following two links. One is using your
    code, I have only changed the filenames and added a table border. And
    one is using your code but display property. You will see the second
    column on visibility.html shows a space (i.e. the size of image(s) it
    contains. On the other hand display.html does not show the space
    occupied.

    Please write your views on it.

    On display.html I have changed the following line:

    #visual img { position:absolute; visibility: hidden;}

    to

    #visual img { position:relative; display: none;}

    Making absolute to relative.

    http://ehsan.bdwebwork.com/tests/visibility.html
    http://ehsan.bdwebwork.com/tests/display.html

    Thanks,

    Ehsan
     
    Ehsan, Apr 22, 2006
    #7
  8. Rock

    ASM Guest

    ASM, Apr 22, 2006
    #8
  9. Rock

    Ehsan Guest

    There are few more suprises with CSS, even with "display" property. I
    have seen, if you set a "display" property for <td> and toggle with
    showing the <td> and hidding it, eventually it keeps creating a space
    before the <td> space. When it hides a small space before the cell gets
    created. If you anyway have to hide the whole <td>, you must start
    another table inside the td and set property for the <table> tag.

    Anyway if you (Stephane) or anyone else comes up with a solution to
    "visibility" property, please post it here.

    Thanks and God Bless!!

    Ehsan
    http://ehsan.bdwebwork.com
     
    Ehsan, Apr 23, 2006
    #9
  10. Rock

    ASM Guest

    Ehsan a écrit :
    > There are few more suprises with CSS, even with "display" property. I
    > have seen, if you set a "display" property for <td>


    css for TABLEs TRs and TDs are special
    you don't use {display: block} to get them back

    http://www.w3.org/TR/CSS21/indexlist.html#index-t
    http://www.w3.org/TR/CSS21/tables.html#value-def-table-cell

    Important :
    http://www.w3.org/Style/CSS/
    http://www.w3.org/TR/CSS21/

    Bookmark this :
    http://www.w3.org/TR/CSS21/indexlist.html
    and put it in your browser's buttons bar

    > Anyway if you (Stephane) or anyone else comes up with a solution to
    > "visibility" property, please post it here.


    it is not only a question of visibility, but of positionning too

    http://stephane.moriaux.perso.wanadoo.fr/truc/eshan_visibility.htm
    http://stephane.moriaux.perso.wanadoo.fr/truc/eshan_visibility_variant.htm

    > Thanks and God Bless!!


    I think God is for nothing about miraculous css :)


    --
    Stephane Moriaux et son [moins] vieux Mac
     
    ASM, Apr 23, 2006
    #10
  11. Rock

    Ehsan Guest

    Great, thanks for the information.

    Ehsan
     
    Ehsan, Apr 23, 2006
    #11
    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. Peter Williams
    Replies:
    1
    Views:
    1,424
    Dylan Parry
    Jun 3, 2005
  2. Vik Rubenfeld
    Replies:
    8
    Views:
    445
    Vik Rubenfeld
    Jan 28, 2008
  3. Mark Szlazak
    Replies:
    3
    Views:
    190
    Fletch
    Apr 25, 2006
  4. Clay
    Replies:
    1
    Views:
    158
    Elegie
    Sep 28, 2006
  5. Dan
    Replies:
    3
    Views:
    135
Loading...

Share This Page