it-swarm.com.de

Dynamisches Ändern der Größe von Image-Maps und Bildern

Ich versuche gerade, eine Image-Map auf meiner Site zu erstellen, deren Größe sich je nach Größe des Fensters ändern wird. Ich habe mich gefragt, ob es sowieso mit HTML zu tun gab oder ob ich dies mit Javascript oder einem anderen tun muss Sprache. 

<div style="text-align:center; width:1920px; margin-left:auto; margin-right:auto;">
<img id="Image-Maps_5201211070133251" src="Site.png" usemap="#Image-Maps_5201211070133251" border="0" width="1920" height="1080" alt="" />
<map id="_Image-Maps_5201211070133251" name="Image-Maps_5201211070133251">
<area shape="poly" coords="737,116,1149,118,944,473," href="http://essper.bandcamp.com" alt="Bandcamp" title="Bandcamp"   />
<area shape="poly" coords="1006,589,1418,590,1211,945," href="http://soundcloud.com/essper" alt="Soundcloud" title="Soundcloud"   />
<area shape="poly" coords="502,590,910,591,708,944," href="http://facebook.com/the.essper" alt="Facebook" title="Facebook"   />
</map>

27
ultrazoid

Wenn Sie die Aufgabe mit JavaScript erledigen, finden Sie hier ein browserübergreifendes Codesnippet zum Ändern der Größe aller Bereiche im MAP-Element.

window.onload = function () {
    var ImageMap = function (map) {
            var n,
                areas = map.getElementsByTagName('area'),
                len = areas.length,
                coords = [],
                previousWidth = 1920;
            for (n = 0; n < len; n++) {
                coords[n] = areas[n].coords.split(',');
            }
            this.resize = function () {
                var n, m, clen,
                    x = document.body.clientWidth / previousWidth;
                for (n = 0; n < len; n++) {
                    clen = coords[n].length;
                    for (m = 0; m < clen; m++) {
                        coords[n][m] *= x;
                    }
                    areas[n].coords = coords[n].join(',');
                }
                previousWidth = document.body.clientWidth;
                return true;
            };
            window.onresize = this.resize;
        },
        imageMap = new ImageMap(document.getElementById('map_ID'));
    imageMap.resize();
}

previousWidth muss der Breite des Originalbildes entsprechen. Sie müssen auch einige relative Einheiten in HTML verwenden:

<div style="width:100%;">
<img id="Image-Maps_5201211070133251" src="Site.png" usemap="#Image-Maps_5201211070133251" border="0" width="100%" alt="" />

Arbeitsdemo bei jsFiddle . Wenn Sie die Geige in IE öffnen, können Sie tatsächlich AREAs sehen, wenn Sie darauf klicken.

39
Teemu

Ich habe eine kleine lib geschrieben, um eine imageMap auf ein skalierbares Bild zu skalieren, damit die Karte mit der Skalierung des Bildes synchron bleibt. Nützlich, wenn Sie ein prozentual skaliertes Bild usw. zuordnen möchten.

Es kann mit oder ohne jQuery verwendet werden.

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

und Sie können sehen, wie es funktioniert.

http://davidjbradshaw.com/imagemap-resizer/example/

36
David Bradshaw

Sie können die Koordinaten mit dem Verhältnis des Originalbilds und des Stilbildes multiplizieren. 

