Jump to content
Larry Ullman's Book Forums

Recommended Posts

Hi, This question does not apply directly to this book, so far anyway, but I'm wondering if someone can give me advice on the coordinates for an HTML imagemap area.

 

I have been experimenting with an imagemap with a number of selectable areas defined via the standard map and area tags.

 

Does anyone know if the coordinate values can somehow be adjusted to take account of varying viewport dimensions?

 

The code following works for a selectable area on an image map on my localhost (Windows) PC. But if I change the size of the viewport, the selectable area changes and in some cases disappears altogether.

 

Any advice will be most appreciated and thank you in anticipation.

 

<div>
	<img src="../images/product_header_test.jpg" title="Image Title" id="product_header_image" usemap="#product_image">
    <?php
	// calculate the coordinate values from the width of the wrapper in pixels
	// assume screen width of 1920 pixels just for the sake of this exercise
	// first the 'raw' rectangle coordinates (obtained from 'paint')
	$top_left_raw_x = 273;
	$top_left_raw_y = 160;
	$bottom_right_raw_x = 375;
	$bottom_right_raw_y = 183;
	$factor = 1650/1920;	// this yields a pretty good answer but was derived at by trial and error
	$top_left_x = (int) $top_left_raw_x * $factor;
	$top_left_y = (int) $top_left_raw_y * $factor;
	$bottom_right_x = (int) $bottom_right_raw_x * $factor;
	$bottom_right_y = (int) $bottom_right_raw_y * $factor;
	// this does not work if you resize the screen!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    echo <<<EOT
	<map name="product_image">
		<area shape="rect" coords="$top_left_x,$top_left_y,$bottom_right_x,$bottom_right_y" href="$home" alt="Home" target="_self">
	</map>
EOT;
Link to comment
Share on other sites

No, the coordinates cannot be adjusted as per the viewport.

Image maps are very inflexible.

 

You will have to come up with another solution, be it transparent elements placed on top the image with JS onclick event handlers registered for those elements, or something else.

Link to comment
Share on other sites

Hi,  I found a jQuery plug-in that will do this - it is called ImageMapster.  The following parameters worked for me:

...
<script type="text/javascript" src="../jQuery/jquery.imagemapster.min.js"></script>
...
<script type="text/JavaScript">

  $(document).ready(function()

   {

     $('img').mapster({

       scaleMap: 'true',

       fillColor: 'd4ecfb',

       fillOpacity: 0.3,

       clickNavigate: 'true'

    });

  

   });  // end document ready function

  

  $(window).resize(function() {

   var duration = 10;

   var newWidth = $('#wrapper').width();

   $('img').mapster('resize',newWidth,0,duration);

   });  // end window resize function

  

   </script>

Where the imagemap is the only image in this example, i.e., it is jQuery-selectable via 'img'.

 

Cheers from Oz.

 

 

Link to comment
Share on other sites

 Share

×
×
  • Create New...