dubbla image rollovers med css?

Tråden skapades och har fått 2 svar. Det senaste inlägget skrevs .
1

hej!

Jag håller på och gör en overlay på en myspacesida, och har stött på ett problem. Vill göra en rollover som visar två images iställt för en, men det måste vara i css och inte med javascript.. Jag trixade till en rolloverkod jag hittade nånstas och kom på en lösning som inte är så bra, men den visar iaf ungefär hur jag vill ha det.

Hittade en sida som har ett exempel på vad jag vill göra, men är väldigt novis när det kommer till html och css.

Här är sidan med exemplet på rollovern: http://www.motuweb.com/techstuff/2x_css_rollover_demo.htm

Här är sidan jag arbetar på http://www.myspace.com/jerrystestsida

Om nån kunde trixa ihop css koden på sidan med exemplet åt mig vore jag evigt tacksam!

Mvh Jerry

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>

en annan sak, i firefox så blir det en border, kant, runt den stora bilden.. vaarför då? hittar ingenstans i koden som ändrar på det?

Edit: löste border problemet efter lite googlandes, la till border=0 så försvann kanten..

Senast redigerat 2007-08-24 12:24
1
Bevaka tråden