SummArg | Cursos y recursos para webmasters

20/07/2011

¿Cómo insertar mapas simples con funciones de arrastrar y zoom en una web?

La respuesta es: con Mapz, un pequeño plugin para jQuery que nos permite introducir funciones básicas en un <map>. Incluye la posibilidad de hacer zoom utilizando la rueda del mouse o de navegar la imagen con las flechas del teclado. Vean una prueba de cómo trabaja el plugin ingresando al Demo.

Es necesario descargar el plugin de Brandon Aaron para las funciones de la rueda del mouse. El encabezado de nuestro documento deberá linkear a un total de cuatro recursos extra:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
<script src="js/jquery.mapz.js" type="text/javascript"></script>

Luego indicamos al plugin a que div deberá aplicarse, con sus opciones debidamente establecidas.
<script type="text/javascript">
$(document).ready(function() {
$("#map-1").mapz({
zoom : true,
createmaps : true,
mousewheel : true
});
</script>

Insertamos el código HTML indicando la ruta a cuatro imágenes diferentes, cada una corresponde a un grado de zoom diferente. En el tag <map> se pueden colocar marcadores a diferentes puntos del mapa con su correspondiente texto.
<div id="map-1-container">
<div id="map-1">
<img src="img/map-1.jpg" width="500" height="419" alt="" usemap="#map" class="current-level level" />
<img src="img/map-2.jpg" width="750" height="629" alt="" class="level" />
<img src="img/map-3.jpg" width="1000" height="839" alt="" class="level" />
<img src="img/map-4.jpg" width="1096" height="919" alt="" class="level" />
</div>
<map name="map">
<area title="City name" shape="rect" coords="5,165,75,195" href="#goes" alt="Goes" />
<area title="Train station" shape="rect" coords="270,365,320,390" href="#train-station" alt="Train Station" />
<area title="Rotary intersection" shape="circle" coords="51,146,20" href="sun.htm" alt="Sun" />
</map>
</div>

Para finalizar se coloca el siguiente CSS:
#map-1-container{ position:relative; width:400px; height:300px; overflow:hidden; }
#map-1{ width:500px; height:419px; position:absolute; left:0; top:0; }
.level{ position:absolute; left:0; top:0; z-index:10;}
.current-level{ z-index:20; }

Mapz | Demo

Dejar un comentario