Results 1 to 3 of 3

Thread: CSS Popup Image Viewer

  1. #1
    Join Date
    Mar 2008
    Location
    Houston, TX
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Post CSS Popup Image Viewer

    1) Script Title: CSS Popup Image Viewer

    2) Script URL (on DD): http://www.dynamicdrive.com/style/cs...e-viewer/P90/+

    3) Describe problem:
    I'm trying to customize the popup viewer within a text.
    When mouseover the words "large scale" my image popsup

    This is my image: /images/yo_taller_si.jpeg. width="200px" height="267px"

    I already pasted the CSS code in my head tag.

    Where exactly and which of the codes i need to paste the html code and how do i customize it when its a phrase i want to link it with and not an image.

    code 1:
    <a class="thumbnail" href="#thumb">Zoka Coffee<span><img src="media/zoka.gif" /><br />Zoka Coffee</span></a>

    code 2:
    <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>


    Thanks for any advises.

  2. #2
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    the original rendering doesn't matter. below is the code that you would need to edit

    Code:
    <a class="thumbnail" href="#thumb">__YOUR_TEXT__<span><img src="/path/to/image.ext" /><br />__IMAGE_CAPTION__</span></a>
    then you should just keep the same styles as he has in the demo
    Quote Originally Posted by demo page

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

    On another note... when posting computer code, please wrap it inside of [code][/code] tags

  3. #3
    Join Date
    Mar 2008
    Location
    Houston, TX
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    http://minervawebdesign.com%5Cminerv...tatement.html/

    If you could check out my link. I dont understand for what reason my photo is not poping up . The path to the photo is correct.

    The link to pop up viewer is the last 2 words of the first paragraph.

    Can you please look at my code and see what am i doing wrong . .
    Thank you again.

    m

    link: http://www.minervawebdesign.com/mine...statement.html
    Last edited by minpot; 03-10-2008 at 10:18 PM. Reason: think got the wrong link . . .

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
  •