Bilderwechsel bei onmouseover problem im IE von Phil, 15.05.2006 14:18

Bilderwechsel bei onmouseover problem im IE

Phil Homepage des Autors 15.05.2006 14:18

javascript

Hi alle!
Ich habe ein Problem! Dies tritt allerdings nur im IE und nicht im Mozilla Firefox auf!

http://music-mg.drition.net/
Das ist der Link zu der Page!
Öffnet sie mit dem IE!
Wenn man dann oben auf die Navigations-Button geht, soll sich der Button ändern!
Das tut er per onmouseover!
Beim IE jedoch geh ich auf dfas BIld, dann zeigt er die hintergrund farbe des Div-Containers an und DANN erst das andere Bild........ und das auch noch total langsam... beim Moz.. wird alles flüßig dargestellt!

hier ist der Code:

-----------------------------------
index.php
-----------------------------------
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="basis.css">
<script language="javascript" src="sc.js" type="text/javascript"></script>
</head>
<body>
<a href="index.php">
     <div id="L1" class="LL" onMouseOver="LL(this)" onMouseOut="LL2(this)"></div>
    </a>
    <a href="ma.php">
     <div id="L2" class="link1" onMouseOver="link1(this)" onMouseOut="link2(this)"></div>
    </a>
    <a href="mu.php">
     <div id="L3" class="link3" onMouseOver="link3(this)" onMouseOut="link4(this)"></div>
    </a>
    <a href="sonst.php">
     <div id="L4" class="link5" onMouseOver="link5(this)" onMouseOut="link6(this)"></div>
    </a>
    <a href="links.php">
     <div id="L5" class="link7" onMouseOver="link7(this)" onMouseOut="link8(this)"></div>
    </a>
    <a href="forum.php">
     <div id="L6" class="link9" onMouseOver="link9(this)" onMouseOut="link10(this)"></div>
    </a>
    <a href="kontakt.php">
     <div id="L7" class="link11" onMouseOver="link11(this)" onMouseOut="link12(this)"></div>
    </a>
</body>
</html>

------------------------------------------------------
basis.css
------------------------------------------------------

.LL { width:130px; height:40px; background-image:url(img/buttons/navi.gif) }
.LL2 { width:130px; height:40px; background-image:url(img/buttons/navi1.gif) }
.link1 { width:130px; height:40px; background-image:url(img/buttons/ma.gif) }
.link2 { width:130px; height:40px; background-image:url(img/buttons/ma1.gif)}
.link3 { width:130px; height:40px; background-image:url(img/buttons/mu.gif); margin-left:10px; position:absolute  }
.link4 { width:130px; height:40px; background-image:url(img/buttons/mu1.gif); margin-left:10px; position:absolute  }
.link5 { width:130px; height:40px; background-image:url(img/buttons/so.gif); margin-left:20px; position:absolute  }
.link6 { width:130px; height:40px; background-image:url(img/buttons/so1.gif); margin-left:20px; position:absolute  }
.link7 { width:130px; height:40px; background-image:url(img/buttons/links.gif); margin-left:30px; position:absolute  }
.link8 { width:130px; height:40px; background-image:url(img/buttons/links1.gif); margin-left:30px; position:absolute  }
.link9 { width:130px; height:40px; background-image:url(img/buttons/forum.gif); margin-left:40px; position:absolute  }
.link10 { width:130px; height:40px; background-image:url(img/buttons/forum1.gif); margin-left:40px; position:absolute  }
.link11 { width:130px; height:40px; background-image:url(img/buttons/kontakt.gif); margin-left:45px; position:absolute1  }
.link12 { width:130px; height:40px; background-image:url(img/buttons/kontakt1.gif); margin-left:45px; position:absolute  }

--------------------------------------
sc.js
--------------------------------------
function link1(ele) {
ele.className = "link2";
ele.style.cursor = "pointer";
}
function link2(ele) {
ele.className = "link1";
ele.style.cursor = "default";
}
function link3(ele) {
ele.className = "link4";
ele.style.cursor = "pointer";
}
function link4(ele) {
ele.className = "link3";
ele.style.cursor = "default";
}
function link5(ele) {
ele.className = "link6";
ele.style.cursor = "pointer";
}
function link6(ele) {
ele.className = "link5";
ele.style.cursor = "default";
}
function link7(ele) {
ele.className = "link8";
ele.style.cursor = "pointer";
}
function link8(ele) {
ele.className = "link7";
ele.style.cursor = "default";
}
function link9(ele) {
ele.className = "link10";
ele.style.cursor = "pointer";
}
function link10(ele) {
ele.className = "link9";
ele.style.cursor = "default";
}
function link11(ele) {
ele.className = "link12";
ele.style.cursor = "pointer";
}
function link12(ele) {
ele.className = "link11";
ele.style.cursor = "default";
}
function LL(ele) {
ele.className = "LL2";
ele.style.cursor = "Pointer";
}
function LL2(ele) {
ele.className = "LL";
ele.style.cursor = "default";
}

-----------------------------------------------------
-----------------------------------------------------
-----------------------------------------------------

Das wars !

Ich hoffe ihr könnt mir helfen!

MFG

Phil

Beitrag melden

– Informationen zu den Bewertungsregeln

Bilderwechsel bei onmouseover problem im IE
scherzkeks 15.05.2006 15:08

javascript
– Informationen zu den Bewertungsregeln
Hi alle!
Ich habe ein Problem! Dies tritt allerdings nur im IE und nicht im Mozilla Firefox auf!

