webForumDet fria alternativet

Visa större bild

HTML & CSS

1 svar · 627 visningar · startad av tanten

Medlem sedan nov. 20051 596 inlägg
Frågan#1

Jag håller på att testa med att visa större bild med hover.
Nu har jag kommit så här långt

<div id="bild">
<p><a class="ov" href="#nogo">
   <img src="bilder/yellow.jpg" alt="Yellow Bird" />
<img class="large"  src="bilder/yellow.jpg" alt="Yellow Bird" />
</a>...</p> och många sådan <p> på sidan

Det fungerar precis som jag vill i FF med denna css

#bild{position:relative; float: left;}
#bild a.ov, #bild a.ov:visited{display:block; width:170px; height:200px; text-decoration:none; border:0;}
#bild a img {border:0;}
#bild a.ov:hover {text-decoration:none; background-color:#8c97a3; color:#000;}
#bild a .large {display:block; position: absolute; width:0; height:0; border:0; top:0; left:0;}
#bild a.ov:hover .large {display: block; position:relative;  width:300px; height:400px; margin: -150px 0 0 -100px;border: 5px double #ccc;}

För att det ska fungera i IE6 har jag försökt med att lägga till

* html #bild p a.ov:hover .large {position:absolute; top:3em; left:3em;}

Och då får jag åtminstone IE att låta bli att flytta på allt innehåll på sidan. Men jag kan inte räkna ut hur jag ska få den stora bilden att visa sig i förhållande till den lilla bilden i stället för till sidans top.
Någon som kan ge tips på hur man kan göra?

Medlem sedan nov. 20051 596 inlägg
#2

Tror jag löste det med att lägga till

* html #bild a.ov:hover { position: relative; }

Får se nu vad de andra webläsarna tycker :-)

253 ms totalt · 4 externa anrop · v20260731065814-full.1dc6f849
120 ms — deklarationer (db)
0 ms — hämta statistik (cache)
130 ms — hämta tråd, inlägg och bilagor (db)
119 ms — ändringar (db)