Results 1 to 4 of 4

Thread: Need help with image gallery

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

    Default Need help with image gallery

    I'm new here so I hope this question is posted in the right place.

    I am working on a website and I want to create an image gallery like the one at www.susanstripling.com

    where you mouse over an image and it appears at the right side of the page in a larger version.

    How is this done? Is it done easily in Dreamweaver also?

    Thanks.

  2. #2
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    The example in question was done with Flash. You can do this in DHTML as well, however:
    HTML Code:
    <style type="text/css">
    div.previews img {
    width: 50px;
    height: 50px;
    padding: 5px;
    }
    </style>
    <script type="text/javascript">
    function preview(image) {
    document.getElementById("fullsize").src = image.src;
    }
    </script>
    </head>
    <body>
    <img id="fullsize" src="blank.jpg"/>
    <div class="previews">
    <img src="pic1.png" onmouseover="preview(this);"/>
    <img src="pic2.png" onmouseover="preview(this);"/>
    </div>
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends français | entiendo español | tôi ít hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    I kind of went a little nuts on this one and came up with a DOM scripted demo. I couldn't get the positioning the way I wanted without using an iframe but, I haven't given up on that yet. Right click inside the gray area and view source (IE) or this frame - view frame source (Mozilla). It is highly configurable and that might lead to some confusion but, each choice is commented and if you only change one thing at a time, it should be clear what each means.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Here is an even better demo it displays right on the page where you are using it like a block level element (division, table, etc.). The best part is that much of the configuration is now automatic. Requires at least a Transitional non URL DOCTYPE for best appearance.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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
  •