Bellissima Mappa Interattiva Italia: Aiuto Responsive

**Serpicothebest** · 04-04-2014, 13:27

Salve ragazzi, dopo numerose ricerche, prove, etc, sono riuscito ad ottenere una bellissima (almeno per me) mappa interattiva dell'Italia, unico problema non riesco a renderla "responsive"!

Il sito in questione, dove dovrei inserire questa mappa, è responsive, ma con la mappa proprio non ci riesco, il css non è proprio il mio forte!

...qualcuno di voi potrebbe darmi una mano cortesemente? così potrebbe essere a disposizione anche per tutta la comunità del forum

Posto anche il codice della pagina e quello del relativo css:

- Pagina html:

codice:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Italia Interattiva</title>


<link href="css/home_solo_mappa.css" rel="stylesheet" type="text/css" media="all" />
  
</head>


<body>


 
 <div id="h_main">
 
 <div id="h_italy">
 
 <div class="Map">
 
 <div id="region_map"><img src="images/transparent.gif" height="460" width="531" title="Clicca su una regione!" alt="Clicca su una regione!" usemap="#ItalyMap" />
 
 </div>
 
 </div>
 
 </div>
 
 
<map id="italy_map" name="ItalyMap">


<area shape="poly" alt="Val d'Aosta" title="Val d'Aosta" onmouseover="change_image(1);" onmouseout="hide_image(1);" href="#" coords="47,56,48,76,14,86,1,65" />


<area shape="poly" alt="Piemonte" title="Piemonte" onmouseover="change_image(2);" onmouseout="hide_image(2);" href="#" coords="66,34,73,46,74,67,79,84,70,94,85,106,95,122,78,133,58,128,49,153,32,154,7,136,11,119,-2,103,7,96,19,96,21,83,48,75,48,57,60,42" />


<area shape="poly" alt="Liguria" title="Liguria" onmouseover="change_image(3);" onmouseout="hide_image(3);" href="#" coords="131,156,105,134,108,131,90,126,69,137,74,133,65,131,56,141,49,157,47,154,40,154,31,165,35,169,48,170,75,141,89,137,95,139" />


<area shape="poly" alt="Lombardia" title="Lombardia" onmouseover="change_image(4);" onmouseout="hide_image(4);" href="#" coords="101,122,88,105,75,107,72,89,84,84,73,65,78,47,92,63,105,27,113,40,132,39,137,23,157,35,148,39,152,48,142,64,147,57,149,64,162,65,151,79,159,80,158,84,153,85,160,95,183,109,153,107,154,110,130,104,130,99,117,103,113,100,102,108,105,117" />


<area shape="poly" alt="Trentino Alto Adige" title="Trentino Alto Adige" onmouseover="change_image(5);" onmouseout="hide_image(5);" href="#" coords="150,64,166,66,162,73,176,70,176,63,190,51,192,59,196,47,203,50,203,43,197,37,197,29,210,27,210,19,212,26,224,20,213,12,213,-3,199,5,176,6,166,17,152,12,141,17,146,14,145,25,136,24,141,30,154,34,148,40,151,45,146,59" />


<area shape="poly" alt="Veneto" title="Veneto" onmouseover="change_image(6);" onmouseout="hide_image(6);" href="#" coords="218,116,210,114,209,107,197,110,190,113,177,108,155,88,157,82,160,67,177,74,182,52,203,49,205,40,199,35,225,19,233,23,232,35,219,43,223,51,223,61,229,67,242,67,247,72,220,86,218,101,228,112" />


<area shape="poly" alt="Friuli Venezia Giulia" title="Friuli Venezia Giulia" onmouseover="change_image(7);" onmouseout="hide_image(7);" href="#" coords="277,78,272,73,246,75,242,65,227,66,223,62,221,44,238,22,272,32,265,42,271,52,270,64,279,72" />


<area shape="poly" alt="Emilia Romagna" title="Emilia Romagna" onmouseover="change_image(8);" onmouseout="hide_image(8);" href="#" coords="236,162,231,157,214,161,210,171,189,158,196,152,177,143,178,148,165,153,125,132,109,138,99,127,103,115,108,100,131,103,144,107,148,111,153,110,215,111,215,139" />


<area shape="poly" alt="Toscana" title="Toscana" onmouseover="change_image(9);" onmouseout="hide_image(9);" href="#" coords="185,236,196,224,200,212,205,198,214,193,215,169,196,167,193,152,181,147,164,156,125,132,120,140,132,153,146,191,150,208,151,213,144,216,133,217,133,221,142,223,149,220,145,216,152,213,168,225,177,238" />


<area shape="poly" alt="Umbria" title="Umbria" onmouseover="change_image(10);" onmouseout="hide_image(10);" href="#" coords="228,238,253,221,256,217,242,212,235,186,228,186,220,178,210,179,212,189,206,201,203,217,205,226,212,224,225,237" />


