[CSS/JAVASCRIPT] Plaatjes flikkeren bij onmouseover

[intermusic]

Ik heb een javascript die de class veranderd van een TD bij een onmouseOVER en onmouseOUT.
De class van de TD past een achtergrond-plaatje toe bij de onmouseOVER en gaat weer terug naar voorgaande staat bij de onmouseOUT.

Javascript:

code:

function changeHClassAan(myElementID) {
    document.getElementById(myElementID).className = "tdhitemaan";
}
function changeHClassUit(myElementID) {
    document.getElementById(myElementID).className = "tdhitemuit";
}

HTML

code:

<td class="tdhitemuit" id="hmenuitem1" onmouseover="changeHClassAan('hmenuitem1')" onmouseout="changeHClassUit('hmenuitem1')"><p><a href="#">HOME</a></p></td>
<td class="tdhitemuit" id="hmenuitem2" onmouseover="changeHClassAan('hmenuitem2')" onmouseout="changeHClassUit('hmenuitem2')"><p><a href="#">PROFIEL</a></p></td><td><IMG src="images/menu_tussen.gif" width=1></td>
<td class="tdhitemaan" id="hmenuitem3"><p><a href="#">DIENSTEN</a></p></td><td><IMG src="images/menu_tussen.gif" width=1></td>

CSS:

code:

.tdhitemuit a {
    font-size:9pt;
    font-weight: bold;
    TEXT-DECORATION: none;
    color: #ffffff;
}
.tdhitemuit p {
  margin: 0px 12px 0px 12px; /* top, right, bottom,left */
}
.tdhitemaan {
    BACKGROUND: url(../images/menu_aan.gif) no-repeat;
}
.tdhitemaan a {
    font-size:9pt;
    font-weight: bold;
    TEXT-DECORATION: none;
    color: #ffffff;
}
.tdhitemaan p { /* zorg ervoor dat tekst 2 pixels naar beneden en naar rechts gaat*/
    margin: 2px 10px 0px 14px; /* top, right, bottom,left */

Als ik de website in IE 6 bekijk flikkert het achtergrond-plaatje als ik er met de muis overheen ga.
Wanneer ik met de muis over de TD zelf zit en dan over de tekst (link) ga, dan flikkert het achtergrond-plaatje ook. Ook de reeds actieve link (DIENSTEN) flikkert.

Om een voorbeeld te zien kijk op: http://www.ditkanbeter.nl/nuis/

Als ik de website lokaal bekijk is er niets aan de hand.
Ook als ik de website bekijk met de nieuwste versie van Firefox is het prima.

Een preload met een hidden div met het betreffende achtergrond-plaatje als achtergrond, wil niet baten.
Ik vermoed dat het toch te maken heeft met het niet preload van het achtergrond-plaatje.

[TeeDee]

Als je de verschillende states nu eens in 1 plaatje stopt?
Zie als voorbeeld:

Vervolgens in de diverse styles de afbeelding laten verschuiven.
onderstaande css dient alleen ter verduidelijking

Cascading Stylesheet:

.hoverstate {
    background-image: url(../images/menu_aan.gif);
    background-position:0 0;
}
.regularstate {
    background-image: url(../images/menu_aan.gif); 
    background-position:100px 0; /*pas hier de background-position aan*/
}

Meer informatie op: http://www.alistapart.com/articles/sprites

[ Voor 52% gewijzigd door TeeDee op 15-04-2008 14:17 ]

[MueR]

De methode die jij (TS) gebruikt laat IE eerst plaatjes inladen, waardoor je dat flikkerende effect krijgt. De methode die TeeDee vermeld is vanuit dat oogpunt beter omdat je direct het plaatje geladen hebt bij pageload.

Verder vind ik je JS een beetje apart.. Dit werkt namelijk ook, maar zonder extra JS functies.

HTML:

<td class="tdhitemuit" id="hmenuitem1" onmouseover="this.className = 'tdhitemaan';" onmouseout="this.className = 'tdhitemuit';">
    <p><a href="#">HOME</a></p>
</td>

Verder zou CSS hiervoor gewoon beter zijn. Imho is dit ondersteunen op IE6 nodeloos veel werk steken in relatief weinig functionaliteit. Daarbij lijkt mij dit een menu, waar een table absoluut niet noodzakelijk is. Je wil voor menus werken met ULs of OLs.

[ Voor 25% gewijzigd door MueR op 15-04-2008 14:19 ]

[intermusic]

De methodes van jullie beiden heb ik toegepast.
Volgens mij inderdaad een betere methode met twee "states" in één plaatje.
Ook was de aparte functie in javascript overbodig

Maar... Dit verhaal kon nog wel eens een interessante wending krijgen!

Wanneer ik IE 6.0 zo instel dat er iedere keer wordt gecontroleerd op nieuwe versie van pagina's (zie menu-stappen) dan gaan ze flikkeren.
Stel ik dit in op "Automatisch" dan is het geflikker (raar woord ook) weg.

Misschien wel logisch, omdat het ook wel aangeeft dat er ALTIJD moet worden gecontroleerd moet worden op een nieuwe versie van pagina's, zelfs bij veranderingen dus...

Denken jullie dat het de moeite waard is, uit te zoeken hoe ik dit kan "omzeilen", of kan ik er vanuit gaan dat het gros deze instelling op automatisch heeft staan

Ik stel dit altijd in op "Bij elk bezoek aan een pagina" omdat het surfen naar mijn inziens dan altijd sneller gaat.

Menu-stappen:
Extra -> Internet-opties
Tabblad "Algemeen" -> knop "Instellingen"
Wanneer moet er op nieuwe versies van pagina's worden gecontroleerd?
"Bij elk bezoek aan een pagina"
of
"Automatisch"

[crisp]

intermusic schreef op dinsdag 15 april 2008 @ 22:38:
Ik stel dit altijd in op "Bij elk bezoek aan een pagina" omdat het surfen naar mijn inziens dan altijd sneller gaat.

Dat is dan een verkeerde perceptie omdat het surfen bij die instelling juist per definite langzamer gaat omdat voor elke resource een roundtrip naar de server gemaakt moet worden alvorens een eventueel gecachede versie op te lepelen...

Het 'flikkeren' bij het switchen van background(-properties) in IE6 is overigens een bug (cq verkeerde default interne setting ), te verhelpen door dit op te geven in javascript:

JavaScript:

/*@cc_on
    try { document.execCommand('BackgroundImageCache', false, true); }
    catch(e) {}
@*/

(of op een andere manier, bijvoorbeeld mbv een behaviour in CSS)

[intermusic]

@crisp:
You are my Hero! (Voor vandaag in ieder geval )

Ik heb de volgende code simpelweg in de HEAD gezet van mijn pagina als volgt:

HTML:

<script type="text/javascript">
 <!--
    try { document.execCommand("BackgroundImageCache", false, true);}
    catch(err) {}
  //-->
</script>

Weg geflikker bij de instelling "Bij elk bezoek aan een pagina" of "Automatisch".
Dank u!

[intermusic]

Ik heb toch nog een vaag dingetje.

Vette tekst veranderd licht bij onmouseover

Heeft eigenlijk niet zoveel te maken met dit topic dus heb er een ander topic van gemaakt: