Results 1 to 3 of 3

Thread: Image/ Image Map & Scaling

  1. #1

    Thread Starter
    Hyperactive Member
    Join Date
    Dec 2006
    Posts
    293

    Image/ Image Map & Scaling

    Hi All,


    Got a bit of a problem

    On my website i have a image - original size (width -"4445" height - "2098"). On this image i have a image map with 5 areas on it.
    The problem i am having is how do i scale this map down, when the browser scales the image down.

    The image is resized depending on the browser size, and i use this css code to do so.

    Code:
    .imgresize{
        width: 100%; /* you can use % */
        height: auto;

    Code:
    <img src="core_pics/main-view.jpg" width="4445" height="2098" class="imgresize" alt="Main Pic" usemap="#image_map" border="0" id="mainpic">
    <map name="image_map" id="image_map" class="imgresize">
    	<area shape="poly" data-key="1" coords=" 626,1136, 627,1212, 870,1219, 858,1138, 629,1137" href="#" alt="red hotspot"/>
    	<area shape="poly" data-key="2" coords=" 624,1243, 630,1332, 1041,1335, 1033,1236, 622,1246" href="#" alt="green hotspot"/>
    	<area shape="poly" data-key="3" coords=" 622,1356, 626,1444, 1465,1442, 1450,1351, 606,1357" href="#" alt="purple hotspot"/>
    	<area shape="poly" data-key="4" coords=" 620,1467, 629,1555, 1752,1550, 1737,1458, 617,1467" href="#" alt="yellow hotspot"/>
    	<area shape="poly" data-key="5" coords=" 2403,1132, 2444,1150, 2490,1182, 2525,1222, 2553,1280, 2563,1355, 2513,1485, 2482,1517, 2451,1537, 2403,1557, 2331,1564, 2253,1550, 2183,1505, 2140,1450, 2118,1366, 2120,1304, 2142,1245, 2171,1201, 2211,1168, 2241,1149, 2278,1132, 2399,1132" href="#" alt="olive hotspot"/>

    So how do i scale the imagemap down when the browser scales the image down,

    Thanks in advance

    Alex

  2. #2
    Frenzied Member vbNeo's Avatar
    Join Date
    May 2002
    Location
    Jutland, Denmark
    Posts
    1,994

    Re: Image/ Image Map & Scaling

    Not currently possible it seems... You can hack it with JS though - http://stackoverflow.com/questions/7...sive-image-map.

    Another (better) solution would be to use child elements and positioning them absolutely within the container. Then use the child elements as anchors.
    "Lies, sanctions, and cruise missiles have never created a free and just society. Only everyday people can do that."
    - Zack de la Rocha


    Hear me roar.

  3. #3
    Registered User
    Join Date
    Feb 2013
    Posts
    2

    Re: Image/ Image Map & Scaling

    Use child elements and position it absolutely within the container. Then use the child elements as anchors.


    http://www.csselite.com
    http://www.cssdrive.com
    http://www.css-website.com

Posting Permissions

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



Click Here to Expand Forum to Full Width