Forum

jquery - klick auf imagemap soll text erscheinen lassen

Erstellt von proximate, 08.04.2011.



  1. proximate

    proximate Nicht mehr ganz neu hier Kreativ-Flatrate-User

    Dabei seit:
    21.07.2009
    Beiträge:
    139
    Geschlecht:
    männlich
    Ort:
    Churwalden
    Software:
    Photoshop / After Effects / Dreamweaver -> Adobe Kind ;)
    Kameratyp:
    Canon EOS 50D
    jquery - klick auf imagemap soll text erscheinen lassen
    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:
    Code (Text):
    1. <script type="text/javascript" src="script/jquery.js"></script>
    2. <script type="text/javascript">
    3.  
    4. $(document).ready(function(){
    5.  
    6.       // Innerhalb der Liste href auslesen und durch # ersetzen, title-Attribut mit dem Wert des href schreiben
    7.       $("href").each(function(){
    8.      
    9.           var url = $(this).attr("href");
    10.           $(this).attr("title",url).attr("href","#");
    11.      
    12.       });
    13.      
    14.       // per Click entsprechende URL in das DIV laden, aber nur das DIV #inhalt
    15.       $("href").click(function(){
    16.           var quelle = $(this).attr("title") + " #inhalt";
    17.           $("#info").load(quelle);
    18.       });
    19.  
    20.   });
    21.  
    22. </script>
    html:
    Code (Text):
    1. <div id="bild"><img src="bmwmenu.png" width="500" height="250" border="0" usemap="#Map">
    2.   <map name="Map">
    3.     <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">
    4.     <area shape="poly"  id="felgen1" coords="411,133,417,121,421,97,416,86,408,95,407,109,406,129" href="#" alt="Felge_hinten">
    5.     <area shape="poly" id="door" coords="328,139,331,72,397,58,394,111,390,132,320,170" href="#" alt="Tür">
    6.     <area shape="poly" id="light" coords="205,111,186,134,208,137,232,137,247,134,254,131,268,116" href="#" alt="Scheinwerfer">
    7.     <area shape="poly" id="seitenscheibe" coords="353,33,362,30,372,32,380,41,389,52,385,59,343,65" href="#" alt="Seitenscheibe">
    8.     <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">
    9.     <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">
    10.   </map>
    11. </div>
    12.  
    13. <div id="info">
    14. </div>
    Bin ich blöd oder bin ich blöd? :D

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

    Grüsse

    Proxi
     
    #1      
  2. Duddle

    Duddle Posting-Frequenz: 14µHz

    Dabei seit:
    03.02.2006
    Beiträge:
    3.856
    Geschlecht:
    männlich
    Ort:
    Dresden
    jquery - klick auf imagemap soll text erscheinen lassen
    AW: jquery - klick auf imagemap soll text erscheinen lassen

    Code (Text):
    1.  
    2. $("href")
    3.  
    gibt dir alle "href"-Tags. Es existieren keine "href"-Tags. Du willst wohl
    Code (Text):
    1.  
    2. $("area")
    3.  
    Ansonsten: immer Firebug oder vergleichbares beim JS-debuggen benutzen, dann findest du solche Fehler von alleine.


    Duddle
     
    #2      
  3. proximate

    proximate Nicht mehr ganz neu hier Kreativ-Flatrate-User

    Dabei seit:
    21.07.2009
    Beiträge:
    139
    Geschlecht:
    männlich
    Ort:
    Churwalden
    Software:
    Photoshop / After Effects / Dreamweaver -> Adobe Kind ;)
    Kameratyp:
    Canon EOS 50D
    jquery - klick auf imagemap soll text erscheinen lassen
    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
     
    #3      
  4. proximate

    proximate Nicht mehr ganz neu hier Kreativ-Flatrate-User

    Dabei seit:
    21.07.2009
    Beiträge:
    139
    Geschlecht:
    männlich
    Ort:
    Churwalden
    Software:
    Photoshop / After Effects / Dreamweaver -> Adobe Kind ;)
    Kameratyp:
    Canon EOS 50D
    jquery - klick auf imagemap soll text erscheinen lassen
    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)
    Code (Text):
    1.  
    2. <script type="text/javascript">
    3.  
    4. $(document).ready(function(){
    5.  
    6.       // Innerhalb der Liste href auslesen und durch # ersetzen, title-Attribut mit dem Wert des href schreiben
    7.       $("area").each(function(){
    8.      
    9.           var url = $(this).attr("href");
    10.           $(this).attr("title",url).attr("href","#");
    11.      
    12.       });
    13.  
    14.      
    15.       // per Click entsprechende URL in das DIV laden, aber nur das DIV #inhalt
    16.       $("area").click(function(){
    17.           var quelle = $(this).attr("title") + " #inhalt";
    18.           $("#info").load(quelle);
    19.       });
    20.  
    21.   });
    22.  
    23. </script>
    24.  
    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
     
    #4      
  5. SineTempore

    SineTempore Nicht mehr ganz neu hier

    Dabei seit:
    25.01.2007
    Beiträge:
    201
    Geschlecht:
    männlich
    jquery - klick auf imagemap soll text erscheinen lassen
    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.

    PHP:
    1.  
    2. $("area").click(function(e){
    3.     e.preventDefault();
    4.  
    5.     // Rest des onclick handlers bzw der click funktion...
    6. });
    7.  
    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.
     
    Zuletzt bearbeitet: 26.05.2011
    #5      
  6. proximate

    proximate Nicht mehr ganz neu hier Kreativ-Flatrate-User

    Dabei seit:
    21.07.2009
    Beiträge:
    139
    Geschlecht:
    männlich
    Ort:
    Churwalden
    Software:
    Photoshop / After Effects / Dreamweaver -> Adobe Kind ;)
    Kameratyp:
    Canon EOS 50D
    jquery - klick auf imagemap soll text erscheinen lassen
    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 :)
     
    Zuletzt bearbeitet: 26.05.2011
    #6      
  7. Myhar

    Myhar Aktives Mitglied

    Dabei seit:
    01.11.2007
    Beiträge:
    1.862
    Geschlecht:
    männlich
    Ort:
    Ö
    jquery - klick auf imagemap soll text erscheinen lassen
    AW: jquery - klick auf imagemap soll text erscheinen lassen

    Das default Verhalten bei einem Link kann auch mit
    Code (Text):
    1. return false;
    unterbunden werden.
    Dazu müsstest du nur den Code ganz am Ende deiner click() Funktion einfügen.

    L. G.
     
    #7      
  8. proximate

    proximate Nicht mehr ganz neu hier Kreativ-Flatrate-User

    Dabei seit:
    21.07.2009
    Beiträge:
    139
    Geschlecht:
    männlich
    Ort:
    Churwalden
    Software:
    Photoshop / After Effects / Dreamweaver -> Adobe Kind ;)
    Kameratyp:
    Canon EOS 50D
    jquery - klick auf imagemap soll text erscheinen lassen
    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. =)
     
    #8      
  9. Myhar

    Myhar Aktives Mitglied

    Dabei seit:
    01.11.2007
    Beiträge:
    1.862
    Geschlecht:
    männlich
    Ort:
    Ö
    jquery - klick auf imagemap soll text erscheinen lassen
    AW: jquery - klick auf imagemap soll text erscheinen lassen

    Dabei braucht es nicht einmal viele Suchworte um die Lösungen zu deinem Problem zu finden.
    Bei den Ergebnissen wird sogar der Unterschied zwischen preventDefault und return false erklärt.
     
    #9      
  10. proximate

    proximate Nicht mehr ganz neu hier Kreativ-Flatrate-User

    Dabei seit:
    21.07.2009
    Beiträge:
    139
    Geschlecht:
    männlich
    Ort:
    Churwalden
    Software:
    Photoshop / After Effects / Dreamweaver -> Adobe Kind ;)
    Kameratyp:
    Canon EOS 50D
    jquery - klick auf imagemap soll text erscheinen lassen
    AW: jquery - klick auf imagemap soll text erscheinen lassen

    ja mir waren die Wörter kein Begriff ;) da fehlt einfach das Wissen =)
     
    #10      
Die Seite wird geladen...
© 2002 - 2016 PSD-Tutorials.de – ein Projekt mit der 4eck Media GmbH & Co. KG
x
×
×