[Javascript] Rollover werkt niet in Opera - Softwareontwikkeling

woensdag 8 december 2004 14:31

Acties:

Verwijderd

Topicstarter

Het volgende mouseover-scriptje werkt prima in IE, maar niet in Opera.

code:

<head>
<script language="JavaScript">
contact = new Image();
contact.src = "images/icons/contact_on.gif";
</script>
</head>

<body>
<a href="contact.php" onmouseover="contact.src='images/icons/contact_on.gif';"
onmouseout="contact.src='images/icons/contact_off.gif';">
[img]"images/icons/contact_off.gif"[/img]</a>
</body>

Ik heb het probleem in W&G geplaatst omdat Opera andere scripts wel moeiteloos laat zien, en het dus blijkbaar een bugje in de code is. Alleen zie ik hem niet..

woensdag 8 december 2004 14:41

Acties:

Verwijderd

Wat dacht je van: http://wellstyled.com/css-nopreload-rollovers.html ?

woensdag 8 december 2004 14:47

Acties:

Verwijderd

Topicstarter

Tja, wat moet ik zeggen? Briljant gewoon. Bedankt!

woensdag 8 december 2004 14:53

Acties:

Genoil

Verwijderd schreef op woensdag 08 december 2004 @ 14:41:
Wat dacht je van: http://wellstyled.com/css-nopreload-rollovers.html ?

Een erg fraaie oplossing, ware het niet dat IE6 (had jij het ergens anders niet over marktaandeel?

) er niks van bakt indien de webcache uitstaat. Ik heb al in diverse (commerciele) situaties meegemaakt dat ik vanwege die bug klachten kreeg van opdrachtgevers over dat het menu (op deze manier gebouwd) knipperde, omdat er daar weer net iemand met IE6/cache-uit zat te testen.

Met andere woorden, fraai maar een no-go als je geen risico op zeurende klanten wilt lopen...het zal de meesten aan hun reet roesten hoe fraai de html/css van hun site werkt..als de prijs daarvoor de kans op een knipperbende is...

woensdag 8 december 2004 15:02

Acties:

Verwijderd

Topicstarter

En met een 'knipperbende' bedoel je dat het even duurt voordat de rollover is geladen, zodat het nogal schokkerig overkomt?

woensdag 8 december 2004 15:04

Acties:

Verwijderd

Topicstarter

Ik merk trouwens net dat het scriptje uit mijn startpost het wel in Opera doet als ik het preloadgedeelte verwijder...

woensdag 8 december 2004 15:05

Acties:

Genoil

Verwijderd schreef op woensdag 08 december 2004 @ 15:02:
En met een 'knipperbende' bedoel je dat het even duurt voordat de rollover is geladen, zodat het nogal schokkerig overkomt?

Eh ja, en dan bij elke rollover, niet alleen de eerste. Let wel dat het gros van de IE6 users die cache fijn aan heeft staan. Maar zoals ik zei zijn er altijd net weer die mensen (vooral in de sector) die de cache fijn uitzetten en dan gaat het mis.

woensdag 8 december 2004 15:08

Acties:

crisp

Devver

Pixelated

Verwijderd schreef op woensdag 08 december 2004 @ 15:04:
Ik merk trouwens net dat het scriptje uit mijn startpost het wel in Opera doet als ik het preloadgedeelte verwijder...

Dat komt omdat je zowel een element met name="contact" hebt, en dat ook als global in je script gebruikt - dat bijt elkaar.
Verder is het gewoon netter om je image via document.images['name'] of mbv document.getElementById aan te spreken (en dan met een id ipv een name attribuut).

Als je de mousover op de image zet kan je zelfs met het 'this' keyword werken en heb je feitelijk helemaal geen name of id meer nodig.

[ Voor 12% gewijzigd door crisp op 08-12-2004 15:09 ]

Intentionally left blank

woensdag 8 december 2004 15:09

Acties:

gsteen

Om het door middel van JavaScript op te lossen zou je het volgende kunnen doen:

Vervang:

code:

1 2	<a href="contact.php" onmouseover="contact.src='images/icons/contact_on.gif';" onmouseout="contact.src='images/icons/contact_off.gif';">

