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?