-
Dec 7th, 2012, 02:12 PM
#1
Thread Starter
Hyperactive Member
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
-
Jan 2nd, 2013, 02:03 PM
#2
Frenzied Member
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.
-
Feb 2nd, 2013, 01:14 AM
#3
Registered User
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
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|