Jerry Postad 24 augusti, 2007 Författare Share Postad 24 augusti, 2007 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 More sharing options...
Jerry Postad 24 augusti, 2007 Författare Share Postad 24 augusti, 2007 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 More sharing options...
Jerry Postad 24 augusti, 2007 Författare Share Postad 24 augusti, 2007 såg att jag postat dubbel kod två inlägg upp.. sorry för det. Länk till kommentar Dela på andra webbplatser More sharing options...
Jerry Postad 24 augusti, 2007 Författare Share Postad 24 augusti, 2007 löste border problemet efter lite googlandes, la till border=0 så försvann kanten.. Länk till kommentar Dela på andra webbplatser More sharing options...
Rekommendera Poster
Arkiverat
Det här ämnet är nu arkiverat och är stängt för ytterligare svar.