Seite 1 von 6 123456 LetzteLetzte
Ergebnis 1 bis 15 von 87
  1. #1
    cysign ist offline Eroberer
    registriert
    30-06-2009
    Beiträge
    53

    image map über xml festlegen und animieren

    Hallo,

    ich würde gerne Daten aus eienr XML-Datei auslesen und anhand deren eine HTML-Image-Map erstellen.
    Wenn ich jetzt über einen aktiven Bereich der ImageMap fahre, möchte ich die ID dieses Bereichs und seine Koordinaten weiterverwenden.

    Im Endeffekt möchte ich damit eine Weltkarte erstellen, die beim Hovern animiert wird wie z.B. www.boralex.com/en/sites .

    Als JS-Neuling schaffe ich das aber nicht wie gewünscht

    in der HTML-Datei habe ich folgendes stehen:

    HTML-Code:
     <img src="gfx/worldmap/worldmap_blank.gif" class="worldmap" border="0" alt="" usemap="#worldmapmap" />
        <map name="worldmapmap">
          <area shape="rect" id="bereich1" coords="11,10,59,29" href="#" alt="linkname" title="linktitel">
        </map>
    und in der js-datei:

    HTML-Code:
    $(document).ready(function(){
    	for (var i=1; i<5; i++){
    		var el = document.getElementById('bereich'+i);
    		el.index = i;
    		el.onMouseOver = function(){
    			alert("test"); /* bzw. die x/y-koordinaten diesses objekts. diese kann ich allerdings auch als variabeln darin speichern, da sie eh per js festgelegt werden sollen */
    		};
    	}
    });
    die js-datei ist richtig eingebunden, denn wenn ich ohne Event ein alert ausgebe, bekomm ich dieses ausgegeben.

    Die FF-Fehlerkonsole schmeißt mir aus, dass $ nicht definiert ist.

    Die Schleife habe ich kopiert von: http://forum.jswelt.de/javascript/49...nsprechen.html (DIVs und H1 mit FOR-Schleife ansprechen), aber ich steig noch nicht ganz dahinter, wie ich sie zum Funktionieren verändern muss

  2. #2
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.667

    AW: image map über xml festlegen und animieren

    Zitat Zitat von cysign Beitrag anzeigen
    Die FF-Fehlerkonsole schmeißt mir aus, dass $ nicht definiert ist.
    $ ist eine funktion aus einem js-framework. das musst du einbinden, wenn du es nutzen möchtest.

  3. #3
    Hache ist offline Foren As
    registriert
    17-06-2010
    Beiträge
    88

    AW: image map über xml festlegen und animieren

    oder du nimmst window.onload() anstatt $(document).ready(

  4. #4
    cysign ist offline Eroberer
    registriert
    30-06-2009
    Beiträge
    53

    AW: image map über xml festlegen und animieren

    ah, okay, ich hatte mich nämlich schon nach $ dummgesucht und nichts gefunden. Dann wird das wohl zu jQuery gehören, was ich bei der anderen Sache verwendet hatte...Dann bin deich das ejtzt auch ein (das brauch ich später für die Animation) und probier es nochmal. Danke

  5. #5
    Hache ist offline Foren As
    registriert
    17-06-2010
    Beiträge
    88

    AW: image map über xml festlegen und animieren

    Zitat Zitat von cysign Beitrag anzeigen
    ah, okay, ich hatte mich nämlich schon nach $ dummgesucht und nichts gefunden. Dann wird das wohl zu jQuery gehören, was ich bei der anderen Sache verwendet hatte...Dann bin deich das ejtzt auch ein (das brauch ich später für die Animation) und probier es nochmal. Danke
    Richtig, das $ gehört zu jQuery

  6. #6
    cysign ist offline Eroberer
    registriert
    30-06-2009
    Beiträge
    53

    AW: image map über xml festlegen und animieren

    so, jetzt ist $ definiert. allerdings bekomme ich nun gesagt, dass "el" = "null" ist...

    $(document).ready(function(){
    for (var i=1; i<5; i++){
    var el = document.getElementById('bereich'+i);
    el.index = i;
    el.onMouseOver = function(){
    alert("test");
    };
    }
    });
    <img src="gfx/worldmap/worldmap_blank.gif" class="worldmap" border="0" alt="" usemap="#worldmapmap" />
    <map name="worldmapmap">
    <area shape="rect" id="bereich1" coords="11,10,59,29" href="#" alt="linkname" title="linktitel">
    </map>

    Edit: ah, okay, jetzt gehts, hiermit:
    $(document).ready(function(){
    for (var i=1; i<=200; i++){
    var el = document.getElementById('bereich'+i);
    el.index = i;
    el.onmouseover = function(){
    alert(this.id);
    };
    }
    })
    Das .onmouseover is casesensitiv...sowas muss man ja auch erstmal wissen :/
    Geändert von cysign (02-07-2010 um 13:51 Uhr)

  7. #7
    Hache ist offline Foren As
    registriert
    17-06-2010
    Beiträge
    88

    AW: image map über xml festlegen und animieren

    dann gibt es das element mit dieser ID wohl nicht.

    kleiner Tipp: Wenn du jQuery schon nutzt, dann benutz auch die Selektoren.

    Dein Problem würde ich so lösen:
    gib allen Bereichen die du ansprechen willst die klasse "bereich"
    Code:
    $(document).ready(function(){
    $(".bereich").onMouseOver = function(){
    alert("test");
    };
    
    });
    ist eleganter ;-)

  8. #8
    Avatar von Junkee[]
    Junkee[] ist offline Lounge-Member
    registriert
    08-05-2009
    Ort
    Leonberg
    Beiträge
    3.169

    AW: image map über xml festlegen und animieren

    Wird wohl stimmen.

  9. #9
    cysign ist offline Eroberer
    registriert
    30-06-2009
    Beiträge
    53

    AW: image map über xml festlegen und animieren

    Sorry, ich bin noch n blutiger Anfänger. Hab mich vor Jahren mal mit Actionscript befasst...und wollte damit jetzt eigentlich arbeiten. Aber dann bin ich zu der Überzeugung gekommen, dass JS die bessere Lösung ist, da man keine kostenpflichtige Software braucht und kein optionales Plugin zum Abspielen nötig ist. Da ich kein Streaming nutzen möchte, sehe ich hier keinen Vorteil für Flash.

    Der jQuery-Selector spricht also über CSS-Definitionan an? ("." => Klassen & "#" => IDs?)
    Code:
    var el = $("#bereich'+i);
    wäre dann also, was ich brauche?
    Tuts aber irgendwie nicht.
    Ich kann an dieser Stellen nicht mit einer Klasse arbeiten, da jeder Bereich einen anderen Inhalt aufrufen soll...
    Geändert von cysign (02-07-2010 um 16:11 Uhr)

  10. #10
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.760

    AW: image map über xml festlegen und animieren

    @hacho: onmouseover!
    @cysign: Fehlermeldungen sollte man trotzdem beachten und entfernen... so gibt es bei dir z.B. kein Element mit id="bereich200", oder?

  11. #11
    cysign ist offline Eroberer
    registriert
    30-06-2009
    Beiträge
    53

    AW: image map über xml festlegen und animieren

    Stimmt, so viele brauch ich dann doch nicht. Aber die Selektoren funktionieren dennoch nicht so, wie ich mir das vorstelle. Auskommentiertes funktioniert, das darunter nicht:

    /* var el = document.getElementById('bereich'+i); */
    var el = $("#bereich'+i);

  12. #12
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.760

    AW: image map über xml festlegen und animieren

    Dann nimm doch das obere - ist sowieso schneller als das von jQuery.

  13. #13
    Hache ist offline Foren As
    registriert
    17-06-2010
    Beiträge
    88

    AW: image map über xml festlegen und animieren

    das mag sein, aber meiner Meinung nach ist es einfach komfortabler eine Selektion über die Klassen zu realisieren.

    Wenn du allen gewünschten Elementen die Klasse "bereich" gibst, kannst du alle auf einmal ansprechen, bzw die $(".bereich").each(function(){}); benutzen

  14. #14
    Hache ist offline Foren As
    registriert
    17-06-2010
    Beiträge
    88

    AW: image map über xml festlegen und animieren

    Zitat Zitat von cysign Beitrag anzeigen
    Stimmt, so viele brauch ich dann doch nicht. Aber die Selektoren funktionieren dennoch nicht so, wie ich mir das vorstelle. Auskommentiertes funktioniert, das darunter nicht:
    $("#bereich'+i) kann nie klappen weil die hochkommata falsch gesetzt sind.
    Vorschlag:
    var id= "#bereich"+i;
    var el= $(id)

  15. #15
    Avatar von Junkee[]
    Junkee[] ist offline Lounge-Member
    registriert
    08-05-2009
    Ort
    Leonberg
    Beiträge
    3.169

    AW: image map über xml festlegen und animieren

    unnötiges Speichern in Variablen - $("#bereich"+i)
    Aber mit Klassen ist es schöner.

Seite 1 von 6 123456 LetzteLetzte

Ähnliche Themen

  1. Navigationsleite Animieren
    Von new_developer im Forum JavaScript
    Antworten: 6
    Letzter Beitrag: 29-04-2010, 15:23
  2. background-image über 100% der höhe
    Von rasputin im Forum CSS und (X)HTML
    Antworten: 18
    Letzter Beitrag: 06-01-2007, 22:01
  3. background-image über drei Spalten
    Von wumble im Forum Allgemeines
    Antworten: 4
    Letzter Beitrag: 22-01-2006, 21:12
  4. site über image zur startseite machen
    Von Jack-da-Ripper im Forum Allgemeines
    Antworten: 1
    Letzter Beitrag: 20-09-2003, 01:06
  5. Tabellenhöhe über background-image definieren
    Von bine im Forum Allgemeines
    Antworten: 4
    Letzter Beitrag: 31-08-2003, 22:54

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •