Imagemap hover mit links verknüpfen
Eingetragen von willi1 (246)am 21.04.2011 - 14:27 Uhr in
Hallo,
ich stoße wohl mal wieder an meine Grenzen. Ich habe eine Deutschlandkarte als imagemap erstellt wenn ich über die einzelnen Bundesländer fahre ändert sich die farbe von dem jeweiligen Bundesland. Neben der Karte habe ich die Bundesläder nochmal als links per views ausgegeben (Taxonomy Begriffe). Ich möchte folgendes wenn ich über ein Link fahre soll gleichzeitig auch das entsprechende Bundesland hovern und umgekehrt. Kann mir da jemand von Euch weiterhelfen?
Ein Beispiel wo es wunderbar funktioniert ist hier zu finden: http://www.drupalcenter.de/showroom/34587
Für einen Tipp wäre ich sehr dankbar.
lg
willi
- Anmelden oder Registrieren um Kommentare zu schreiben
Ich würde das mit
am 21.04.2011 - 15:27 Uhr
Ich würde das mit Jquery/Javascript lösen:
Neue js-Datei erstellen und ins Thema einbinden.
Und dann so in etwa:
$(document).ready(function() {$("#lD_textlink_1").hover(function() {
$("#ID_maplink_1")
.stop()
.animate({<Gewünschte Änderung>}, 1000);
}, function() {
$("#ID_maplink_1")
.stop()
.animate({<Gewünschte Änderung rückgängig>}, 1000);
});
});
Das ist jetzt grob aus einem funktionierendem Beispiel rauskopiert. Hoffe, das hilft.
Hallo Enno,danke Dir für die
am 21.04.2011 - 17:35 Uhr
Hallo Enno,
danke Dir für die schnelle Antwort, ich muss leider dazu sagen, dass ich mich mit Javascript und jquery noch nicht auskenne, aber ich möchte es gern lernen. Magst Du vielleicht nochmal einen Blick auf meine Seite werfen wie es im Moment ausschaut?
meine Seite
ich habe im Prinzip ja 17 Grafiken also eine Grafik ohne markierte Bundeslander und die anderen alle mit dem jeweiligen markierten Bundesland versehen. Muss ich jquery dann auch extra laden? oder reicht das wen ich den code so einbaue:
<script type="text/javascript">$(document).ready(function() {
$("#lD_textlink_1").hover(function() {
$("#baden-wuerttemberg")
.stop()
.animate({"left": "+=50px"}, 1000);
}, function() {
$("#baden-wuerttemberg")
.stop()
.animate({"left": "+=150px"}, 1000);
});
});
</script>
und wie sieht es mit den Textlinks aus die haben ja alle ein und die selbe id. Oder verstehe ich das falsch?
lg
willi