Diseño adaptable de una imagen mapeada

mblascog · #1 (**permalink**) 12/12/2016, 01:37

Buenas,
Estoy intentando mapear el mapa de Africa y hasta aquí lo he conseguido. El segundo paso es hacer el mapa adaptable y no soy capaz.
Las coordenadas de la área mapeada se recalculan con la librería rwdImageMaps. Eso funciona, pues la imagen original es mucho mayor a la que visualizo.

A continuación copio el código, por si alguien me puede echar un cable. Muchas gracias.

Código HTML:

Ver original<!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">
    <!-- @(#) $Id$ -->
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> 
        <title>Africa map</title>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    
        <link rel="stylesheet" href="<?php echo 'css/estils.css" type="text/css'?>" media="all" /> 
    
        <script type="text/javascript" src="<?php echo 'js/jquery.js'?>"></script>
        <script type="text/javascript" src="<?php echo 'js/jquery.maphilight.min.js'?>"></script>
        <script type="text/javascript" src="<?php echo 'js/jquery.rwdImageMaps.min.js'?>"></script>
        <script type="text/javascript" src="<?php echo 'js/script.js'?>"></script>
    </head>
    
    <body>
        <div id="capaMapa">
            <img id="middle-africa" src="imatges/africa.png" usemap="#africa" alt="Africa map"/>
            <map id="africa" name="africa">
                <area id="camerun" shape="poly" alt="Camerun" coords="1183,1269,1188,1269,1195,1277,1195,1288,1194,1294,1197,1299,1179,1309,1175,1309,1159,1330,1154,1348,1147,1350,1147,1366,1141,1368,1135,1378,1133,1393,1126,1400,1119,1401,1117,1401,1117,1405,1112,1407,1112,1420,1111,1422,1105,1433,1106,1440,1095,1448,1099,1454,1090,1459,1089,1467,1084,1473,1081,1475,1074,1478,1070,1467,1066,1465,1063,1461,1055,1456,1050,1461,1040,1461,1040,1457,1028,1465,1026,1465,1024,1472,997,1497,993,1497,993,1501,995,1507,992,1521,982,1535,982,1545,989,1544,989,1541,994,1543,995,1543,998,1559,1006,1565,1009,1565,1013,1566,1021,1568,1017,1560,1013,1560,1019,1572,1029,1588,1032,1593,1026,1622,1029,1627,1078,1627,1082,1622,1121,1621,1124,1625,1137,1626,1146,1622,1149,1629,1194,1628,1196,1628,1200,1632,1204,1631,1209,1634,1215,1629,1216,1634,1224,1634,1230,1637,1235,1637,1237,1638,1237,1641,1245,1641,1244,1644,1248,1642,1246,1629,1247,1624,1250,1624,1247,1617,1246,1598,1239,1593,1235,1593,1211,1563,1209,1563,1211,1559,1211,1553,1205,1545,1203,1545,1198,1537,1197,1524,1192,1516,1195,1515,1195,1495,1190,1495,1186,1492,1198,1485,1207,1467,1210,1464,1212,1459,1215,1454,1216,1449,1227,1437,1227,1432,1225,1426,1212,1401,1200,1394,1173,1365,1179,1353,1192,1353,1202,1355,1207,1354,1213,1352,1217,1352,1223,1357,1233,1352,1222,1344,1210,1324,1209,1315,1209,1309,1210,1303,1211,1294,1209,1280,1205,1277,1204,1266,1199,1256,1192,1256,1185,1256" title="Camerun"/>
                <area shape="default" nohref="nohref" alt="" />
            </map>
        </div>
    </body>
</html>

Código para colorear la imagen mapeada usando el jquery maphilight y redimensionarla con rwdImageMaps:

Código Javascript:

Ver original$(document).ready(function(e) {
    $('img[usemap]').rwdImageMaps();
});
 
$(function () {
        $('#middle-africa').maphilight({
        fill: true,
        fillColor: 'FE9900',
        fillOpacity: 0.8,
        strokeColor: '000000',
    });
});

Código CSS:

Ver original#capaMapa,#middle-africa{width:100%;}
img[usemap]{border:none;height:auto;max-width:100%;width:auto;}