Search the Community

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;