<img id="paredea" usemap="#PAREDE-A"  src="https://i.imgur.com/o9nrUMR.png">

    <map name="PAREDE-A">
        <area id="paredea0" shape="rect"  onclick="alert('colmeia A')">
        <area id="paredea1" shape="rect"  onclick="alert('colmeia B')">
        <area id="paredea2" shape="rect"  onclick="alert('colmeia C')">
        <area id="paredea3" shape="rect"  onclick="alert('colmeia D')">
        <area id="paredea4" shape="rect"  onclick="alert('colmeia E')"> 

        <area id="paredea5" shape="rect"  onclick="alert('comeia F')">
        <area id="paredea6" shape="rect"  onclick="alert('colmeia G')">
        <area id="paredea7" shape="rect"  onclick="alert('colmeia H')">
        <area id="paredea8" shape="rect"  onclick="alert('colmeia I')">
        <area id="paredea9" shape="rect"  onclick="alert('colmeia J')">  

        <area id="paredea10" shape="rect"  onclick="alert('colmeia K')">
        <area id="paredea11" shape="rect"  onclick="alert('colmeia L')">
        <area id="paredea12" shape="rect"  onclick="alert('colmeia M')">
        <area id="paredea13" shape="rect"  onclick="alert('colmeia N')">
        <area id="paredea14" shape="rect"  onclick="alert('colmeia O')">  
    </map>

    <script>


        var coordsA = [];
        coordsA[0] = "0,0,200,130";
        coordsA[1] = "200,0,400,130";
        coordsA[2] = "400,0,600,130";
        coordsA[3] = "600,0,800,130";
        coordsA[4] = "800,0,1000,130";

        coordsA[5] = "0,160,200,240";
        coordsA[6] = "200,160,400,240";
        coordsA[7] = "400,160,600,240";
        coordsA[8] = "600,160,800,240";
        coordsA[9] = "800,160,1000,240";

        coordsA[10] = "0,270,200,400";
        coordsA[11] = "200,270,400,400";
        coordsA[12] = "400,270,600,400";
        coordsA[13] = "600,270,800,400";
        coordsA[14] = "800,270,1000,400";


        function setcoords(areaid, totalOfAreas) {
            document.getElementById('paredea').style.width = "auto";
            var width1 = document.getElementById('paredea').width;
            document.getElementById('paredea').style.width = "100%";
            var width2 = document.getElementById('paredea').width;
            var ratio = width2 / width1;

            for (var i = 0; i < totalOfAreas; i++) {
                var temp = coordsA[i].split(",");
                var newcoords = "";
                for (var j = 0; j < temp.length; j++) {
                    temp[j] *= ratio;
                    newcoords += temp[j] + ",";
                }
                newcoords = newcoords.substr(0, newcoords.length - 1);

                document.getElementById(areaid + i).coords = newcoords;
            }
        }


       window.onload = function () {
            setcoords("paredea", 15);
        };

        window.onresize = function () {
            setcoords("paredea", 15);
        };
    </script>
1
Lucas

Ich hatte das gleiche Problem letzte Woche und habe am Ende ein jQuery-Plugin dafür geschrieben.

Hier ist das Projekt gitHub: 

https://github.com/etienne-martin/mapify

Grundlegende Verwendung:

$("img[usemap]").mapify();

Live-Beispiel

http://emartin.ca/mapify/

1
Etienne Martin

Als Klasse (ES6):

class ResponsiveImageMap {
    constructor(map, img, width) {
        this.img = img;
        this.originalWidth = width;
        this.areas = [];

        for (const area of map.getElementsByTagName('area')) {
            this.areas.Push({
                element: area,
                originalCoords: area.coords.split(',')
            });
        }

        window.addEventListener('resize', e => this.resize(e));
        this.resize();
    }

    resize() {
        const ratio = this.img.offsetWidth / this.originalWidth;

        for (const area of this.areas) {
            const newCoords = [];
            for (const originalCoord of area.originalCoords) {
                newCoords.Push(Math.round(originalCoord * ratio));
            }
            area.element.coords = newCoords.join(',');
        }

        return true;
    };
}

Verwendungszweck:

var map = document.getElementById('myMapId');
var image = document.getElementById('myImageId');
new ResponsiveImageMap(map, image, 800);
1
Andriy Kuba

damit dies funktioniert, müssen Sie das data-original-coords-Attribut haben, das die coords zum Originalbild hat

$(function () {
    function adjeustCoords() {
        var image=$('img'); //change that to your image selector
        var originalWidth=image[0].naturalWidth;
        var currentWidth=image.width();
        var ratio=currentWidth/originalWidth;
        $("map area").each(function(){
            //change that to your area selector
            var coords=$(this).attr('data-original-coords').split(',');
            coords = coords.map(function (x) {
                return Math.round(x*ratio);
                //i don't know if all browsers can accept floating point so i round the result
            });
            $(this).attr('coords',coords.join());
        });
    }
    adjeustCoords();
    $(window).resize(function(){
        adjeustCoords();
    });
});

dies funktioniert mit Chrome, Firefox und Edge-Minimum-Versionen

0
Robert

Sie können dazu CSS-Sprites verwenden. Die Bildteile passen in nur ein Bild. Auf diese Weise werden Sie nur eine http-Anforderung zum Laden aller Bilder erstellen. Diese Technik erfordert kein Javascript und Sie werden nur die background-position;-Eigenschaft verwenden, um Ihre Bilder zu verschieben. 

