OnMouseOut geht einfach nicht ......

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

  • OnMouseOut geht einfach nicht ......

    Hallo, ich probiere jetzt schon stundenlang rum aber der OnMouseOut will im FireFox einfach nicht (OnMouseOver geht reibungslos und OnMouseOut geht im IE auch), ich würde es ja über CSS realisieren ich bin aber der Meinung es geht nicht weil 3 verschiedene Grafiken getauscht werden sollen.

    Kann mir bitte wer helfen?

    Konkret geht es um folgende Stelle:


    <script type="text/javascript">
    function Ona(){
    document.getElementById('h2-2').style.backgroundPosition = '-0 -0';
    document.getElementById('h2-3').style.backgroundPosition = '-0 -0';
    }
    function Offa(){
    document.getElementById('h2-2').style.backgroundPosition = '-237 -75';
    document.getElementById('h2-3').style.backgroundPosition = '-390 -75';
    }
    </script>

    <a onMouseOver="Ona()" onMouseOut="Offa()" href="#" ><div class="s" id="h2-2"></div></a>


    HTML-Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    
    <style type="text/css"> 
    body {margin:0;padding:0;background-image:url(_img/0.jpg);background-repeat:repeat-x;
    background-color:#FFF;font-family:Arial, Helvetica, sans-serif;}
    .s #Start{width:973px;margin:0 auto;text-align:left;}
    .s #Header1{padding:0 0px;height:75px;background-image:url(_img/s1.jpg);}
    .s #Header2{padding:0 0px;height:92px;background-image:url(_img/s1.jpg);}
    #Ueberschrift{width:377px;height:15px;margin-left:231px;float:left;margin-top:27px;}
    #Community-Button{width:240px;height:42px;background-image:url(_img/s1.jpg);
    background-position:-664px -14px;float:right;margin-top:14px;margin-right:69px;
    padding-top:6px;background-repeat:no-repeat;}
    .s #Navigation{float:left;width:150px;padding:0 0px;}
    .s #Content{padding:0 0px;}
    .s #Footer{padding:0 0px;height:20px;}
    .clear{clear:both;height:0;font-size:1px;line-height:0px;}
    h1{font-size:11px;color:#FFF;text-align:center;margin:0 0;}
    .s #h2-1{float:left;width:237px;padding:0 0px;height:92px;background-image:url(_img/s1.jpg);
    background-position:-0px -75px;}
    .s #h2-2{float:left;width:153px;padding:0 0px;height:92px;background-image:url(_img/s1.jpg);
    background-position:-237px -75px;}
    .s #h2-3{float:left;width:36px;padding:0 0px;height:92px;background-image:url(_img/s1.jpg);
    background-position:-390px -75px;}
    .s #h2-4{float:left;width:127px;padding:0 0px;height:92px;background-image: url(_img/s1.jpg);
    background-position:-426px -75px;}
    .s #h2-5{float:left;width:36px;padding:0 0px;height:92px;background-image:url(_img/s1.jpg);
    background-position:-390px -75px;}
    .s #h2-6{float:left;width:152px;padding:0 0px;height:92px;background-image:url(_img/s1.jpg);
    background-position:-553px -75px;}
    .s #h2-7{float:left;width:36px;padding:0 0px;height:92px;background-image:url(_img/s1.jpg);
    background-position:-390px -75px;}
    .s #h2-8{float:left;width:196px;padding:0 0px;height:92px;background-image:url(_img/s1.jpg);
    background-position:-705px -75px;}
    </style>
    
    <script type="text/javascript">
    function Ona(){
    document.getElementById('h2-2').style.backgroundPosition = '-0 -0';
    document.getElementById('h2-3').style.backgroundPosition = '-0 -0';
    }
    function Offa(){
    document.getElementById('h2-2').style.backgroundPosition = '-237 -75';
    document.getElementById('h2-3').style.backgroundPosition = '-390 -75';
    }
    </script>
    
    
    </head>
    
    <body class="s">
    
    <div id="Start">
    
      <div id="Header1">
        
        <div class="s" id="Ueberschrift">
        <h1><strong>Das große Informationsportal zum Thema Abnehmen / Diät</strong></h1></div>
        <div class="s" id="Community-Button">
        <h1>Du hast noch offene Fragen? Dann <br />Frag doch unsere Community &gt;&gt;&gt;</h1></div>
      </div>
      
        <div id="Header2">
          <div class="s" id="h2-1"></div>
          <a onMouseOver="Ona()" onMouseOut="Offa()" href="#" ><div class="s" id="h2-2"></div></a>
          <div class="s" id="h2-3"></div>
          <div class="s" id="h2-4"></div>
          <div class="s" id="h2-5"></div>
          <div class="s" id="h2-6"></div>
          <div class="s" id="h2-7"></div>
          <div class="s" id="h2-8"></div>
        </div>
      
      <div id="Navigation"></div>
      
      <div id="Content">
      </div>
      <br class="cleart" />
      
      <div id="Footer"></div>
    </div>
    </body>
    </html>
    Zuletzt geändert von webtaste6659; 12.07.2010, 00:04.

  • #2
    Was nicht geht, ist DIV in A zu verschachteln; DIV ist ein block level, A ein inline-Element.

    Bring erst mal dein HTML in Ordnung (validieren!), danach kann man weiter sehen.
    I don't believe in rebirth. Actually, I never did in my whole lives.

    Kommentar


    • #3
      Habe es geändert in

      HTML-Code:
      <div class="s" id="h2-2"><a onmouseover="Ona()" onmouseout="Offa()" href="#" >a</a></div>
      Oder von mir aus:

      HTML-Code:
      <div onmouseover="Ona()" onmouseout="Offa()" class="s" id="h2-2"></div>
      = Der Fehler ist immer noch da.

      [COLOR=#1f2126][FONT=Helvetica]Congratulations[/FONT][/COLOR][COLOR=#1f2126][FONT=Helvetica]! The uploaded document "index.html" was successfully checked as XHTML 1.0 Transitional. This means that the resource in question identified itself as "XHTML 1.0 Transitional" and that we successfully performed a formal validation using an SGML, HTML5 and/or XML Parser(s) (depending on the markup language used).[/FONT][/COLOR]
      Zuletzt geändert von webtaste6659; 11.07.2010, 23:33.

      Kommentar


      • #4
        Na dann stell bitte mal ein Online-Beispiel bereit, wo man sich das anschauen kann, inkl. der ganzen Hintergrundbilder.
        I don't believe in rebirth. Actually, I never did in my whole lives.

        Kommentar


        • #5
          Hier die hochgeladene Version:

          Untitled Document

          Kommentar


          • #6
            Hallo,

            für den Wert 0 braucht man keine Einheit, für andere Werte musst du dem Browser sagen, ob du px oder % meinst.

            Gruß,

            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


            • #7
              baahhhhh das gibt es ja nicht, (theoretisch) so einfach ... !

              , es funktioniert

              Kommentar

              Lädt...
              X