door:

code:

1 2	<a href="contact.php" onmouseover="document.images['contact'].src='images/icons/contact_on.gif';" onmouseout="document.images['contact'].src='images/icons/contact_off.gif';">

edit:
net te laat. crisp was eerder.

[ Voor 42% gewijzigd door gsteen op 08-12-2004 15:12 ]

"In theory, there is no difference between theory and practice. But, in practice, there is."

woensdag 8 december 2004 15:11

Acties:

crisp

Devver

Pixelated

Genoil schreef op woensdag 08 december 2004 @ 15:05:
[...]

Eh ja, en dan bij elke rollover, niet alleen de eerste. Let wel dat het gros van de IE6 users die cache fijn aan heeft staan. Maar zoals ik zei zijn er altijd net weer die mensen (vooral in de sector) die de cache fijn uitzetten en dan gaat het mis.

Niet alleen het uitzetten van de cache geeft problemen in IE. Ook het swappen van een background, of zelfs maar het aanpassen van een background-position zorgt er al voor dat IE het plaatje weer helemaal opnieuw gaat ophalen, en dat ongeacht je caching settings.
Helaas jammer dat dat product zo'n groot marktaandeel heeft, maar het is wel een antiek stuk rommel...

Intentionally left blank

woensdag 8 december 2004 15:14

Acties:

crisp

Devver

Pixelated

Het beste is trouwens nog om naar je preloaded object te verwijzen:

JavaScript:

1 2	var contact_on = new Image(); contact_on.src = "images/icons/contact_on.gif"; var contact_off = new Image(); contact_off.src = "images/icons/contact_off.gif";

HTML:

1
2
3

<a href="foo.html"><img src="images/contact_off.gif"
  onmouseover="this.src=contact_on.src" onmouseout="this.src=contact_off.src"
  alt="" /></a>

Intentionally left blank

woensdag 8 december 2004 15:15

Acties:

Verwijderd

Een erg fraaie oplossing, ware het niet dat IE6 (had jij het ergens anders niet over marktaandeel? ) er niks van bakt indien de webcache uitstaat. Ik heb al in diverse (commerciele) situaties meegemaakt dat ik vanwege die bug klachten kreeg van opdrachtgevers over dat het menu (op deze manier gebouwd) knipperde, omdat er daar weer net iemand met IE6/cache-uit zat te testen.

Als ik het me goed herinner zijn hier diverse "workarounds" voor? Op die pagina staat bijvoorbeeld onder "Update" een oplossing die hiermee om zou moeten kunnen gaan. Gewoon het achtergrondplaatje op zowel het UL element als het A element zetten.

woensdag 8 december 2004 16:23

Acties:

Genoil

Verwijderd schreef op woensdag 08 december 2004 @ 15:15:
[...]
Als ik het me goed herinner zijn hier diverse "workarounds" voor? Op die pagina staat bijvoorbeeld onder "Update" een oplossing die hiermee om zou moeten kunnen gaan. Gewoon het achtergrondplaatje op zowel het UL element als het A element zetten.

Elke A met een background-image gaat lopen bokken, ongeacht of je er een :hover selector op zet of niet. Ik heb zelf ooit een HTCtje geschreven welke het probleem definitief (met de botte bijl) de wereld uit helpt. hier (kan nog wel wat efficienter gemaakt worden)

@crisp: ik zelf heb met cache-aan echt nergens last van maar heb van andere IE6 gebruikers ook gehoord dat ze er last van hadden met cache-aan.

woensdag 8 december 2004 16:26

Acties:

crisp

Devver

Pixelated

Genoil schreef op woensdag 08 december 2004 @ 16:23:
[...]

@crisp: ik zelf heb met cache-aan echt nergens last van maar heb van andere IE6 gebruikers ook gehoord dat ze er last van hadden met cache-aan.

Dat kan heel goed. Er zitten nog wel wat caching-related bugs in IE, en helemaal code-related zijn die niet. Net als de view-source bug zeg maar die opeens spontaan kan gaan optreden, en waar je niet meer van af komt (alleen tijdelijk door je cache te legen).

Intentionally left blank

Pagina: 1

Reageer