PDA

View Full Version : Power Zoomer plus Image Map?



jkoke
06-25-2010, 05:26 PM
1) Image Power Zoomer

2) http://www.dynamicdrive.com/dynamicindex4/powerzoomer.htm

3) I am trying to use an image map on an image that is also magnified on mouseover with the Image Power Zoomer script, but the mouse clicks are not registering. I tried overlaying and underlaying a transparent gif with the image map in the same space as the image, but that doesn't work.

Any chance we can get the image to register mouse clicks and use an image map?

Here's a link to the page: http://208.123.88.138/product_overview.aspx

Thanks for your help.

Jeff

ddadmin
06-28-2010, 10:32 PM
Try the below modified .js file. What it does is clones the original image- including any of its attributes- and uses that as the magnified image. The image map of the former should be preserved as a result inside the later as well.

jkoke
06-28-2010, 10:41 PM
Thanks for the revised script... it's better but not quite there. Sorry for the trouble. It's loading two images on top of each other in the magnified view and the image map is only functioning on part of the image. It's hard to explain, but see what I'm working on here:

http://208.123.88.138/product_overview.aspx

Jeff

ddadmin
06-29-2010, 07:05 PM
What about with this version instead. On my local testing it seems to work:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

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

/***********************************************
* Image Power Zoomer- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<script type="text/javascript">

jQuery(document).ready(function($){ //fire on DOM ready
$('#myimage').addpowerzoom()
})

</script>

<body>

<script type="text/javascript">
jQuery(document).ready(function($){ //fire n DOM ready
$('#myimage').addpowerzoom({defaultpower:1.5, powerrange: [1.5, 1.5], magnifiersize:[200, 200]})
})
</script>
<br />
</p>
<div class="holder">
<div align="center"><img id="myimage" src="http://208.123.88.138/images/product_diagram.jpg" width="900" height="595" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="113,200,300,240" href="product_cost.aspx#config" />
<area shape="rect" coords="360,300,523,331" href="product_readiness.aspx#performance" />

<area shape="rect" coords="340,201,484,232" href="product_readiness.aspx#capacity" />
<area shape="rect" coords="528,198,754,231" href="product_agility.aspx#blueprint" />
<area shape="rect" coords="607,235,707,264" href="product_agility.aspx#appsupport" />
<area shape="poly" coords="140,149,335,148,297,456,43,457,140,148" href="product_cost.aspx" />
<area shape="poly" coords="351,147,327,447,579,448,550,147,352,147" href="product_readiness.aspx" />
<area shape="poly" coords="601,448,559,150,760,148,849,446,600,448" href="product_agility.aspx" />
<area shape="rect" coords="8,460,893,635" href="product_platform.aspx" />

<area shape="rect" coords="45,29,742,145" href="product_lenses.aspx" />
</map>

jkoke
06-29-2010, 07:20 PM
Thanks again... the problem I'm seeing is that the image map coordinates are not where they are supposed to be. The entire image map seems to be offset to the left and top.

The entire bottom blue section of the image, that reads "Enterprise-Class Management..." should be mapped to the following rect: area shape="rect" coords="8,460,893,635" href="product_platform.aspx" />

But when you mouseover that area of the image, the map link isn't there ... it's up where the "Reporting" and "Alerting" arrows are.

Again, I appreciate your working on this & I've pretty much resigned myself to not using the magnifying script because the image map linking is the most important part. If you come up with any other solutions, please let me know. Thanks again.

Jeff

ddadmin
06-29-2010, 07:59 PM
So the previous issue at least is now fixed right:


It's loading two images on top of each other in the magnified view and the image map is only functioning on part of the image.

With regards to your last post, now that I think about it, it makes sense it's happening. When you enlarge the image, the coordinates of the original image map are still used on the enlarged image, making them no longer correct. What we need is a way to scale the coordinates and map them to the bigger image accordingly. I'm not sure at the moment how that could be done however.

jkoke
06-29-2010, 08:04 PM
Yes, it doesn't seem to be loading the smaller unmagnified image into the magnified view any more, so that issue is resolved.

Since the magnified image is always centered on the mouse cursor, it seems that if there were a way to center the image map or offset it in some way to match the coordinates of the original image, that would solve it.

vwphillips
06-30-2010, 11:37 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
</head>

<body>
<map name="Map" id="Map">

<area shape="rect" coords="113,200,300,240" href="product_cost.aspx#config" />
<area shape="rect" coords="360,300,523,331" href="product_readiness.aspx#performance" />
<area shape="rect" coords="340,201,484,232" href="product_readiness.aspx#capacity" />
<area shape="rect" coords="528,198,754,231" href="product_agility.aspx#blueprint" />
<area shape="rect" coords="607,235,707,264" href="product_agility.aspx#appsupport" />
<area shape="poly" coords="140,149,335,148,297,456,43,457,140,148" href="product_cost.aspx" />
<area shape="poly" coords="351,147,327,447,579,448,550,147,352,147" href="product_readiness.aspx" />
<area shape="poly" coords="601,448,559,150,760,148,849,446,600,448" href="product_agility.aspx" />
<area shape="rect" coords="8,460,893,635" href="product_platform.aspx" />


<area shape="rect" coords="45,29,742,145" href="product_lenses.aspx" />
</map>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/

function MagCoords(id,mag){
var map=document.getElementById(id);
var as=map.getElementsByTagName('AREA');
alert(as[0].coords); // debug only
for (var ary=[],coords,z0=0;z0<as.length;z0++){
ary[z0]=[];
coords=as[z0].coords.split(',')
for (var z0a=0;z0a<coords.length;z0a++){
ary[z0].push(coords[z0a]*mag);
}
}
for (var z1=0;z1<as.length;z1++){
as[z1].coords=ary[z1].join(',');
}
alert(as[0].coords); // debug only
}

MagCoords('Map',1.5)
/*]]>*/
</script>
</body>

</html>

jkoke
06-30-2010, 12:32 PM
That works flawlessly! Thanks so much for your help with this. The client will be very happy.

Jeff

ddadmin
07-01-2010, 06:10 PM
Very nice indeed vwphillips!

lkristoffersen
03-20-2012, 04:27 PM
I have been trying to do the same thing, but i cant make the ddpowerzoomer.js load my different larger image for the zoom, it always uses the base image...
it may be a version 1.0 vs 1.1 issue?

If i use v1.1 my image map is not translated though, and if i use the 1.0 from this post the image map is translated correctly but the large image is not used :(

I have tried comparing 1.0 and 1.1 .js files and it is only subtle details that changes and major difference is the part where the large image is loaded

$magnifier.inner.html('<img src="'+options.largeimagesrc+'"/>') //get base image's src and create new image inside magnifier based on it

and in the jQuery.fn.addpowerzoom=function(options){ ... function that is much more elaborate in 1.1 than in 1.0.

the 1.0 also has a:

$magnifier.inner.empty().append($imgref.clone())
line extra but trying to hack the two together didn't work for me

Any ideas?

babacom
04-01-2012, 12:55 AM
I've got the same problem. Older version seems to work, but no magnification. Newer version has magnification, but no image map functionality. Any help on this would be fantastic.