8 svar · 446 visningar · startad av smyken
Hej
Sitter och exprimenterar lite med css och mozilla (som ju klarar w3c-standarna rätt bra). Kom på att det borde vara rätt lätt att göra en img-rollover.
Tanken är att en bild ligger i en vanlig img-tagg och sen med en hover-regel lägga en annan bild ÖVER den.
För att det ska fungera så får img-taggen z-index 1 och hover-bilden z-index 2 (hoverbilden läggs ut med hjälp av egenskapen background).
<html>
<head>
<style>
img {
position: absolute;
z-index: 1;
}
img:hover {
position: absolute;
z-index: 2;
background: url('bildover.png') no-repeat;
}
</style>
</head>
<body>
<img src="bild.png" />
</body>
</html>
Detta funkar till den grad att hover-bilden visas men BAKOM img-taggens bild. Varför? Den borde ju lägga sig ovanpå den då hoverbilden har högre z-index...
Jag vet att detta inte kommer att fungera i IE men det är mest ett försök. Kanske kan Deans IE7-script lösa det problemet....
Hej,
Jag har inte riktigt svar på din fråga. Men det här är ett annat sätt att göra det på som även fungerar i IE.
html
<div id="img-rollover"><a href=""></a></div>
css
#id img-rollover {
display:block;
width:100%;
height:100%;
}
#img-rollover
{
background-image: url(bild.png);
background-repeat: no-repeat;
width: 10px;
height: 10px;
overflow:hidden;
}
#img-rollover a:hover {background-image: url(bildover.png);}
Det är ju ett och samma element, då blir det meningslöst att trixa med z-index. Vid hover får <IMG> z-index: 2 istället för 1. Bilden som ligger i <IMG> ligger ju där den ligger. Det enda som händer är att <IMG> får en bakgrundsbild...som alltså ligger i bakgrunden. Förstår du? :)
Om du absolut måste använda <IMG> elementet så får du nog lägga in ett extra element i html-koden på samma position och dölja det med css, alt lägga det bakom den andra bilden. DÅ kan du använda z-index.
Tänk på att du kan använda ett annat element, t.ex. <A> (där hover stöds av IE) och bara växla bakgrundsbilden med a:hover. Fast då ska det ju vara en länk såklart.
*Slår mig för pannan* x( Så klart! Det är ju samma element... Borde jag kunnat räkna ut. Jag förstår precis... Tack för era snabba svar.
Jag känner till oHLLes lösning (eller varianter på det) men då försvinner ju det element som så att säga är till för just bilder ... Det är synd att det inte går att lösa med (bara) ett img-element. Jag tycker det blir semantiskt mest rätt då. Och att använda två img-element för att visa (semantiskt) samma bild känns inte heller bra...
img:hover { content:url(foo.png); }
Att det (vad jag vet) bara funkar med Opera är en annan femma... ;)
Ja, så ska det se ut.. Överhuvudtaget verkar "content" vara en användbar egenskap. Tyvärr verkar inte IE7 få stöd för den...
http://blogs.msdn.com/ie/archive/2005/07/29/445242.aspx
smyken skrev:
Och att använda två img-element för att visa (semantiskt) samma bild känns inte heller bra...
Det beror ju på. Om hover bilden är intressant ur innehållssynpunkt så ska den ligga i en egen <IMG> om det nu är två olika bilder man vill visa.
Om bilderna är rubriker i en meny så borde dom vara bakgrundsbilder i en länk, <A>, eftersom dom är layout snarare än innehåll.
Det kanske finns specialfall när man vill dölja bilden vid hover och visa en annan bild som föreställer samma sak. :OO
Det beror ju på. Om hover bilden är intressant ur innehållssynpunkt så ska den ligga i en egen <IMG> om det nu är två olika bilder man vill visa.
Håller helt med. Inget att säga.
Om bilderna är rubriker i en meny så borde dom vara bakgrundsbilder i en länk, <A>, eftersom dom är layout snarare än innehåll.
Nja, håller inte med helt. Jag brukar tänka mig en "prator" som läser upp elementen och sedan elementens innehåll. I så fall kommer "pratorn" inte att läsa upp några länkrubriker då de bara innehåller bakgrundsbilder. Möjligtvis kan man ha både och, dvs en textlänk som göms under bakgrundsbilden (nån sorts fir).
Det kanske finns specialfall när man vill dölja bilden vid hover och visa en annan bild som föreställer samma sak.
Specialfall o specialfall... Jag vet inte... men det kan ju vara en visuell återkoppling som visar att "här kan du göra något", samma som man gör vid textlänkar med a:hover, typ understrykning. Hoverbilden gör ingen skillnad på innehållet utan är bara en "grafisk finess".
Kan ni kommentera denna rollover metoden? Tack.