opi fyrir 17 árum, 6 mánuðum Fjöldi lestra: 418

Rollover...

Ég er að nota rollover á síðu sem ég er að gera og nota bara einfalt css til þess.

En browserinn loadar ekki “rollover” myndinni fyrr en maður fer með músina yfir takkann. Hvernig get ég þvingað browserinn til að loada þessum myndum strax, á meðan hann loadar öllum hinum?

Brainiac fyrir 17 árum, 6 mánuðum

Trikkið er að láta báðar myndirnar, þeas. venjulegu og hover-myndina vera í einni.

Gefum okkur að þú sért með link sem er 20px hár og bgmyndin endurtekur sig. Þú býrð þá til eina mynd sem er 40px á hæð og 1px á breydd (nomal status fyrstu 20pixlana og hover seinni 20)

Síðan notar þú background-position til að segja vafranum að þegar músin er yfir linknum þá eigi myndin að byrja í 20 pixlum. Þetta væri hægt að endurtaka nokkrum sinnum og bæta við tx. focus, annari mynd þegar linkurinn er með ákveðinn class og svo framvegis.

CSSið er sem sagt svona:

a {
  [url=http://www.w3schools.com/css/pr_background-image.asp]background-image[/url]: url(bakgrunnsmynd.gif);
  [url=http://www.w3schools.com/css/pr_background-repeat.asp]background-repeat[/url]: repeat-x; /* endurtaka myndina bara til hliðanna */
  [url=http://www.w3schools.com/css/pr_background-position.asp]background-position[/url]:  0 0; /* Default þannig þú þyrftir ekki að skrifa þetta */
  height: 20px;  
}
a:hover {
  background-postion: -20px 0; /* Myndin byrjar 20px fyrir ofan linkinn og færist þar með 20px upp þannig að þá kemur "hin myndin" */
}

hægt er að stytta öll bg propertyin í eitt sem er styttra og fallegra:
background: url(mynd.gif) -20px 0 repeat-x;

Fyrra álit

Amon fyrir 17 árum, 6 mánuðum

Eða hafa báðar myndir á sama stað, en sú efri er falinn. Svo a:hover sem visibility modifier. ^^

Fyrra álit

krsvans fyrir 17 árum, 6 mánuðum

Þetta er svo mikið vesen. Annaðhvort að nota javascript sem er mun algengari

<script language = javascript>
//Athuga hvort browserinn styðji javascript
if (document.images) 
{
   mynd1 = new Image();
   mynd1.src = "nafn myndar hér";
}
</script>

eða eins og var nefnt hér áður css sem er sniðugara því margir óvirkja javascript, þá mæli ég með að búa til lítinn css klasa og merkja þær myndir sem á að preloada honum.

.faldarimg{display:none;}

svo seturu myndirnar inní kóðann á síðunni ásamt class=“faldarimg”.
Og hafðu þær við hliðiná upprunalegu rollover myndinni, svo þær loadist á sama tíma.

Fyrra álit

Brainiac fyrir 17 árum, 6 mánuðum

Það að nota CSS finnst mér mun þægilegra.. það er styttra, einfaldara, fallergra og virkar alltaf JS virkar bara þegar það er kveikt á því og mér finnst það alveg rosalega ljótt í kóðanum

Fyrra álit

Rusty fyrir 17 árum, 6 mánuðum

Ef ég man rétt þarf einnig að vera float: left; svo A'ið fari á eftir height tagginu.

Og svo finnst mér persónulega að láta background-position vísa bara á top og bottom.

Fyrra álit

Brainiac fyrir 17 árum, 6 mánuðum

ahh.. nei það þaf að vera display: block; (getur samt verið að float virki líka en ég hef ekki prófað það)

En já, ég mundi nota top og bottom venjulega en ég vildi sýna þetta svona út af því að þá er auðveldara að bæta við fleiri myndum

Fyrra álit

Rusty fyrir 17 árum, 6 mánuðum

display: block; segirðu. Enn sniðugt. float: left hefur alltaf verið að valda mig vandræðum ef ég vil ekki hlutinn vinstra megin.

Fyrra álit

Rusty fyrir 17 árum, 6 mánuðum

http://www.hugi.is/vefsidugerd/articles.php?page=view&contentId=2884599#item2916278

Fyrra álit

opi fyrir 17 árum, 6 mánuðum

Ahh, þarna kom það, virkar fullkomnlega.

Fyrra álit

Vefsíðugerð

Vefsíðugerð

Ofurhugar

Stjórnendur

Hverjir eru inni

Korkar - Vefforritun

Rollover...

Dýr

Dægurmál

Fræði

Leikir

Lífið

Lífsstíll

Margmiðlun

Menning

Skjár

Sport

Tónlist

Tækni

Vélar

Hugi