Enrico: Kein Resultat bei jQuery-binding, aber auch keine Fehlermeldung

Hallo,

ich bin derzeit dabei, mich in jQuery einzuarbeiten.

Ich möchte mittels jQuery events an Bilddateien binden, da ich mit diesen events arbeiten werde (verfügbar machen, Attribute ändern,...).

Allerdings stehe ich vor dem Problem, dass die Anbindungen scheinbar korrekt gemacht werden, allerdings bekomme ich im Browser keine Ergebnisse (in diesem Fall einen Bildwechsel mit Hand-Cursor bei mouseover), bekomme aber keine Fehlermeldung in der Fehlerkonsole von Firefox.

Im head-bereich binde ich zunächst jQuery ein und definiere nachfolgend die Anweisungen:

  
<script type="text/javascript" language="javascript" src="../JS/jQuery.js"></script>  
<script type="text/javascript" language="javascript">  
  
$(document).ready(function()  
{  
   var Rubriken = new Array ("Startseite", "WirUeberUns", "Ruestzeug", "Waffen", "Gewandung", "Lederzeug", "Sonstiges", "Informationen", "Warenkorb");  
  
   for (var i = 0; i < 9; i++)  
   {  
      $('#Rubrik' + Rubriken[i] + '_img').bind('mouseover', function()  
      {  
         $('#Rubrik' + Rubriken[i] + '_img').attr('src', '../GRAFIKEN/ButtonRubrik' + Rubriken[i] + '1.png');  
         $('#Rubrik' + Rubriken[i] + '_img').css({'cursor': 'pointer'});  
      });  
  
      $('#Rubrik' + Rubriken[i] + '_img').bind('mouseout', function()  
      {  
         $('#Rubrik' + Rubriken[i] + '_img').attr('src', '../GRAFIKEN/ButtonRubrik' + Rubriken[i] + '0.png');  
      });  
  
      $('#Rubrik' + Rubriken[i] + '_img').bind('click', function()  
      {  
  
      });  
   }  
});  
  
</script>  

Die einzelnen Ausgangsgrafiken sind alle nach folgendem Muster aufgebaut:

  
<img id="RubrikStartseite_img" src="../GRAFIKEN/ButtonRubrikStartseite0.png">  
<img id="RubrikWirUeberUns_img" src="../GRAFIKEN/ButtonRubrikWirUeberUns0.png">  
<img id="RubrikRuestzeug_img" src="../GRAFIKEN/ButtonRubrikRuestzeug0.png">  

Warum bekomme ich im Browser keine entsprechenden Resultate?

Vielen Dank für eure Hilfe.

Gruß
Enrico

  1. @@Enrico:

    nuqneH

    <script type="text/javascript" language="javascript" src="../JS/jQuery.js"></script>
    <script type="text/javascript" language="javascript">

    Das @language-Attribut war hierfür noch nie sinnvoll. Je nach Doctype ist es auch falsch. Und in HTML5 ist auch @type nicht mehr erforderlich.

    for (var i = 0; i < 9; i++)
       {
          $('#Rubrik' + Rubriken[i] + '_img').bind('mouseover', function()
          {
             $('#Rubrik' + Rubriken[i] + '_img').attr('src', '../GRAFIKEN/ButtonRubrik' + Rubriken[i] + '1.png');
             $('#Rubrik' + Rubriken[i] + '_img').css({'cursor': 'pointer'});
          });

    Was soll das denn? Wozu JavaScript für die cursor-Eigenschaft? OMG

    Setze cursor mit CSS!

    Und wenn die Bilder Hintergrundbilder sind, brauchst du auch für den Bildwechsel kein JavaScript.

    Qapla'

    --
    „Perfektion ist nicht dann erreicht, wenn es nichts mehr hinzuzufügen gibt, sondern wenn man nichts mehr weglassen kann.“ (Antoine de Saint-Exupéry)
    1. Hallo Gunnar,

      danke für Deine Antwort.

      OK, ich baue den Code neu auf und mache u.a. den Grafikwechsel mittels background-position.

      Dennoch brauche ich die korrekte Zuordnung der events.

      Was habe ich beim jQuery-Code falsch gemacht?

      Gruß
      Enrico

      1. @@Enrico:

        nuqneH

        Dennoch brauche ich die korrekte Zuordnung der events.

        Wozu?

        Was habe ich beim jQuery-Code falsch gemacht?

        Du verwendest bind() anstatt on().

        Du verwendest innerhalb der Schleife $('#Rubrik' + Rubriken[i] + '_img') anstatt $(this).

        Qapla'

        --
        „Perfektion ist nicht dann erreicht, wenn es nichts mehr hinzuzufügen gibt, sondern wenn man nichts mehr weglassen kann.“ (Antoine de Saint-Exupéry)
        1. Hallo Gunnar,

          Wozu?

          Die Grafiken werden Teil eines Aufklappmenüs und stellen die Oberpunkte dar, nach deren Anklicken das entsprechende Untermenü angezeigt wird:

          • Dieses eine Untermenü wird angezeigt
          • Ein eventuell bereits geöffnetes Untermenü wird geschlossen
          • Der Oberpunkt soll bei geöffnetem Untermenü kein Link mehr sein (Entfernung mit "unbind()") und erst durch Anklicken eines anderen Oberpunktes wieder zum Link werden ("bind()")

          Gruß
          Enrico

          1. @@Enrico:

            nuqneH

            Die Grafiken werden Teil eines Aufklappmenüs

            Eine Navigation, die nur mit JavaScript funktioniert? Also für einige (wichtige!!) Clients gar nicht?

            Aber davon scheinst du ja inzwischen abgekommen zu sein. Gut so.

            Grafiken? Du denkst hoffentlich an die zwingend notwendigen Alternativtexte?

            Oder anders: Deine Menüpunkte bestehen aus ganz normalem Text, keinen img-Elementen. Für die Grafiken verwendest du Image-Replacement-Techniken [Meiert, CSS-Tricks], am besten aus letzterer Quelle eine der 2012er.

            Qapla'

            --
            „Perfektion ist nicht dann erreicht, wenn es nichts mehr hinzuzufügen gibt, sondern wenn man nichts mehr weglassen kann.“ (Antoine de Saint-Exupéry)