Results 1 to 3 of 3

Thread: mouseover thumbnail to large picture

  1. #1
    Join Date
    Nov 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default mouseover thumbnail to large picture

    I found this code that I love. http://www.dynamicdrive.com/style/cs...ge-viewer/P10/
    I have inserted the css code and saved it as my style.css page.
    However, I'm not sure how to insert the code into my html page where I have about 10 thumbnails that I want a larger picture to appear for each one.
    Does anyone know how to insert the code into my page? I have my thumbnail picture named images/makerover2.jpg and the larger picture as images/makeover1.jpg
    What style link to I use at the top of my html page?
    here is the CSS code:
    <style type="text/css">

    /*Credits: Dynamic Drive CSS Library */
    /*URL: http://www.dynamicdrive.com/style/ */

    .thumbnail{
    position: relative;
    z-index: 0;
    }

    .thumbnail:hover{
    background-color: transparent;
    z-index: 50;
    }

    .thumbnail span{ /*CSS for enlarged image*/
    position: absolute;
    background-color: lightyellow;
    padding: 5px;
    left: -1000px;
    border: 1px dashed gray;
    visibility: hidden;
    color: black;
    text-decoration: none;
    }

    .thumbnail span img{ /*CSS for enlarged image*/
    border-width: 0;
    padding: 2px;
    }

    .thumbnail:hover span{ /*CSS for enlarged image on hover*/
    visibility: visible;
    top: 0;
    left: 60px; /*position where enlarged image should offset horizontally */

    }

    </style>


    Here is the HTML code:

    <a class="thumbnail" href="#thumb"><img src="media/tree_thumb.jpg" width="100px" height="66px" border="0" /><span><img src="media/tree.jpg" /><br />Simply beautiful.</span></a>

    <a class="thumbnail" href="#thumb"><img src="media/ocean_thumb.jpg" width="100px" height="66px" border="0" /><span><img src="media/ocean.jpg" /><br />So real, it's unreal. Or is it?</span></a>

    <br />
    <br />

    <a class="thumbnail" href="#thumb">Dynamic Drive<span><img src="media/dynamicdrive.gif" /><br />Dynamic Drive</span></a><br />
    <a class="thumbnail" href="#thumb">Zoka Coffee<span><img src="media/zoka.gif" /><br />Zoka Coffee</span></a>

  2. #2
    Join Date
    Feb 2007
    Posts
    293
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    In the head section, you would put:
    Code:
    <link rel="stylesheet" type="text/css" href="style.css" />
    This is assuming that the page you've saved as style.css is in the same directory. If it's not, you would need to put in the correct path.

    Then in the html part (assuming that makeover2 is the small picture and makeover1 is the big one) you would put:

    Code:
    <a class="thumbnail" href="#thumb"><img src="images/makerover2.jpg" width="--" height="--" border="0" /><span><img src="images/makeover1" /><br />Your caption here</span></a>
    or (better)

    Code:
    <a class="thumbnail" href="#thumb"><img src="images/makerover2.jpg" style="width:--px; height:--px; border:0;" /><span><img src="images/makeover1" /><br />Your caption here</span></a>
    Replace the double dashes with the correct height and width for the small (thumbnail) picture. And of course, replace "your caption here" with whatever you want to say.
    Last edited by Veronica; 04-26-2007 at 12:30 AM.

  3. #3
    Join Date
    Sep 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Excellent script.. very useful.

    One thing - anyone know how I can centre the loaded image on the browser window????

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •