Tak for de venlige og hurtige svar på mit indlæg vedr. det
"klassiske" problem med java-mouseover, der ikke virker i visse
browsere.
Som foreslået af Erik Ginnerskov prøvede jeg straks tricket med
at bypasse preload ved at gemme billederne i en skjult div. Men
den hoppede min browser ikke på (IE6/WinXP i standardopsætning).
Den insisterede fortsat på at hente hver enkelt gif helt ude på
serveren ved hver eneste mouseover.
Men så blev jeg stædig, og efter at have brugt et par sene
aftentimer på forskellige nær-ved-og-næsten-forsøg, nåede jeg
frem til en løsning, som jeg faktisk tror er skudsikker og
universelt anvendelig. Og så virker den helt uden preload og
script i HEAD-feltet...!!
Der er vel nærmest tale om en CSS-løsning, som man kunne kalde
SKJUL OG VIS, og princippet er såre enkelt. I stedet for at
SKIFTE billede ved mouseover SKJULER man simpelthen billede nr. 2
direkte under billede nr. 1. Når musen så kører hen over linket,
lader man onMouseOver kalde en klassifikation i stylesheetet, der
"aflyser" billede nr. 1 og i samme splitsekund VISER billede nr.
2. Så nemt er det.
Jeg har valgt at illustrere princippet med en sort og en gul gif
som hhv. billede nr. 1 og 2. Den sorte gif (billede nr. 1) ligger
som et helt normalt <img>-tag i selve linket. Den gule gif
(billede nr. 2) er lagt ind i CSS-koden som et baggrundsbillede i
den div, der omslutter linket.
Begge billeder er således aktive fra det øjeblik, websiden er
downloadet. Billede nr. 2 er blot skjult, indtil musen kører hen
over billede nr. 1. Ergo nul preload.
Koden stilles hermed til rådighed for de mange, der
tilsyneladende har været ved at gå op i sømmene over det samme
problem som mig:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Mouseover demo</title>
<meta name="Generator" content="Stone's WebWriter 4"></meta>
<meta http-equiv="content-type" content="text/html;
charset=iso-8859-1" />
<meta name="author" content="Michael von Bülow" />
<style type="text/css">
a {
display: block;
width: 100px;
height: 100px;
}
div#linkdiv {
background: url(gulgif.gif) no-repeat;
}
a.hover img {
display: none;
}
</style>
</head>
<body>
<div id="linkdiv">
<a class="link" href="enwebside"
onMouseOver="this.className='hover';"
onMouseOut="this.className='link';">
<img src="sortgif.gif" height="100" width="100" border="0"
/></a>
</div>
</body>
</html>
Klik her for at se det virke i praksis:
http://web-wise.dk/testside2.html
Jeg forventer ikke at få Nobel-prisen, men jeg må indrømme, at
jeg som relativt grøn web-nørd var en smule euforisk over min
"opfindelse" i aftes.
I eksemplet har jeg ladet de to giffer være lige store, men det
er ingen forudsætning. I de fleste tilfælde vil det selvfølgelig
være mest praktisk, hvis billede nr. 1 dækker helt af for billede
nr. 2 (og ikke er transparent!), men det kan man som regel klare
ved at give billede nr. 1 en større "bagplade" i samme farve som
sidens baggrund. Omvendt kan man også lade billede nr. 1 være et
lille udsnit af billede nr. 2, sådan som jeg har gjort i min
piano-grafik:
http://web-wise.dk/testside.html
Indtil i går kunne klaveret kun spille ultralangsomme menuetter,
men nu kan det klare selv de hurtigste Chopin-kadencer..!
Piano-eksemplet demonstrerer også, at SKJUL OG VIS-princippet
sagtens kan bruges, når man har flere links på stribe som i
f.eks. menuer. Den eneste ekstra omkostning i html'en er, at
hvert link skal lægges ind i sin egen div, som så kan nummereres
fortløbende. Til gengæld sparer man som sagt både preload og
javascript i HEAD - for ikke at tale om endeløse ærgrelser, når
skidtet ikke virker.
mvh. Michael
--
Vil du lære at kode HTML, XHTML, CSS, SSI eller ASP?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! =>
http://www.html.dk/tutorials