Log in

View Full Version : Can you use Image Thumbnail Viewer with an Image Map?


NrthnXposur
08-13-2007, 03:51 AM
1) Script Title: Image Thumbnail Viewer

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm

3) Describe problem:

Hello everyone. I've been at it for a bit and just don't seem to be able to get this amazing viewer to work with an image mapped picture. :confused:

This is what I've done:

Selected an image and created the hotspots on it with an image map Each spot would ideally trigger an image, when clicked upon, to appear in the viewer, but sadly, my brain doesn't seem to be able to pick up the problem/missing element. Any help you could provide would be appreciated. A portion of the code is shown below:

<html>
<head>

<link rel="stylesheet" href="thumbnailviewer.css" type="text/css" />

<script src="thumbnailviewer.js" type="text/javascript">

/***********************************************
* Image Thumbnail Viewer Script- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

<title></title>
</head>

<body bgcolor="ffffff">

<img src="media1/image1.jpg" border=0 width=475 height=315 usemap="#view">
<map name="view">
<area shape="poly" coords="30,78,41,63,73,41,90,35,109,98,83,115,31,75" href="media1/101.gif" rel="thumbnail">

Thanks in advance for anything you might be able to help with! :)
jscheuer1
08-13-2007, 04:03 PM
You would need to edit thumbnailviewer.js so that its init function includes code for initializing area tags, like so:


init:function(){ //Initialize thumbnail viewer script by scanning page and attaching appropriate function to links with rel="thumbnail"
if (!this.enableAnimation)
this.opacitystring=""
var pagelinks=document.getElementsByTagName("a")
for (var i=0; i<pagelinks.length; i++){ //BEGIN FOR LOOP
if (pagelinks[i].getAttribute("rel") && pagelinks[i].getAttribute("rel")=="thumbnail"){ //Begin if statement
pagelinks[i].onclick=function(){
thumbnailviewer.stopanimation() //Stop any currently running fade animation on "thumbbox" div before proceeding
thumbnailviewer.loadimage(this) //Load image
return false
}
this.targetlinks[this.targetlinks.length]=pagelinks[i] //store reference to target link
} //end if statement
} //END FOR LOOP
var pageareas=document.getElementsByTagName("area")
for (var i=0; i<pageareas.length; i++){ //BEGIN FOR LOOP
if (pageareas[i].getAttribute("rel") && pageareas[i].getAttribute("rel")=="thumbnail"){ //Begin if statement
pageareas[i].onclick=function(){
thumbnailviewer.stopanimation() //Stop any currently running fade animation on "thumbbox" div before proceeding
thumbnailviewer.loadimage(this) //Load image
return false
}
this.targetlinks[this.targetlinks.length]=pageareas[i] //store reference to target link
} //end if statement
} //END FOR LOOP
//Reposition "thumbbox" div when page is resized
this.dotask(window, function(){if (thumbnailviewer.thumbBox.style.visibility=="visible") thumbnailviewer.centerDiv(thumbnailviewer.thumbBox)}, "resize")


} //END init() function

There could still be other problems.
NrthnXposur
08-14-2007, 01:31 PM
Hey John...thanks for the assist. It works perfectly now!

Cheers