ok så jag har klurat lite med koden från exempel sidan. har lyckats så att jag får en bild, som när jag gör mouseover så visar den en annan bild på ett annat ställe, utan buggar denna gången.
Dock så får jag inte en extra bild att visas på jälva rollovern, vilket jag i "värsta" fall kan leva utan.
Men, en sak, kan inte klura ut positioneringen, själva rolloverbakgrundsbilden, pictures i detta exemplet är absolut positionerad, så att 0px 0 px gör att den hamnar längst upp i vänstra hörnet, men den stora bilden, den som visas vid rollover, är positionerad efter den lilla, vill ha den stora positionerad efter själva layouten...
kod jag har so far:
<style type="text/css">
.nav ul{
margin:0;
padding:0;
list-style: none;
}
.nav li {
background-image: url("http://www.fileden.com/files/2006/8/17/172266...");
height:172px;
width: 30px;
position: absolute;
top: 100px;
left: 100px;
background-repeat: no-repeat;
}
.nav a {
height:20px;
width: 172px;
}
.
.nav a:hover {
background: url("http://www.fileden.com/files/2006/8/17/172266...") no-repeat;
}
.nav a img {
width: 606px;
height: 216px;
position: absolute;
top: 200px;
left: 500px;
visibility: hidden;
}
.nav a {
padding-top: 0;
padding-bottom: 0;
padding-right: 10px;
display: block;
line-height: 80px;
}
.nav li {
height:20px;
width: 172px;
}
.nav a:hover img {
visibility:visible;
}
</style>
<div class="nav">
<ul>
<li><a href="LINK HERE"><img src="http://www.fileden.com/files/2006/8/17/172266..." alt="" width="606" height="216" /></a></li>
</ul>
</div>