Image Responsive

Question

J'ai une carte-image existante dans une mise en page HTML réactive. Les images s’échelonnent en fonction de la taille du navigateur, mais les coordonnées de l’image sont évidemment des tailles de pixels fixes. Quelles sont les options disponibles pour redimensionner les coordonnées de la carte?

Answer 1

Pour l'image réactive de cartes, vous aurez besoin d'utiliser un plugin:

https://github.com/stowball/jQuery-rwdImageMaps

---

Selon les spécifications http://www.w3.org/TR/html4/struct/objects.html#h-13.6.1 les points chauds peuvent utiliser % valeurs

---

Mise à jour:

Après de nouvelles recherches, de faire les constatations suivantes:

Pas de grands navigateurs comprendre pourcentage coordonnées correctement, et tous les interpréter pourcentage de coordonnées les coordonnées des pixels.

http://www.howtocreate.co.uk/tutorials/html/imagemaps

Et aussi cette page pour tester si les navigateurs

http://home.comcast.net/~urbanjost/IMG/resizeimg3.html

Answer 2

Responsive Image Maps jQuery Plugin par Matt Stow

Answer 3

David Bradshaw a écrit une jolie petite bibliothèque qui résout ce problème. Il peut être utilisé avec ou sans jQuery.

Disponible ici: https://github.com/davidjbradshaw/imagemap-resizer

Answer 4

La méthode suivante fonctionne parfaitement pour moi, alors voici ma mise en œuvre complète:

 <img id="my_image" style="display: none;" src="my.png" width="924" height="330" border="0" usemap="#map" />

<map name="map" id="map">
    <area shape="poly" coords="774,49,810,21,922,130,920,222,894,212,885,156,874,146" href="#mylink" />
    <area shape="poly" coords="649,20,791,157,805,160,809,217,851,214,847,135,709,1,666,3" href="#myotherlink" />
</map>

<script>
$(function(){
    var image_is_loaded = false;
    $("#my_image").load(function() {
        $(this).data('width', $(this).attr('width')).data('height', $(this).attr('height'));
        $($(this).attr('usemap')+" area").each(function(){
            $(this).data('coords', $(this).attr('coords'));
        });

        $(this).css('width', '100%').css('height','auto').show();

        image_is_loaded = true;
        $(window).trigger('resize');
    });


    function ratioCoords (coords, ratio) {
        coord_arr = coords.split(",");

        for(i=0; i < coord_arr.length; i++) {
            coord_arr[i] = Math.round(ratio * coord_arr[i]);
        }

        return coord_arr.join(',');
    }
    $(window).on('resize', function(){
        if (image_is_loaded) {
            var img = $("#my_image");
            var ratio = img.width()/img.data('width');

            $(img.attr('usemap')+" area").each(function(){
                console.log('1: '+$(this).attr('coords'));
                $(this).attr('coords', ratioCoords($(this).data('coords'), ratio));
            });
        }
    });
});
</script>
 

Answer 5

http://home.comcast.net/~urbanjost/semaphore.html est le supérieur de la page de discussion, et de en fait a des liens vers un JavaScript à base de solution au problème. J'ai reçu un avis que HTML appuiera pour cent des parts dans l'avenir, mais je n'ai pas vu de progrès sur ce en très peu de temps (il a probablement fait plus d'un an depuis que j'ai entendu de soutien serait à venir) de sorte que le travail est sans doute intéressant de regarder si vous êtes à l'aise avec JavaScript/ECMAScript.