Mouseover utan javascript

HTML & CSS

9 svar · 462 visningar · startad av bymarie 7 sep. 2003

bymarieMedlem sedan aug. 20022 436 inlägg

Frågan7 sep. 2003 18:50#1

Går det att göra det?
Byta en bild vid mouseover utan ett javascript?
I sådana, fall.. hur?

jarvkloMedlem sedan juli 20013 378 inlägg

7 sep. 2003 20:31#2

Jupp.
Ersätt bildtaggen i länken med en omslutande div och några bakgrundsbilder i CSS för länktaggen...

Exempel:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv" lang="sv">
<head>
  <title>CSS Rollover-effekt</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
#bildomslag {  /* Denna är mest med för att "rollover"-bilden skall förladdas */
  background-image: url(testbild2.gif); 
  width:100px; height:100px; 
  padding:0;
}
a#bild { /* grundbilden */
  background-image: url(testbild.gif); 
  display:block; height:100%; width:100%; 
  text-decoration:none; /* bort med strecket under &amp;nbsp; i länken*/
}
a#bild:hover { /* samma som i #bildomslag */
  background-image: url(testbild2.gif) 
}
-->
</style>
</head>
<body>
<div>
Här kommer en bild med rollover-effekt skapad av "ren" CSS (inga scripts!):
<div id="bildomslag"><a id="bild" href=".">&amp;nbsp;</a></div>
Fiffigt va?
</div>

</body>
</html>

Provkör : http://member.webforum.nu/2241/CSSrollover.html

Idén har jag korpat från bl.a. http://www.zeldman.com/daily/0203c.shtml#cssbg

bymarieMedlem sedan aug. 20022 436 inlägg

7 sep. 2003 20:33#3

Tack så hemskt mycket!!!!

CheguelinMedlem sedan juli 2003303 inlägg

7 sep. 2003 21:41#4

Varför skulle man vilja ha en sån här lösning? Det är t ex mycket segare än en javascript-lösning.

bymarieMedlem sedan aug. 20022 436 inlägg

8 sep. 2003 06:59#5

För ett javascript mouseover kolliderar troligen med andra javascript jag har..

bassebhuMedlem sedan nov. 20016 480 inlägg

8 sep. 2003 08:13#6

bymarie skrev:

För ett javascript mouseover kolliderar troligen med andra javascript jag har..

Hur skriver du då? Det måste ju gå att lösa...

voigtann1Medlem sedan juni 20019 519 inlägg

8 sep. 2003 08:15#7

jarvklo: kan man göra en "enkel" javascript med din kod då? så man kan tex skapa en variabel av vilken bild som ska visas?

jarvkloMedlem sedan juli 20013 378 inlägg

8 sep. 2003 08:38#8

Voigtann1 > Ehm. - Hur menar du?

bymarieMedlem sedan aug. 20022 436 inlägg

8 sep. 2003 08:39#9

Bassebhu: Ska visa när jag kommer dit. :)

jarvkloMedlem sedan juli 20013 378 inlägg

8 sep. 2003 08:49#10

Cheguelin skrev:

Varför skulle man vilja ha en sån här lösning? Det är t ex mycket segare än en javascript-lösning.

Det kanske stämmer att CSS-lösningen upplevs som aningen segare - men om man t.ex. kör med flera alternativa utseenden på sidan med hjälp av "alternate stylesheets" så tycker iallafall jag att en rolloverlösning via Javascript är betydligt knöligare att underhålla eftersom man då måste in och meka i både CSS- och Javascriptfiler när man ändrar något eller lägger till en alternativ stilmall till ;)

Därmed inte sagt att det ena skulle vara "rätt" eller det andra "fel" - det finns dessutom ännu fler sätt än dessa två att göra rollovers på. :e

Frågan var om det gick med enbart CSS - och det gör det! ;)

Sedan väljer man väl ändå alltid det som är "bäst" utifrån de förutsättningar och mål man har med just den sidan man håller på med, och inte baserat på vad omgivningen för tillfället anser är "bäst" eller "coolast" ?

PEACE! :birp