Foros del Web » Programando para Internet » Jquery »

Diseño adaptable de una imagen mapeada

Estas en el tema de Diseño adaptable de una imagen mapeada en el foro de Jquery en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 12/12/2016, 01:37
 
Fecha de Ingreso: enero-2002
Ubicación: Sabadell
Mensajes: 565
Antigüedad: 22 años, 2 meses
Puntos: 4
Diseño adaptable de una imagen mapeada

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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.     <!-- @(#) $Id$ -->
  4.     <head>
  5.         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  6.         <title>Africa map</title>
  7.         <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  8.    
  9.         <link rel="stylesheet" href="<?php echo 'css/estils.css" type="text/css'?>" media="all" />
  10.    
  11.         <script type="text/javascript" src="<?php echo 'js/jquery.js'?>"></script>
  12.         <script type="text/javascript" src="<?php echo 'js/jquery.maphilight.min.js'?>"></script>
  13.         <script type="text/javascript" src="<?php echo 'js/jquery.rwdImageMaps.min.js'?>"></script>
  14.         <script type="text/javascript" src="<?php echo 'js/script.js'?>"></script>
  15.     </head>
  16.    
  17.     <body>
  18.         <div id="capaMapa">
  19.             <img id="middle-africa" src="imatges/africa.png" usemap="#africa" alt="Africa map"/>
  20.             <map id="africa" name="africa">
  21.                 <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"/>
  22.                 <area shape="default" nohref="nohref" alt="" />
  23.             </map>
  24.         </div>
  25.     </body>
  26. </html>

Código para colorear la imagen mapeada usando el jquery maphilight y redimensionarla con rwdImageMaps:
Código Javascript:
Ver original
  1. $(document).ready(function(e) {
  2.     $('img[usemap]').rwdImageMaps();
  3. });
  4.  
  5. $(function () {
  6.         $('#middle-africa').maphilight({
  7.         fill: true,
  8.         fillColor: 'FE9900',
  9.         fillOpacity: 0.8,
  10.         strokeColor: '000000',
  11.     });
  12. });


Código CSS:
Ver original
  1. #capaMapa,#middle-africa{width:100%;}
  2. img[usemap]{border:none;height:auto;max-width:100%;width:auto;}
__________________
Qué fácil cuando lo sabes y qué difícil cuando no

Última edición por mblascog; 12/12/2016 a las 01:43

Etiquetas: adaptable, diseño
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 12:25.