Javascript Image Viewer from Image Map

R

Ryan Sullivan

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
 
B

buba

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
 
D

Dev880

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
 
E

Ed

Ryan said:
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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,482
Members
44,901
Latest member
Noble71S45

Latest Threads

Top