OnMouseOut geht einfach nicht ......

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    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>
    Last edited by webtaste6659; 11-07-2010, 23:04.
    Tags: None
  • #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.

    Comment

    • #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]
      Last edited by webtaste6659; 11-07-2010, 22:33.

      Comment

      • #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.

        Comment

        • #5
          Hier die hochgeladene Version:

          Untitled Document

          Comment

          • #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]

            Comment

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

              , es funktioniert

              Comment

              Previous template Next
              Working...