http://music-mg.drition.net/
Das ist der Link zu der Page!
Öffnet sie mit dem IE!
Wenn man dann oben auf die Navigations-Button geht, soll sich der Button ändern!
Das tut er per onmouseover!
Beim IE jedoch geh ich auf dfas BIld, dann zeigt er die hintergrund farbe des Div-Containers an und DANN erst das andere Bild........ und das auch noch total langsam... beim Moz.. wird alles flüßig dargestellt!

Vielleicht cachet dein Mozilla, der IE aber nicht.
Oder du hast beim Entwickeln mit Mozilla gearbeitet, sodass da sowieso vorgecachet wurde.
Wieso verwendest du fuer jeden Button eigene Bilder und benutzt nicht ein Hintergrundbild, das sich beim Hovern austauscht und schreibst den Text bzw benutzt fuer ihn ein transparentes gif?

hier ist der Code:[...]

basis.css
[...]

sc.js
function link1(ele) {
ele.className = "link2";
ele.style.cursor = "pointer";
}
function link2(ele) {
ele.className = "link1";
ele.style.cursor = "default";
}
function link3(ele) {
ele.className = "link4";
ele.style.cursor = "pointer";
}
function link4(ele) {
ele.className = "link3";
ele.style.cursor = "default";
}

[...]

function LL(ele) {
ele.className = "LL2";
ele.style.cursor = "Pointer";
}
function LL2(ele) {
ele.className = "LL";
ele.style.cursor = "default";
}

Das koenntestdu dir echteinfacher machen!
Etwas universeller sind Scripts grundsaetzlich besser.
Uebergebe doch einer universellen Funktion auch den className.
Oder machs so, wie vorgeschlagen:
Bsp:
HTML:
```
  
<a class="navibutton" href="index.php" onMouseOver="void(this.className = 'gehovert')" onMouseOut="void(this.className = 'ungehovert')">Startseite</a>  
<a class="navibutton" href="ma.php" onMouseOver="void(this.className = 'gehovert')" onMouseOut="void(this.className = 'ungehovert')">musik &amp; artists</a>  
<a class="navibutton" href="mu.php" onMouseOver="void(this.className = 'gehovert')" onMouseOut="void(this.className = 'ungehovert')">musik uploaden</a>  
<a class="navibutton" href="sonst.php" onMouseOver="void(this.className = 'gehovert')" onMouseOut="void(this.className = 'ungehovert')">Sonstiges</a>  
<a class="navibutton" href="links.php" onMouseOver="void(this.className = 'gehovert')" onMouseOut="void(this.className = 'ungehovert')">Links</a>  
<a class="navibutton" href="forum.php" onMouseOver="void(this.className = 'gehovert')" onMouseOut="void(this.className = 'ungehovert')">Forum</a>  
<a class="navibutton" href="kontakt.php" onMouseOver="void(this.className = 'gehovert')" onMouseOut="void(this.className = 'ungehovert')">Kontakt</a>  
```
CSS:
```
  
.ungehovert { background-image:url(img/buttons/ungehovert.png); color:yellow; }  
.gehovert { background-image:url(img/buttons/gehovert.png); color:brown; }  
```
Da sind sicher noch ne Menge Fehler drinne, aber wenn sie jemand findet (ich find bestimmt auch noch selbst was), wird ers wohl sagen.

Das ist natuerlich nur ein Beispiel und nicht getestet oder so.

Das wars !

Ich hoffe ihr könnt mir helfen!

Ich auch ^^

MFG

einen schoenen Montachnachmittach MNVFG noch,
scherzkeks

Phil
Beitrag melden

–
Informationen zu den Bewertungsregeln
1. Bilderwechsel bei onmouseover problem im IE
  
  scherzkeks 15.05.2006 15:21
  
  javascript
  – Informationen zu den Bewertungsregeln
  Hi alle!
  
  Hi(hatte ich vorher ganz vergessen)
  
  Die Cursor hatte ich jetzt nicht beruecksichtigt. Schreib halt einfach in die *.css unter ".gehovert" zusaetzlich "cursor:pointer;" und unter ".ungehovert" "cursor:default;"
  
  Phil
  
  scherzkeks (noch 'nen schoenen Montag undsoweiter)
  Beitrag melden
  
  –
  Informationen zu den Bewertungsregeln
  Übersicht
  
  alle Foren
  
  SELFHTML-Forum
  
  anmelden
  
  Benutzerkonto erstellen
  
  Beitrag im Thread-Baum
Bilderwechsel bei onmouseover problem im IE
Oku 15.05.2006 15:17

javascript
– Informationen zu den Bewertungsregeln
Hi alle!
Ich habe ein Problem! Dies tritt allerdings nur im IE und nicht im Mozilla Firefox auf!

http://music-mg.drition.net/
Das ist der Link zu der Page!
Öffnet sie mit dem IE!
Wenn man dann oben auf die Navigations-Button geht, soll sich der Button ändern!
Das tut er per onmouseover!
Beim IE jedoch geh ich auf dfas BIld, dann zeigt er die hintergrund farbe des Div-Containers an und DANN erst das andere Bild........ und das auch noch total langsam...

Vielleicht kannst du mal versuche die Bilder über Javascript zu Laden bevor sie angezeigt werden sollen. Etwa so:

var bild=new Array
bild[0]=new Image
bild[0].src="Url"
...

Damit sollte das auch im Internet Explorer schnell gehen

Gruß Oku
Beitrag melden

–
Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

Phil: Bilderwechsel bei onmouseover problem im IE