<area shape="poly" alt="Lazio" title="Lazio" onmouseover="change_image(11);" onmouseout="hide_image(11);" href="#" coords="276,298,282,277,264,270,254,260,242,256,247,249,258,250,258,248,250,246,249,231,260,229,254,221,226,240,212,226,206,228,202,217,197,220,196,232,188,240,205,260,215,267,219,274,245,293" />


<area shape="poly" alt="Marche" title="Marche" onmouseover="change_image(12);" onmouseout="hide_image(12);" href="#" coords="215,169,232,186,237,189,240,210,255,216,259,227,279,213,264,174,253,175,239,158,234,167,222,157,221,155,209,166" />


<area shape="poly" alt="Abruzzo" title="Abruzzo" onmouseover="change_image(13);" onmouseout="hide_image(13);" href="#" coords="312,255,279,213,258,227,261,232,250,230,252,245,259,250,254,251,246,251,245,255,263,267,284,274,289,272,289,269,296,262,301,267,301,271,305,270" />


<area shape="poly" alt="Molise" title="Molise" onmouseover="change_image(14);" onmouseout="hide_image(14);" href="#" coords="328,261,315,257,305,271,302,268,297,264,290,270,291,272,283,275,284,284,284,288,285,292,290,281,303,289,321,283,318,278,326,274" />


<area shape="poly" alt="Campania" title="Campania" onmouseover="change_image(15);" onmouseout="hide_image(15);" href="#" coords="342,360,349,346,331,316,341,312,342,305,331,301,331,298,320,283,301,290,290,282,286,289,274,298,285,317,295,317,303,329,316,328,321,348" />


<area shape="poly" alt="Puglia" title="Puglia" onmouseover="change_image(16);" onmouseout="hide_image(16);" href="#" coords="329,261,360,255,368,266,367,272,359,280,364,289,411,310,420,319,440,325,445,331,452,338,454,346,454,359,450,370,438,363,427,342,413,344,399,331,394,341,385,334,386,322,373,321,365,311,363,309,354,306,360,308,362,306,353,297,354,299,341,305,330,296,320,278,327,277" />


<area shape="poly" alt="Basilicata" title="Basilicata" onmouseover="change_image(17);" onmouseout="hide_image(17);" href="#" coords="351,361,343,356,351,346,335,317,342,313,343,306,359,304,361,310,358,312,375,321,387,324,387,336,395,339,386,351,376,350,372,363,361,363,359,359" />


<area shape="poly" alt="Calabria" title="Calabria" onmouseover="change_image(18);" onmouseout="hide_image(18);" href="#" coords="363,466,345,462,345,447,353,438,356,422,367,415,361,405,363,391,352,364,355,357,372,364,378,349,383,351,378,371,404,387,404,410,387,416,381,428,385,433" />


<area shape="poly" alt="Sardegna" title="Sardegna" onmouseover="change_image(19);" onmouseout="hide_image(19);" href="#" coords="92,418,96,400,110,406,121,377,117,346,124,329,109,292,91,302,75,313,62,310,58,323,68,339,66,362,72,364,61,402,78,416" />


<area shape="poly" alt="Sicilia" title="Sicilia" onmouseover="change_image(20);" onmouseout="hide_image(20);" href="#" coords="322,529,299,521,286,507,271,505,237,482,228,481,219,472,226,451,238,453,249,447,269,456,296,459,309,449,323,453,340,445,344,450,329,474,325,489,334,508,332,513" /> </map> 
 
<script>window.change_image=function(a){regions=document.getElementById("region_map");regions.className="sprite_region_"+a;a=document.getElementById("map_"+a);a.className+=" active";return!0};window.hide_image=function(a){regions=document.getElementById("region_map");regions.className="sprite_region_all";a=document.getElementById("map_"+a);a.className=a.className.replace(" active","");return!0};</script>
<br class="sep" />
</div>




</body>
</html>

- CSS:

codice:

img { border: 0px; }

div,h1,h2,h3,input,label,select,textarea,button{font-family:Arial,"Helvetica";font-size:12px}


