Javascript Image Viewer from Image Map

Discussion in 'Javascript' started by Ryan Sullivan, Feb 29, 2004.

  1. I have been struggling mightily in getting this to work with the scripts
    I have seen. I have an image map that uses overlib to display
    information about a school's campus:

    http://dcavello.phenominet.com/about/tour.php

    I would like onClick to generate a series of thumbnails located directly
    above or below the image map. Those thumbnails would then be linked to
    larger images which would pop-up in a new browser window. Does anyone
    know of a javascript utility that I could use for this? I am not all
    that familiar with Javascript, otherwise I would write my own utility.
    Thanks for any help you can offer.

    Ryan
    --
    To reply, please remove your robe.
    Ryan Sullivan, Feb 29, 2004
    #1
    1. Advertising

  2. Ryan Sullivan

    buba Guest

    On Sun, 29 Feb 2004 13:07:00 -0500, Ryan Sullivan
    <> wrote:

    > I have been struggling mightily in getting this to work with the scripts
    > I have seen. I have an image map that uses overlib to display
    > information about a school's campus:
    >
    > http://dcavello.phenominet.com/about/tour.php
    >
    > I would like onClick to generate a series of thumbnails located directly
    > above or below the image map. Those thumbnails would then be linked to
    > larger images which would pop-up in a new browser window. Does anyone
    > know of a javascript utility that I could use for this? I am not all
    > that familiar with Javascript, otherwise I would write my own utility.
    > Thanks for any help you can offer.
    >
    > Ryan


    The script below creates two images (named 1.jpg and 2.jpg) under the
    "click here for images" text. You can change that by
    moving the <div id="pictures"></div> tag around.


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

    <script type="text/javascript">
    <!--
    var pic1 = new Image();
    pic1.src = "1.jpg";
    var pic2 = new Image();
    pic2.src = "2.jpg";

    function doIt() {
    var out = new String("<img src=" + pic1.src + "><img src=" + pic2.src
    + ">");
    var location = document.getElementById("pictures");
    location.innerHTML = out;
    }
    -->
    </script>

    </head>

    <body>
    <div onClick="doIt();">click here for images</div>
    <br>
    <div id="pictures"></div> <!-- place this wherever you like -->

    </body>
    </html>

    Enjoy, Buba
    buba, Mar 1, 2004
    #2
    1. Advertising

  3. Ryan Sullivan

    Dev880 Guest

    Ok good job; however, I would place the popup images on the right. I have my
    resolution set at 1024x768 I scrolled down to see the image and hovered over
    top. I didn't see the popups until I moved back up. On the right it would
    be easy to see the images and I wouldn't have to adjust my view. At the
    resolution of 800x600 I would miss them totally.


    Tom


    "Ryan Sullivan" <> wrote in message
    news:...
    > I have been struggling mightily in getting this to work with the scripts
    > I have seen. I have an image map that uses overlib to display
    > information about a school's campus:
    >
    > http://dcavello.phenominet.com/about/tour.php
    >
    > I would like onClick to generate a series of thumbnails located directly
    > above or below the image map. Those thumbnails would then be linked to
    > larger images which would pop-up in a new browser window. Does anyone
    > know of a javascript utility that I could use for this? I am not all
    > that familiar with Javascript, otherwise I would write my own utility.
    > Thanks for any help you can offer.
    >
    > Ryan
    > --
    > To reply, please remove your robe.
    >
    Dev880, Apr 7, 2004
    #3
  4. Ryan Sullivan

    Ed Guest

    Ryan Sullivan wrote:
    > I have been struggling mightily in getting this to work with the scripts
    > I have seen. I have an image map that uses overlib to display
    > information about a school's campus:
    >
    > http://dcavello.phenominet.com/about/tour.php
    >
    > I would like onClick to generate a series of thumbnails located directly
    > above or below the image map. Those thumbnails would then be linked to
    > larger images which would pop-up in a new browser window. Does anyone
    > know of a javascript utility that I could use for this? I am not all
    > that familiar with Javascript, otherwise I would write my own utility.
    > Thanks for any help you can offer.
    >
    > Ryan


    Ryan,

    I am using a screen resolution of 800x600 so I do not see the thumbnails
    above the image map without having to scroll back up the screen. I
    don't like that.

    Secondly, some of the links don't work i.e. Multipurpose room, Gymnasium
    and Power Building. Maybe you don't have images for these yet?

    Thirdly, with Javascript switched off, the effect doesn't work - not
    surprising. But then you do not have a <noscript> section in your HTML
    to handle this.

    Ed
    Ed, Nov 24, 2005
    #4
    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. Jerry J
    Replies:
    0
    Views:
    537
    Jerry J
    Jul 18, 2003
  2. =?Utf-8?B?VHJveQ==?=

    Image viewer with a twist

    =?Utf-8?B?VHJveQ==?=, Feb 28, 2005, in forum: ASP .Net
    Replies:
    4
    Views:
    545
    Brian Lowe
    Mar 2, 2005
  3. jacksgoogle
    Replies:
    0
    Views:
    1,734
    jacksgoogle
    May 11, 2005
  4. Andrew
    Replies:
    0
    Views:
    527
    Andrew
    Apr 5, 2007
  5. Flynn

    Gallery Viewer viewer script

    Flynn, Feb 22, 2004, in forum: Javascript
    Replies:
    8
    Views:
    225
    John Flynn
    Feb 23, 2004
Loading...

Share This Page