jquery - klick auf imagemap soll text erscheinen lassen

[proximate]

Hallo Community !
Ich habe ein mittlerweile sehr nerviges Problem und komme bei Gott nicht dahinter wo der Hund begraben ist.

Was soll passieren :
Ich habe ein Bild mit einer Imagemap (Dreamweaver) auf dem Bild befindet sich ein Auto dort habe ich mit dem Imagemap Linkbereiche eingefügt. Nun möchte ich das wenn man zB. auf die Reifen klickt rechts neben dem bild eine kurze Info auftaucht.

Die Info rechts kann aus einer externen HTML stammen oder auf der selben seite hinterlegt sein, eigentlich egal. Nun habe ich im Internet bereits etwas ähnliches gefunden was auch toll funktioniert jedoch erfolgt hier durch Klick auf einen Listen Link der Aufruf via Javascript/jquery.

Nun hier was ich habe :
jquery:

<script type="text/javascript" src="script/jquery.js"></script>
<script type="text/javascript">

$(document).ready(function(){
  
      // Innerhalb der Liste href auslesen und durch # ersetzen, title-Attribut mit dem Wert des href schreiben
      $("href").each(function(){
      
          var url = $(this).attr("href");
          $(this).attr("title",url).attr("href","#");
      
      });
      
      // per Click entsprechende URL in das DIV laden, aber nur das DIV #inhalt
      $("href").click(function(){
          var quelle = $(this).attr("title") + " #inhalt";
          $("#info").load(quelle);
      });
  
  });

</script>

html:

<div id="bild"><img src="bmwmenu.png" width="500" height="250" border="0" usemap="#Map">
  <map name="Map">
    <area shape="poly"  id="felgen1" coords="309,153,305,172,297,198,291,183,290,164,293,138,300,119,306,130" href="felgen.html" alt="Felge_vorne">
    <area shape="poly"  id="felgen1" coords="411,133,417,121,421,97,416,86,408,95,407,109,406,129" href="#" alt="Felge_hinten">
    <area shape="poly" id="door" coords="328,139,331,72,397,58,394,111,390,132,320,170" href="#" alt="Tür">
    <area shape="poly" id="light" coords="205,111,186,134,208,137,232,137,247,134,254,131,268,116" href="#" alt="Scheinwerfer">
    <area shape="poly" id="seitenscheibe" coords="353,33,362,30,372,32,380,41,389,52,385,59,343,65" href="#" alt="Seitenscheibe">
    <area shape="poly" id="frontscheibe" coords="330,69,264,62,241,60,196,60,229,31,247,22,264,23,278,20,302,23,324,23,341,29,344,40" href="#" alt="Cockpit">
    <area shape="poly" id="haube" coords="211,109,83,98,104,84,116,75,139,70,153,68,167,65,183,63,199,61,237,62,254,63,285,67,313,72,321,74" href="#" alt="Motorhaube">
  </map>
</div>

<div id="info">
</div>

Bin ich blöd oder bin ich blöd?

Klappt das überhaupt mit den Imagemaps oder muss ich einen komplett anderen weg gehen?

Grüsse

Proxi

 

[Duddle]

AW: jquery - klick auf imagemap soll text erscheinen lassen

$("href")

gibt dir alle "href"-Tags. Es existieren keine "href"-Tags. Du willst wohl

$("area")

Ansonsten: immer Firebug oder vergleichbares beim JS-debuggen benutzen, dann findest du solche Fehler von alleine.


Duddle

 

[proximate]

AW: jquery - klick auf imagemap soll text erscheinen lassen

Der Burner !

thx a lot, ja ich ging davon aus das des mit dem href so klappen sollte weil vorhanden sind sie ja.

Man hat nie ausgelernt

mit dem Area klappts, danke dir vielmals für die schnelle Antwort !

Schönes Wochenende

grüsse

Proxi

 

[proximate]

AW: jquery - klick auf imagemap -> Seite "springt" nach oben

so negstes Problem, Wenn ich einen Link auf der IMAGEMAP anklicke so "springt" die Seite jedesmal nach oben (zu sehen bei geringeren Monitorauflösungen)

<script type="text/javascript">

$(document).ready(function(){
  
      // Innerhalb der Liste href auslesen und durch # ersetzen, title-Attribut mit dem Wert des href schreiben
      $("area").each(function(){
      
          var url = $(this).attr("href");
          $(this).attr("title",url).attr("href","#");
      
      });

      
      // per Click entsprechende URL in das DIV laden, aber nur das DIV #inhalt
      $("area").click(function(){
          var quelle = $(this).attr("title") + " #inhalt";
          $("#info").load(quelle);
      });
  
  });

</script>

In einem anderen Forum wurde bereits darüber gesprochen das dies aufgrund des # Aufrufes passiert (logisch eigentlich) so wie ich das aber sehe kann ich das nicht wirklich umgehen oder?

Mittlerweile könnt ihr euch das ganze auch HIER anschauen.

Ist kein Weltuntergang, da ich Dies jedoch aus Lernzwecken mittels jQuery lösen wollte. nervt es mich doch etwas das dies nicht so klappt :-(

Zur Info ich stehe noch am Anfang mit jquery.

Bin froh über jegliche Hilfe !

grüsse Proxi

 

[SineTempore]

AW: jquery - klick auf imagemap soll text erscheinen lassen

Das Nach-Oben-Springen ist aber nur einmal am Anfang, oder? Also wenn sozusagen das # oben in die Adressleiste springt.

Eine Möglichkeit dies zu unterbinden ist das Standardverhalten der Areas bei klick zu unterbinden.

$("area").click(function(e){
    e.preventDefault();

    // Rest des onclick handlers bzw der click funktion...
});

eine andere möglichkeit wäre über removeAttr() einfach das href Attribut zu entfernen.

EDIT: Dein Skript auf der HP funktioniert aktuell, so wie es jetzt ist, nicht, da du die .each Funktion rausgenommen hast.

 

[proximate]

AW: jquery - klick auf imagemap soll text erscheinen lassen

So hab nun das mal mit dem preventDefault Versucht aber funktioniert nich so doll. resp. Garnicht mehr // wie funktioniert das remove Attr() genau?

Danke & Grüsse

PS: ja hab gestern was versucht und nichtmehr angepasst funzt nun wieder.

Edit: springt bei jedem klick nicht nur beim ersten mal - ihr könnts euch nun gerne anschauen

 

[Myhar]

AW: jquery - klick auf imagemap soll text erscheinen lassen

Das default Verhalten bei einem Link kann auch mit

return false;

unterbunden werden.
Dazu müsstest du nur den Code ganz am Ende deiner click() Funktion einfügen.

L. G.

 

[proximate]

AW: jquery - klick auf imagemap soll text erscheinen lassen

NICE !
habs nun mit dem return false gemacht... habs gerade nochmal getestet lokal hats auch mit der Idee von SineTempore funktioniert. Hatte auf dem Server wohl n Tippfehler drin (würde auch erklären warum es nach de Modifikation garnicht mehr funktioniert ;-))

Danke für die tolle Hilfe (google hat keinen dieser Ansätze ausgespuckt). Hoffe der Thread kann nun auch anderen Helfen. =)

 

[Myhar]

AW: jquery - klick auf imagemap soll text erscheinen lassen

Dabei braucht es um die Lösungen zu deinem Problem zu finden.
Bei den Ergebnissen wird sogar der Unterschied zwischen preventDefault und return false erklärt.

 

[proximate]

AW: jquery - klick auf imagemap soll text erscheinen lassen

ja mir waren die Wörter kein Begriff da fehlt einfach das Wissen =)