a{outline:0;color:#3a5075;text-decoration:none;background-color:transparent}
a:hover{text-decoration:underline}


br.sep{clear:both;height:0;font-size:1px;line-height:0}


#h_wrap{width:970px;margin:auto}
#h_left{width:310px;float:left;margin:10px 3px 0 0}


a.h_btn{color:#3a5075;font-size:14px;font-weight:700;height:19px;line-height:19px;background:transparent;display:inline-block}
a.h_btn span{display:block;background:transparent;text-align:right;padding:0 10px}
a.h_btn:hover,a.h_btn.active{background:#3a5075 url(../images/btn_blue_right.gif) right no-repeat;text-decoration:none;color:#fff}
a.h_btn:hover span,a.h_btn.active span{background:transparent url(../images/btn_blue_left.gif) left no-repeat}


.Map{background:url(../images/bg_map.png);z-index:100;position:relative;height:100%;width:100%;margin:0;padding:0}
#region_map{position:absolute;width:460px;height:531px;z-index:105;top:0;left:0}
.sprite_region_all{background:0;z-index:110}
.sprite_region_1{background:url(../images/sprite_map.gif) no-repeat;width:460px;height:531px;background-position:-8280px 0;z-index:110}.sprite_region_2{background:url(../images/sprite_map.gif) no-repeat;width:460px;height:531px;background-position:-5060px 0;z-index:110}
.sprite_region_3{background:url(../images/sprite_map.gif) no-repeat;width:460px;height:531px;background-position:-3220px 0;z-index:110}
.sprite_region_4{background:url(../images/sprite_map.gif) no-repeat;width:460px;height:531px;background-position:-3680px 0;z-index:110}
.sprite_region_5{background:url(../images/sprite_map.gif) no-repeat;width:460px;height:531px;background-position:-7360px 0;z-index:110}
.sprite_region_6{background:url(../images/sprite_map.gif) no-repeat;width:460px;height:531px;background-position:-8740px 0;z-index:110}
.sprite_region_7{background:url(../images/sprite_map.gif) no-repeat;width:460px;height:531px;background-position:-2300px 0;z-index:110}
.sprite_region_8{background:url(../images/sprite_map.gif) no-repeat;width:460px;height:531px;background-position:-1840px 0;z-index:110}
.sprite_region_9{background:url(../images/sprite_map.gif) no-repeat;width:460px;height:531px;background-position:-6900px 0;z-index:110}
.sprite_region_10{background:url(../images/sprite_map.gif) no-repeat;width:460px;height:531px;background-position:-7820px 0;z-index:110}
.sprite_region_11{background:url(../images/sprite_map.gif) no-repeat;width:460px;height:531px;background-position:-2760px 0;z-index:110}
.sprite_region_12{background:url(../images/sprite_map.gif) no-repeat;width:460px;height:531px;background-position:-4140px 0;z-index:110}
.sprite_region_13{background:url(../images/sprite_map.gif) no-repeat;width:460px;height:531px;background-position:0 0;z-index:110}
.sprite_region_14{background:url(../images/sprite_map.gif) no-repeat;width:460px;height:531px;background-position:-4600px 0;z-index:110}
.sprite_region_15{background:url(../images/sprite_map.gif) no-repeat;width:460px;height:531px;background-position:-1380px 0;z-index:110}
.sprite_region_16{background:url(../images/sprite_map.gif) no-repeat;width:460px;height:531px;background-position:-5520px 0;z-index:110}
.sprite_region_17{background:url(../images/sprite_map.gif) no-repeat;width:460px;height:531px;background-position:-460px 0;z-index:110}
.sprite_region_18{background:url(../images/sprite_map.gif) no-repeat;width:460px;height:531px;background-position:-920px 0;z-index:110}
.sprite_region_19{background:url(../images/sprite_map.gif) no-repeat;width:460px;height:531px;background-position:-5980px 0;z-index:110}
.sprite_region_20{background:url(../images/sprite_map.gif) no-repeat;width:460px;height:531px;background-position:-6440px 0;z-index:110}


#h_left #h_desc li b,#hp_bookmark{display:block}
#h_main #h_italy,#region_map img{width:460px;height:531px;}

**partime** · 04-04-2014, 14:23

Sarebbe utile vedere la pagina pubblicata da qualche parte...

**Serpicothebest** · 04-04-2014, 19:23

...il codice è già tutto postato nella discussione, comunque eccola anche on-line: mappa italia

**carlomarangoni** · 04-04-2014, 19:33

Originariamente inviata da Serpicothebest

...il codice è già tutto postato nella discussione, comunque eccola anche on-line: mappa italia

Non è molto comodo tutto quel codice da analizzare, è molto meglio per chi ti deve aiutare una pagina online.

Per capirci tu vorresti che la mappa si adeguasse alla risoluzione dello schermo o al ridimensionamento della pagina?

**Serpicothebest** · 04-04-2014, 19:54

...alla fine non è (quasi) la stessa cosa?

comunque credo che si debba adattare al ridimensionamento della pagina, in pratica la devo inserire dentro una pagina di un sito responsive

**carlomarangoni** · 04-04-2014, 23:50

Penso che utilizzando delle immagini con determinate dimensioni e le coordinate della mappa ti sia impossibile rendere in tutto fluido per potersi adattare

**Serpicothebest** · 05-04-2014, 08:21

...per questo non ci riuscivo e chiedevo un aiuto...quindi non si può fare proprio nulla?

**carlomarangoni** · 05-04-2014, 14:27

Originariamente inviata da Serpicothebest

...per questo non ci riuscivo e chiedevo un aiuto...quindi non si può fare proprio nulla?

Penso di no!

**Serpicothebest** · 05-04-2014, 14:49

...mannaggià, ho perso tempo inutilmente!

**partime** · 06-04-2014, 11:23

Originariamente inviata da Serpicothebest

...mannaggià, ho perso tempo inutilmente!

Ti devi abituare all'idea che spesso se ne perde parecchio di tempo inutilmente...

Discussione: Bellissima Mappa Interattiva Italia: Aiuto Responsive

Strumenti discussione

Ricerca discussione

Visualizza

Bellissima Mappa Interattiva Italia: Aiuto Responsive

Permessi di invio