PDA

View Full Version : image thumbnail viewer II mapping



meridyen
06-21-2007, 01:07 PM
1) Script Title: image thumbnail viewer II

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

3) Describe problem: Great script. My problem is about image mapping the loaded picture. Say I have one big picture loaded and 2 different zones to get linked. how can i do that? any help appreciated

meridyen
06-25-2007, 07:14 AM
I may not explain it well, or there is no way to do this.

My question was about "image mapping" on image thumbnail viewer II

Thumb 1 shows Picture 1, and i can use link on Picture 1. But I want to use 2 links, how can i do that?

There is another way other than mapping, but i need help with that one too. I can cut the Picture 1 in two pieces, and link each of them. In that case, my question will be, how can i show 2 pictures at the same time with one mouse over?

thx again

meridyen
06-27-2007, 12:31 PM
anyways i figured that out

for those who want to use

1-make changes below in thumbnailer2.js

add

var mymap=linkobj.getAttribute("usemap")

after

var dest=linkobj.getAttribute("rev").split("::")[1] //Get URL enlarged image should be linked to, if any

AND

change

var imageHTML='<img src="'+imagepath+'" style="border-width: 0" />' //Construct HTML for enlarged image

to

var imageHTML='<img src="'+imagepath+'" style="border-width: 0" usemap="'+mymap+'"/>' //Construct HTML for enlarged image

2-make changes below in your html file

change

<a href="" rel="enlargeimage::mouseover" rev="loadarea">

to

<a href="" rel="enlargeimage::mouseover" rev="loadarea" usemap="#map1">
<a href="" rel="enlargeimage::mouseover" rev="loadarea" usemap="#map2">
...
...

AND

add

<map name="map1">
<area shape=rect coords="1,1,293,154" href="http://1/">
<area shape=rect coords="299,2,470,152" href="http://2/">
</map>
<map name="map2">
<area shape=rect coords="1,1,293,154" href="http://3/">
<area shape=rect coords="299,2,470,152" href="http://4/">
</map>

...
...

an the end of html file