En otro articulo ya os explique como crear un mapa utilizando JQuery. Aquel mapa estaba muy bien porque te mostraba todos los paises del mundo y permitia hacer zoom. En este caso, se trata de otro mapa pero esta vez usando simplemente CSS y una imagen para el fondo. No muestra los paises pero si los continentes, al pasar el cursor sobre ellos aparece el nombre (en español e ingles) y la poblacion aproximada de cada uno.Para ponerlo en tu blog o web, añades primero los codigos CSS en la plantilla (por ejemplo antes de </head>):
<style>
ul#continentes {
list-style: none;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF5HwgSBm1xb0Xk3Pr2S7spohR6xGixr7P47tUScxqKw7ZoDtyT3ob7cE-pFIripqkYTQOt8Eq8rXzWZ2l9eeNr7c1oZd_JrORAuJWnlxvDV91VQBHQBsZEKg8CQPc1pr6G7D_s9aW-x8/s580/mapa%2520mundo%2520-%2520REDEANDO.png) no-repeat 0 0;
position: relative;
width: 580px;
height: 268px;
margin: 0;
padding: 0;
}
ul#continentes li {
position: absolute;
}
ul#continentes li a{
display: block;
height: 100%;
text-decoration: none;
}
#norteamerica {
width: 227px;
height: 142px;
top: 2px;
left: 0px;
}
#suramerica {
width: 108px;
height: 130px;
top: 131px;
left: 76px;
}
#africa {
width: 120px;
height: 140px;
top: 83px;
left: 209px;
}
#europa {
width: 120px;
height: 84px;
top: 1px;
left: 211px;
}
#asia {
width: 215px;
height: 175px;
top: 1px;
left: 283px;
}
#australia {
width: 114px;
height: 95px;
top: 152px;
left: 432px;
}
ul#continentes li a:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF5HwgSBm1xb0Xk3Pr2S7spohR6xGixr7P47tUScxqKw7ZoDtyT3ob7cE-pFIripqkYTQOt8Eq8rXzWZ2l9eeNr7c1oZd_JrORAuJWnlxvDV91VQBHQBsZEKg8CQPc1pr6G7D_s9aW-x8/s580/mapa%2520mundo%2520-%2520REDEANDO.png) no-repeat 0 0;
}
ul#continentes li#norteamerica a:hover {
background-position: 0 -270px;
}
ul#continentes li#suramerica a:hover {
background-position: -226px -273px;
}
ul#continentes li#africa a:hover {
background-position: -209px -417px;
}
ul#continentes li#europa a:hover {
background-position: -22px -427px;
}
ul#continentes li#asia a:hover {
background-position: -363px -268px;
}
ul#continentes li#australia a:hover {
background-position: -412px -455px;
}
ul#continentes li a span {
display: none;
}
ul#continentes li a:hover span {
display: block;
}
ul#continentes li a:hover span {
display: block;
padding: 5px;
width: 150px;
background: #000;
position: relative;
top: 50%;
font: 11px Arial, Helvetica, sans-serif;
opacity: .75;
filter:alpha(opacity=75);
color: #FFF;
}
ul#continentes li a:hover span strong {
display: block;
margin-bottom: 2px;
font-size: 12px;
text-decoration: underline;
}
</style>
Y ahora, alli donde quieras mostrar el mapa, añades el siguiente codigo:
<ul id="continentes">
<li id="norteamerica"><a>
<span>
<strong>NorteAmerica</strong>
Poblacion: 528,720,588
</span>
</a></li>
<li id="suramerica"><a>
<span>
<strong>SurAmerica</strong>
Poblacion: 385,742,554
</span>
</a></li>
<li id="asia"><a>
<span>
<strong>Asia</strong>
Poblacion: 3,879,000,000
</span>
</a></li>
<li id="australia"><a>
<span>
<strong>Australia</strong>
Poblacion: 21,807,000
</span>
</a></li>
<li id="africa"><a>
<span>
<strong>Africa</strong>
Poblacion: 922,011,000
</span>
</a></li>
<li id="europa"><a>
<span>
<strong>Europa</strong>
Poblacion: 731,000,000
</span>
</a></li>
</ul>
