Mit JQuery schweben mit HTML Imagemap

Question

Ich habe einen komplizierten Hintergrundbild mit vielen kleinen Regionen, die Höhepunkte Roll Illustration, zusammen mit zusätzlicher Textanzeige und die zugehörigen Links für jeden brauchen. Die endgültige Darstellung stapelt mehr statischen Bilder mit Transparenz unter Verwendung von z-Index und die Highlight-Überschlag Abbildungen müssen in eines der in-zwischen „Sandwich“ Schicht zu erreichen, um den gewünschten Effekt.

anzuzeigen

Nach einigen erfolglosen Hantieren mit Blöcken, habe ich beschlossen, dies könnte mit einer Old-School-Bild Karte erfolgen. Ich habe eine schematische Testkarte mit vier geometrischen Form Umrissen und „gefüllt“, um sie mit png Rollovers verwenden. Die Idee ist es, den Image-Map mit der unteren Hintergrundebene zu verknüpfen, initialisieren all Rollover-Effekte mit CSS {visibility: hidden} und jQuerys Hover-Methode verwenden, um sie sichtbar sowie offenbaren zugehörigen Text in einem separaten div zu machen. Die separate Textfunktion ist, warum ich nicht auf diesem mit dem Versuch, Pseudoklasse: hover statt jQuery schweben. Weil ich den Image-Map wurde mit, machte ich alle Roll pngs (die transparenten Hintergründe haben) für die exakte Platzierung auf den vollen Behälter so bemessen, dass alle Linie genau.

Was ich Werke bekam ... nicht wirklich! Das Bild Karte korrekt nur die geometrischen Flächen aktivieren abgebildet. Aber die href von jedem Rollover-Bereich funktioniert nur intermittierend und mit JQuery schweben mit CSS Sicht ist durcheinander. Gewünschtes Verhalten ist, dass einfach in den Bereich rollen würde die Form fester machen. Was tatsächlich passiert ist, eine Bewegung innerhalb der Form eines schnellen Hin- und Herschalten zwischen sichtbaren und verborgenen macht; wenn sich der Cursor in der Form hält, könnte es sichtbar sein oder auch nicht. Irgendwelche Ideen geschätzt!

Probe Hover-Setup (Ich werde schließlich Arrays für echte Rollovers verwenden, assoziierten Links und Text):

$('#triangle').hover(
    function() {
        $('#ID_triangle').css({'visibility' : 'visible'});
    },
    function() {
        $('#ID_triangle').css({'visibility' : 'hidden'});
    }
)

Imagemap:

<div id="container">
    <img src="images/testMap_w.png" width="800" height="220" alt="TestMap W" usemap="#testMap">
    <map name="testMap">
        <area shape="polygon" coords="20,20,106,20,106,106,20,106" href="http://www.stackoverflow.com" id="box" />
        <area shape="polygon" coords="216,50,339,50,277,156" href="http://www.google.com" id="triangle" />
        <area shape="polygon" coords="460,0,574,0,460,220" href="http://www.cnn.com" id="bordertriangle" />
        <area shape="polygon" coords="704,65,769,115,744,196,665,196,640,115" href="http://slashdot.org" id="pentagon" />
    </map>
    <img src="images/testMap_box.png" width="800" height="220" alt="TestMap Box" id="ID_box">
    <img src="images/testMap_triangle.png" width="800" height="220" alt="TestMap Triangle" id="ID_triangle">
    <img src="images/testMap_border_triangle.png" width="800" height="220" alt="TestMap Border Triangle" id="ID_bordertriangle">
    <img src="images/testMap_pentagon.png" width="800" height="220" alt="TestMap Pentagon" id="ID_pentagon">
</div>

Answer 1

Sie sollten dieses Plugin Check-out:

https://github.com/kemayo/maphilight

und die Demo:

http://davidlynch.org/js/maphilight/docs/demo_usa.html

wenn überhaupt, Sie vielleicht in der Lage, einige Codes von ihm zu leihen Ihnen zu beheben.

Answer 2

Diese Frage ist alt, aber ich wollte eine Alternative zu der akzeptierten Antwort hinzuzufügen, die nicht zu der Zeit noch nicht gab.

Bild Mapster ist ein jQuery-Plugin, das ich schrieb einige der Mängel der Karte Hilight zu lösen (und es war zunächst ein Erweiterung dieses Plugin, obwohl es fast da gewesen ist komplett neu geschrieben). Ursprünglich war dies nur die Fähigkeit Auswahlzustand für Bereiche zu halten, Browser-Kompatibilitätsprobleme zu beheben. Seit seiner ersten Veröffentlichung vor ein paar Monaten, aber ich habe eine Menge Funktionen, einschließlich der Fähigkeit hinzugefügt, um eine alternative Bild als Quelle für die Highlights zu verwenden.

Es hat auch die Möglichkeit, Bereiche zu identifizieren „Masken“, das heißt, Sie Bereiche mit „Löchern“ zu schaffen, und zusätzlich komplexe Gruppierungen von Bereichen erstellen. Zum Beispiel könnte Bereich A ein weiterer Bereich B bewirken, hervorgehoben werden, aber Bereich B selbst würde nicht auf Mausereignisse reagieren.

Es gibt einige Beispiele auf der Website, die die meisten Funktionen zeigen. Die Github-Repository auch weitere Beispiele und vollständige Dokumentation hat.

Answer 3

Ich fand dieses wunderbare Mapping-Script ( mapper.js ), die ich in der Vergangenheit verwendet haben . Was ist anders an ihm ist, dass Sie über die Karte oder einen Link auf Ihrer Seite schweben können den Kartenbereich Highlight zu machen. Leider ist es in Javascript geschrieben und erfordert eine Menge in-line Codierung im HTML - ich würde dieses Skript zu sehen Liebe zu jQuery portiert: P

Überprüfen Sie auch, alle Demos! Ich denke, dieses Beispiel könnte fast zu einem einfachen Online-Spiel gemacht werden (ohne Blitz) -. sicherstellen, dass Sie auf den verschiedenen Kamerawinkeln auf

Answer 4

Obwohl jQuery Maphilight Plugin macht den Job, stützt sie sich auf die veraltete ausführliche imagemap in Ihrem HTML. Ich würde es vorziehen, das mapcoordinates extern zu halten. Dies könnte mit der jquery imagemap Plugin als JS, aber es fehlt Staaten schweben. Eine schöne Lösung ist googelt geomap Visualisierung in Flash und JS. Aber die Open-Source-Zukunft für diese Art von Vektordaten jedoch ist svg, svg Unterstützung accross alle modernen Browser unter Berücksichtigung und googelt svgweb für einen Flash konvertiert für IE, warum nicht eine jQuery-Plugin Links und hoverstates zu einer SVG-Karte zu schreiben, die JS-Demo hier ? Auf diese Weise vermeiden Sie auch den komplexen Schritt zur Herstellung eine Vektorkarte zu einem imagemap Koordinaten zu transformieren.