Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: Power Zoomer plus Image Map?

  1. #1
    Join Date
    Jun 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Power Zoomer plus Image Map?

    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

  2. #2
    Join Date
    Aug 2004
    Posts
    9,918
    Thanks
    3
    Thanked 969 Times in 957 Posts
    Blog Entries
    15

    Default

    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.
    DD Admin

  3. #3
    Join Date
    Jun 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  4. #4
    Join Date
    Aug 2004
    Posts
    9,918
    Thanks
    3
    Thanked 969 Times in 957 Posts
    Blog Entries
    15

    Default

    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>
    DD Admin

  5. #5
    Join Date
    Jun 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  6. #6
    Join Date
    Aug 2004
    Posts
    9,918
    Thanks
    3
    Thanked 969 Times in 957 Posts
    Blog Entries
    15

    Default

    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.
    DD Admin

  7. #7
    Join Date
    Jun 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  8. #8
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,821
    Thanks
    2
    Thanked 425 Times in 419 Posts

    Default

    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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  9. #9
    Join Date
    Jun 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    That works flawlessly! Thanks so much for your help with this. The client will be very happy.

    Jeff

  10. #10
    Join Date
    Aug 2004
    Posts
    9,918
    Thanks
    3
    Thanked 969 Times in 957 Posts
    Blog Entries
    15

    Default

    Very nice indeed vwphillips!
    DD Admin

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •