Bild bei Mouseover ändern

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Bild bei Mouseover ändern

    Hallo,

    ich habe einen simplen Mouseover-Effekt und 5 Grafiken.

    Code:
    Bei der Grafik:
    
    <img name="grafik1" onmouseover="mchange('Grafikname')
    
    Javascript-Code: (funktioniert aber nur bei EINER Grafik)
    
    function mchange(name)
    {    
        document.grafik1.src = blub.jpg;
    }
    Jetzt kann ich aber nur EINE Grafik ändern. Ich würde auch gerne die anderen 4 Grafiken ansprechen können, ich habe jetzt folgendes probiert nur leider geht es nicht:

    Code:
    function mchange(name)
    {    
        document.name.src = blub.jpg;
    } 
    
    oder
    
    function mchange(name)
    {    
        document.getElementById(name).src = blub.jpg;
    } 
    
    und was ich nicht alles schon probiert habe!!
    Wie bekomm ich dass hin? dass er da die Variable *** .name. *** name übernimmt?
    Zuletzt geändert von NextDon; 13.01.2010, 01:24.

  • #2
    Hallo,

    erstmal, wo kommt die Variable bild her? Am besten wäre es, wenn du das img-Element direkt mit übergibst:

    HTML-Code:
    <img onmouseover="mchange(this)" src="..." alt="..." />
    Code:
    function mchange (imgElem) {
        imgElem.src = ...;
    }
    Gruß,

    Amica
    Zuletzt geändert von AmicaNoctis; 13.01.2010, 01:36.
    [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
    Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
    Super, danke!
    [/COLOR]

    Kommentar


    • #3
      erstmal danke für die Antwort.

      Ich sehe schon es war nicht so klug den halben Code zu posten

      (hatte auch gerade den ersten Post editiert als du schon am schreiben warst ^^)

      Die Mouseover-Grafik ist ÜBERALL gleich.

      ich habe aber mehrere Knöpfe:

      Code:
      <img name="grafik1" onmouseover="mchange('grafik1')
      <img name="grafik2" onmouseover="mchange('grafik2')
      <img name="grafik3" onmouseover="mchange(grafik3')
      <img name="grafik4" onmouseover="mchange('grafik4')
      <img name="grafik5" onmouseover="mchange('grafik5')
      und möchte jetzt bei Knopf 1,2,3,4 oder 5 den Mouseover-Effekt einsetzen:

      Code:
      Das geht bei EINER Grafik:
      
      function mchange(name)
      {    
          document.grafik1.src = blub.jpg;
      }
      
      Aber möchte ich es jetzt für alle fünf benutzen geht es nicht:
      
      function mchange(name)
      {    
          document.name.src = blub.jpg;
      }
      Ich möchte es aber gerne über den Javascript-Code lösen und nicht mit ( onmouseover="this.src='neu.gif';" onmouseout="alt.gif';" )
      Zuletzt geändert von NextDon; 13.01.2010, 01:33.

      Kommentar


      • #4
        Ok, aber die Antwort hast du schon bekommen oder bist du damit nicht einverstanden?
        [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
        Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
        Super, danke!
        [/COLOR]

        Kommentar


        • #5
          mh... funktioniert nicht

          Ok, dann poste ich mal den ganzen Code, hab nur angst das so viel Code die Leute abschreckt und die dann nicht lesen bzw. antworten ^^

          Code:
          <a href="#" 
          onmouseover="mopen('bilder/de-navioben-6-mouseover.gif','sprache')"
          onmouseout="mclosetime('bilder/de-navioben-6.gif','sprache')">
          <img name="sprache" 
          src="bilder/de-navioben-6.gif" width="124" height="24" border="0"  /></a>
          Code:
          <script type="text/javascript"> <!--
          var timeout    = 500;
          var closetimer    = 0;
          var ddmenuitem    = 0;
          
          function mopen(bild,id)
          {    
              *** Code1 *** document.sprache.src = bild;
              mcancelclosetime();
              if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
              ddmenuitem = document.getElementById(id);
              ddmenuitem.style.visibility = 'visible';
          }
          function mclose(bildb,id)
          {
              
              *** Code1 ***  document.id.src = bild;
              if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
          }
          function mclosetime(bildb,id)
          {
              closetimer = window.setTimeout(function(){mclose(bildb,id);}, timeout);
          }
          function mcancelclosetime()
          {
              if(closetimer)
              {
                  window.clearTimeout(closetimer);
                  closetimer = null;
              }
          }
          document.onclick = mclose; 
          //--> </script>
          *** Code 1 *** Funktioniert

          *** Code 2 *** Leider nicht (wobei ich da ne "Variable" hin haben möchte)

          dein Code habe ich versucht einzubauen geht aber leider nicht -.-

          Kommentar


          • #6
            Wo und wie hast du meinen Code eingebaut und was geht dabei nicht? Dass deine Versuche nicht funktionieren, sehe ich auf Anhieb.
            [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
            Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
            Super, danke!
            [/COLOR]

            Kommentar


            • #7
              Ich hatte den einfach noch drangehängt ^^ (und natürlich beim aufruf auch noch nen 3tes ding)

              Code:
              function mopen(bild,id,imgElem)
              {    
                  imgElem.src = bild;
                  mcancelclosetime();
                  if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
                  ddmenuitem = document.getElementById(id);
                  ddmenuitem.style.visibility = 'visible';
              }

              Kommentar


              • #8
                Das wird jetzt zu chaotisch und ich kann dir nicht mehr folgen.

                Jedenfalls ist das Grundproblem, dass du offenbar nur die statische Punktschreibweise kennst, z. B. document.body.firstChild

                Es gibt auch auch noch die dynamische Array-Notation: document["body"]["firstChild"], die es dir erlaubt, statt der Strings beliebige String-Ausdrücke (also auch Variablen) zu benutzen.

                Trotzdem ist es besser, mit this zu arbeiten, statt andauernd zu referenzieren und dereferenzieren.

                Amica
                [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
                Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
                Super, danke!
                [/COLOR]

                Kommentar


                • #9
                  Alles was ich möchte ist halt aus diesem Punkt hier eine Variable zu machen:

                  Code:
                  function mopen(HIER)
                  {    
                   document.HIER.src = bild;
                  }
                  So dass ich die Grafik an verschiedenen Positionen ändern kann also z.B wenn HIER == Grafik1 oder Grafik2 oder Grafik3 ist:

                  Code:
                  function mopen(HIER)
                  {    
                   document.GRAFIK1.src = bild;
                   oder
                   document.GRAFIK2.src = bild; 
                   oder
                   document.GRAFIK3.src = bild;
                   oder
                   document.GRAFIK4.src = bild;
                  }
                  Nur leider habe ich keine Ahnung wie man sowas macht also genau wie du sagst: ich kenne nur die statische Punktschreibweise -.-

                  Also wie ne ganz normale Variable in PHP nur wie mache ich dass *cry* Ich habe gelesen dass es irgendwie mit
                  getElementById gehen soll nur ich bekomms nicht hin ;(

                  Kommentar


                  • #10
                    Zitat von NextDon Beitrag anzeigen
                    Nur leider habe ich keine Ahnung wie man sowas macht also genau wie du sagst: ich kenne nur die statische Punktschreibweise -.-
                    Genau das habe ich dir eben erklärt!

                    Nicht document.HIER sondern document[HIER], was ist daran jetzt noch so schwierig?
                    [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
                    Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
                    Super, danke!
                    [/COLOR]

                    Kommentar


                    • #11
                      JAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

                      DANKE DANKE DANKE

                      du hast ja keine Ahnung wie mein Kopf brumt nachdem ich 6 Stunden !!! schon daran sitze lol ^^ bin sooo müde aber ENDLICH jetzt kann ich pennen



                      und da ist es so einfach lol xD

                      Kommentar


                      • #12
                        Nichts für ungut, aber wenn du 1 von den 6 Stunden damit verbracht hättest, dich über die Grundlagen der JS-Syntax zu belesen, hättest du dir mindestens 4 der übrigen 5 ersparen können

                        Und wie gesagt: besser wäre es mit this zu arbeiten, denn erstens musst du für jedes neue Bild wieder ein eindeutiges name-Attribut vergeben und zweitens funktioniert alles nicht mehr, wenn zufällig im selben Dokument noch ein zweites name-Attribut mit demselben Wert vorkommt. Das kann z. B. schon durch Einbinden irgendwelcher Werbung passieren, ohne dass du darauf Einfluss hättest. Daher das betreffende Element direkt übergeben und nicht dessen Namen.
                        [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
                        Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
                        Super, danke!
                        [/COLOR]

                        Kommentar

                        Lädt...
                        X