Background image med hover? (CSS & HTML)

[AnaXyd]

Heisann!

 

Jeg tenkte å lage meg noe som jeg syntes virket litt kjekt. Planen er å ha mange store bilder(som jeg vil slippe å resize), som skal brukes som background image i en div/span (eller hva som passer best). Jeg er avhengig av å ha en :hover på dette.

 

Litt av koden er som følger:

 

#pic  {
 background: url(images/bg.pute.produkt.png) center left no-repeat;
 width: 150px;
 height: 60px;
 border:1px solid #E3E3E3;
 padding:2px;
}

#pic :hover{
border-color:#FF6600;
}

 

Som dere ser, er det ett stor bilde jeg har valgt å bruke, (som ved klikk åpnes opp i en lightbox i full størrelse). Bildet flyttes til center og left, for at vi skal kunne se litt av bildet.

 

Jeg har også valgt å ha en border på dette-

 

Som dere ser trenger jeg en hover på dette bildet, men veit ikke helt hvordan. Hvordan skal jeg få til den hoveren jeg har laget istand som #pic :hover ?

[semafor]

Vel, :hover støttes kun på a-elementer i IE6. Så da må bildet være en a.

 

Ellers blir det javascript.

 

a#pic:hover { border-color:#f60; }

 

document.getElementById("pic").onmouseover = function() {
this.className="hover";
}

 

Eller noe sånt.