hover og to bilder

[klozzmajor]

Driver med en oppgave på skolen nå, hvor vi skal lage en 3 kolonners side. I høyre kolonne skal vi ha en reklamebanner, hvor vi skal bruke hoverfunksjon.

Jeg tenkte å bruke et default bilde for så å la dette bilde endres til et annet når brukeren drar muspekern over bildet? Hvordan skal jeg kode dette? Det skal ikke være noen link på bildet.

 

Takker for svar

[Stian Jacobsen]

Med Firefox og opera er dette enkelt men med IE må du bruke js..

[klozzmajor]

Med Firefox og opera er dette enkelt men med IE må du bruke js..

 

Ja det er godt mulig, men hvordan koder jeg det i css?

Endret 4. desember 2007 av coolgrev1

[arex1337]

IE støtter jo bare hover på <a>-elementet. Du kan jo bruke <a class="nolink"><img /></a>, og a.nolink { cursor: default } e.l.? Eller kan du ikke bruke <a>-elementet, selv om brukeren ikke ser forskjell?

[Anders Moen]

Se på den her: http://www.w3schools.com/js/js_animation.asp

Tror det ble riktig link...

[alletiders]

Med Firefox og opera er dette enkelt men med IE må du bruke js..

 

Ja det er godt mulig, men hvordan koder jeg det i css?

 

#reklame {

 

width: 10em;

height: 25em;

background-image: url(ettbilde.jpg);

}

 

#reklame:hover {

 

background-image: url(etannetbilde.jpg);

}

 

 

.. muligens. Har ikke testet det.

[arex1337]

Tror ikke IE6 støtter pseudoklassen hover på noe annet enn <a>-elementet.

[klozzmajor]

#rightnav a{

height: 30em;

width:10em;

text-decoration: none;

background-image: url(../bilder/bannere/lichking.jpg);

background-repeat: no-repeat;

display: block;

}

 

#rightnav a:hover{

background-image:url(../bilder/bannere/lichking_gamezone.jpg);

background-position: 0px 6em;

}

 

Gjorde det slik, og det funka greit i både IE og FF. Takker for svar folkens:)

Endret 10. desember 2007 av coolgrev1

[øl_i_tastaturet]

Anbefaler deg sterkt å ha hoverbildet i samme bilde som det vanlige. Om du ikke legger inn en preload da.

[klozzmajor]

Anbefaler deg sterkt å ha hoverbildet i samme bilde som det vanlige. Om du ikke legger inn en preload da.

 

Hvorfor det?

Hvordan vil koden se ut da?

Endret 10. desember 2007 av coolgrev1

[...............]

Hvis bredden på hvert av bildene er 50px, så slår du dem sammen og det blir 100px.

 

#lol {
  background-image: url(img/bilde.gif);
  width: 50px;
  }
#lol:hover {
  background-position: -50px;
  }

 

Ble det riktig?

Endret 10. desember 2007 av karlsn

[øl_i_tastaturet]

a#hovedsiden {
 width: 79px;
 height: 26px;
 background: url(images/hovedsiden.jpg) top no-repeat;
 }

a:hover#hovedsiden {
 background: url(images/hovedsiden.jpg) bottom;
 }

 

Sånn kjører jeg det. Da er da bilde2 i bunn av det andre. Da bare halverer du høyden i den øverste koden der.

Endret 10. desember 2007 av bjorshol

[klozzmajor]

Tusen takk for svar folkens :-)

 

Det funker fint

Endret 10. desember 2007 av coolgrev1