Power Zoomer plus Image Map?

**jkoke** · 06-25-2010, 05:26 PM

1) Image Power Zoomer

2) http://www.dynamicdrive.com/dynamici...owerzoomer.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:

Code:

<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

Code:

<!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>