Mapa de imagenes con cordenadas relativas

23/08/2012, 10:43

Código HTML:

Ver original<style type="text/css">
        img {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <img src="image/miimagen.jpg" usemap="#map">
    <map name="map">
        <area alt="Contact: [email protected]" shape="RECT" coords="50,800,450,900" href='mailto:[email protected]'>
    </map>
</body>
</html>

Esto funciona bien sino achico el navegador, como verán la imagen es relativa con css pero las coordenadas son fijas, habrá una forma de que las coordenadas sean relativas (porcentuales)?

caricatos · 23/08/2012, 20:11

Hola:

Una alternativa que se me ocurre es que en vez de un mapa usas un svg... Cada vez tiene mejor soporte por los navegadores, y los links serían xlink...: SVG: Mapa de España.

Para el tamaño porcentual debes usar el atributo viewbox (en el apunte sobre "estrellas svg" hay algo al respecto).

Saludos