Gå till innehåll
Just nu i M3-nätverket

css rollovers


Jerry

Rekommendera Poster

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...

 

detta är koden 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/pictures.png"'>http://www.fileden.com/files/2006/8/17/172266/pictures.png");

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/emilyknapp.jpg"'>http://www.fileden.com/files/2006/8/17/172266/emilyknapp.jpg") 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/storbild1.png"'>http://www.fileden.com/files/2006/8/17/172266/storbild1.png" alt="" width="606" height="216" /></a></li>

 

</ul>

</div><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/pictures.png");

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/emilyknapp.jpg") 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/storbild1.png" alt="" width="606" height="216" /></a></li>

 

</ul>

</div>

Länk till kommentar
Dela på andra webbplatser

  • Svars 53
  • Created
  • Senaste svar

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

Länk till kommentar
Dela på andra webbplatser

Arkiverat

Det här ämnet är nu arkiverat och är stängt för ytterligare svar.




×
×
  • Skapa nytt...