Dies ist eine effiziente Technik zur Seitenoptimierung.

0
defau1t

Ich habe dies nur für Rechteckkoordinaten getestet, aber ich denke, es sollte sich auf Kreis oder Polygon verallgemeinern

function wrap ( img, map ) {
  var originalCoords = [ ],
      test = new Image();

  for ( var i = 0; i < map.areas.length; ++i ) {
    var coords = map.areas[i].coords;
    originalCoords.Push( coords.split( "," ).map( parseFloat ) );
  }

  function resize () {
    var ratio = img.width / test.width;
    for ( var i = 0; i < map.areas.length; ++i ) {
      map.areas[i].coords = originalCoords[i].map( function ( n ) {
        return ratio * n;
      } ).join( "," );
    }
  }

  test.addEventListener( "load", function () {
    window.addEventListener( "resize", resize, false );
    resize();
  }, false );

  test.src = img.src;
}

var imgs = document.querySelectorAll( "img[usemap]" );
for ( var i = 0; i < imgs.length; ++i ) {
  var map = document.querySelector( "map[name=" + imgs[i].useMap.substring( 1 ) + "]" );
  wrap( imgs[i], map );
}
0
moron4hire

Wenn Sie Zugriff auf Illustrator oder ein anderes Programm haben, das eine SVG generieren kann, ist es ganz einfach, eine dynamische Imagemap mit einer SVG zu erstellen.

Dies erfordert keine Programmierung.

Hier sind Anweisungen für Illustrator _ ​​(dauert nur wenige Sekunden) :

  1. bild in Illustrator öffnen, unter neuem Namen speichern

  2. größe des Dokuments auf die Größe des Bildes anpassen

  3. zeichnen Sie gefüllte Rechtecke für die Kartenteile (hilfreich, um die Deckkraft auf 50% zu setzen)

  4. verwenden Sie die Palette "Attribute", um jedem Rechteck einen Link hinzuzufügen

  5. Ändern Sie die Deckkraft aller Rechtecke auf 0%.

  6. wählen Sie das Bild aus und wählen Sie im "Links" -Palettenmenü "Unembed…" (Name ist egal, wir verwenden das Bild nicht)

  7. datei ›Als SVG speichern (Image Location: Link, CSS-Eigenschaften: Style Elemente, Responsive ist markiert)

  8. Öffnen Sie die resultierende SVG-Datei

  9. lösche die ersten beiden Zeilen (XML & Adobe-Kommentar)

  10. bildquelle aktualisieren

  11. fügen Sie den SVG-Code in Ihr HTML-Dokument ein

Dies funktioniert in allen gängigen Browsern. Hier ist eine Bildschirmaufnahme der SVG-Exporteinstellungen für Illustrator:

 enter image description here

0
Andrew Swift

Das ist meine einfachste Lösung. Kein JQuery oder Plugin erforderlich. Achtung, diese Lösung behandelt keine Fehler im Markup oder Bilder, die nicht proportional dimensioniert sind.

function mapResizer(maps) {
    if (!maps) {maps = document.getElementsByTagName('map');}
    for (const map of maps) {
        map.img = document.querySelectorAll(`[usemap="#${map.name}"]`)[0];
        map.areas = map.getElementsByTagName('area');
        for (const area of map.areas) {
            area.coordArr = area.coords.split(',');
        }
    }
    function resizeMaps() {
        for (const map of maps) {
            const scale = map.img.offsetWidth / (map.img.naturalWidth || map.img.width);
            for (const area of map.areas) {
                area.coords = area.coordArr.map(coord => Math.round(coord * scale)).join(',');
            }
        }
    }
    window.addEventListener('resize', () => resizeMaps());
    resizeMaps();
}
if (document.readyState == 'complete') {
    mapResizer();
} else {
    window.addEventListener('load', () => mapResizer());
}
0
Nagy Zoltán

Hier ist ein weiteres Plugin, das ich gerade geschrieben habe, um Image Maps zu verwalten: https://github.com/gestixi/pictarea

Unter anderem skalieren die Bereiche automatisch abhängig von der Bildgröße. Beachten Sie, dass zum Rendern der Bereiche eine Leinwand verwendet wird.

Grundnutzung:

$(function() {
  $('#map').pictarea({
    rescaleOnResize: true
  });
});
0
Nicolas BADIA