[CSS] Hoe een mouse over met preload

[Verwijderd]

ok, ik werk in dreamweaver en daar heb je handige functies voor met behulp van javascript een mouse-over te maken waarvan alle afbeeldingen zijn gepreload. maar aangezien dat dat in 1 van de 2 browsers niet wil werken, zou ik een andere manier willen proberen...

theoretisch: een TD heeft een invisible background (moet al geladen staan dus), en als ik met de muis over die TD ga, moet die tevoorschijn komen.

practisch: ik krijg het niet aan de praat...

code:
td.nav001{
background-image:url(../images/navigation/0012.gif);
background-repeat:no-repeat;
visibility:hidden;
}
td.nav001:hover{
background-image:url(../images/navigation/0012.gif);
background-repeat:no-repeat;
visibility:visible;
}

[Woudloper]

Al eens gedacht om met display:none; te gaan werken?

Edit:
Kijk eens naar onderstaande topic. Dit is zeer recent en gaat ook over het :hover effect op een tabel cell.

tabel achtergrond veranderen dmv mouse over

[ Voor 62% gewijzigd door Woudloper op 29-12-2004 14:26 ]

[Verwijderd]

niet veel uit wijzer geworden.
maar dan plots dacht ik aan de bijbel bij uitstek: http://www.alistapart.com

mijn code is nu:

code:

img.004 {background: transparent;}
a.004 {background:transparent;}
a.004:hover {background-image:url(../images/navigation/0042.gif)}

*edit: pff werkt dus enkel in Internet Explorer, en het laden van de afbeeldigen duurt superlang...
http://cvision.be/navigation.htm

[ Voor 23% gewijzigd door Verwijderd op 29-12-2004 15:25 ]

[Verwijderd]

combineer

#preload {display:none;} - <div id="preload"><!--hier alle img die je wilt preloaden--></div> (zet dit bovenaan je pagina)

met

te googlen op "fast css rollovers" --> 1e link!!!

et voila

have fun

ps: feit dat images lang moeten laden ligt aan:
a/ trage host
b/ te hoge kwaliteit voor het web

oplossing:

a/zoek betere host
b/use safe for web wisely
(c/ maak een preload page)

[ Voor 38% gewijzigd door Verwijderd op 29-12-2004 16:25 ]

[Verwijderd]

Als een div (of welk element dan ook) op display:none staat, dan zullen browsers in veel gevallen images niet loaden tot het moment dat het element zichtbaar wordt gemaakt.

Je kunt de plaatjes beter onder of naast elkaar plakken en de coordinaten aanpassen voor de hover.

[BasieP]

Verwijderd schreef op woensdag 29 december 2004 @ 19:58:
Als een div (of welk element dan ook) op display:none staat, dan zullen browsers in veel gevallen images niet loaden tot het moment dat het element zichtbaar wordt gemaakt.

Je kunt de plaatjes beter onder of naast elkaar plakken en de coordinaten aanpassen voor de hover.

is dit echt zo?
ik ben zelf niet zo bekend daarmee (Gewoon nooit nodig gehad) maar laden IE en FireFox images niets als je bijv dit heb?

code:

<table>
  <tr>
    <td style="display:none">
      [img]hoi.jpg">
[/img]
  </tr>
</table>

[crisp]

Bij een background-image swap zal IE in 9 van de 10 gevallen het plaatje opnieuw van de server op willen halen. Niets vreemd, gewoon buggy behavior van IE (het is niet voor niets een oude browser)

[Verwijderd]

ik heb deze methode al eens geprobeerd, en dit was mijn resultaat: http://users.pandora.be/climbatize/port bekijk het eerst met FF en dan met IE, zoek de 10 verschillen
als er iemand mij zou kunnen zeggen waar mijn fout ligt, da mag altijd hoor begin een beetje wanhopig te worden...
heb nog nooit meegemaakt dat ie in dat geval de img herlaad hoor...
vrienden van mij gebruiken die techniek ook, maar bij hun lukt het wel in IE, dus snap ik niet echt waar mijn fout ligt... http://www.th3s3us.be/

[MarkvE]

crisp schreef op woensdag 29 december 2004 @ 20:06:
Bij een background-image swap zal IE in 9 van de 10 gevallen het plaatje opnieuw van de server op willen halen. Niets vreemd, gewoon buggy behavior van IE (het is niet voor niets een oude browser)

Vieze oplossing om dit te voorkomen; is de afbeeldingen (<img />) die worden getoond bij een :hover in een div te plaatsen en deze div op display: none; te zetten. Dit zorgt ervoor dat IE ze altijd in het cache heeft en ook gebruikt bij een :hover.

[Verwijderd]

MarkvE schreef op donderdag 30 december 2004 @ 13:09:
Vieze oplossing om dit te voorkomen; is de afbeeldingen (<img />) die worden getoond bij een :hover in een div te plaatsen en deze div op display: none; te zetten. Dit zorgt ervoor dat IE ze altijd in het cache heeft en ook gebruikt bij een :hover.

Als je je cache op "Every visit to page" hebt staan zal IE bij elke CSS/style verandering van het element of een ancestor daarvan alle background-images opnieuw laden.

[Blue-eagle]

Als display:none niet werkt, probeer dan je div absoluut te positioneren: left: -1000px, top: -1000px;

Maar, IE preload die plaatjes gewoon met de default "Temporary Internet Files" settings. Deze staat standaard op "Automatisch, " niet op "Bij elk bezoek aan een pagina". Dus als je bezoekers gewone gebruikers zijn heb je kans dat ze het nieteens merken.

De rest is het wel gewend..

[drm]

Blue-eagle:
Maar, IE preload die plaatjes gewoon met de default "Temporary Internet Files" settings. Deze staat standaard op "Automatisch, " niet op "Bij elk bezoek aan een pagina". Dus als je bezoekers gewone gebruikers zijn heb je kans dat ze het nieteens merken.

De rest is het wel gewend..

Mja... aparte redenering

Hier staat een workaround die nog schijnt te werken ook (zelf nog niet geprobeerd, maar ziet er plausibel uit ).