hover effekt

[galskapen]

lurte på om noen kunne fortelle meg hvordan man lager en hover effekt med to bilder hvor man bruker sånn OnMouseover og OnMouseout..

(emne opprettet grunnet n00bish aktige evner av meg på dette området)

[Cucum(r)]

Arve har en fin tutorial på dette, UTEN bruk av javascript

[magikern]

glem først at du har hørt ordene onmouseover og onmouseout,

 

så kan du starte med å lese nøye igjennom http://www.alistapart.com/articles/slidingdoors

 

før du så leser nøye igjennom

 

http://www.alistapart.com/articles/slidingdoors2

 

da ender du opp med all kunnskap du trenger for å lage den effekten...

[galskapen]

jeg synes det blir litt rart med arne sin måte, fordi man har vel gjerne flere bilder enn en. må man lage mange sånne stilgreier for hver link da?

eller har jeg ikke forstått?

 

edit: leif og glemte å si at det gjalt linker her

Endret 18. mai 2004 av galskapen

[Zethyr]

Det er vel ikke den anbefalte metoden, men tatt ut fra hodet:

<div id="bilde" style="background-image: url(bilde1.jpg);" onMouseOver="document.getElementById('bilde').style.background-image = 'url(bilde2.jpg)' "

Jeg har ikke testet denne koden enda.

Men dog; for mousovers i f.eks. en meny bør man bruke pixy's brilliant rollovers (no preload).

Aberet med dette er at IE selvfølgelig bare støtter :hover på a-elementer, og defor kan man ikke gjøre denne typen rollovers på samme måte, og samtidig opprettholde semantisk korrekt kode.

Endret 18. mai 2004 av Zethyr

[Zethyr]

da ender du opp med all kunnskap du trenger for å lage den effekten...

På a-elementer...

Se avatar, og ta den gjerne i bruk; det er nemlig IE som har skylden for at :hover ikke fungerer på div og alt annet morsomt...

edit: f.eks. Javascripting er nødvendig for at følgende side skal fungere optimalt i IE:

http://www.csszengarden.com/?cssfile=/089/089.css&page=0

Her bruker han :hover på divs og IE reagerer ikke

Endret 18. mai 2004 av Zethyr

[galskapen]

fikk ikke linken til pixy til å funke

[Zethyr]

fikk ikke linken til pixy til å funke

http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/

 

skal være slik... Jeg kom inn på microsft sine sider i stad

For å komme inn på sidene første gangen skrev jeg bare 'pixy's brilliant rollovers' i adressefeltet....

 

edit: rettet på ovenfor, og funnet ut feilen.... fourmets MØKKA-funksjon legger automatisk til en ekstra 'http://' inniblandt.... !!!

Endret 18. mai 2004 av Zethyr

[Arve Systad]

Arve har en fin tutorial på dette, UTEN bruk av javascript

IMO er den nye bedre, sjøl om den er på engelsk.. Trur eg har forklart ting litt bedre der..

[galskapen]

IMO er den nye bedre, sjøl om den er på engelsk.. Trur eg har forklart ting litt bedre der..

men jeg forstår fortsatt ikke hvordan man bruker den måten på flere linker samtidig...

[Jesper Karsrud]

Du må lage klasser for hver link... Jeg har brukt den på denne... CSS'en ligger her Ligger vel under "kategorien" menu elns...

 

Så kan du se på koden på siden jeg linka til, der ser du hvordan du skal sette opp alt

Endret 18. mai 2004 av Jibril2k

[galskapen]

det hjalp, Jibril...

[Zethyr]

den er bedre ja

<a href="#" class="roll" style="background-image: url(mø.jpg); height: 20px;">&nbsp</a>
<a href="#" class="roll" style="background-image: url(mø.jpg); height: 20px;">&nbsp</a>
<a href="#" class="roll" style="background-image: url(mø.jpg); height: 20px;">&nbsp</a>
<a href="#" class="roll" style="background-image: url(mø.jpg); height: 20px;">&nbsp</a>

.roll:hover{
background-position: bottom;
}

noe slikt ?? har ikke tid til å se over/gjøre det mer grundig...

 

edit: for sen

Endret 18. mai 2004 av Zethyr

[galskapen]

men litt off topic: hvordan bruke bilde som bakgrunn på div`s...

[Jesper Karsrud]

background: url(bilde.png);

[PoleCat]

background: url(bilde.png);

Er det forskjell til:

background: url("bilde.png");

 

?

[Jesper Karsrud]

Nei, jeg tror ikke det... Det funker med dette også:

 

background: url('bilde.png');

 

Så jeg skulle tro det ikke har noe å si

[galskapen]

men jeg får stadig ikke den måten til arne å funke.. mener da jeg har gjort alt riktig

 

*link

[Jesper Karsrud]

Er det en grunn til at ikke siden din vises?

 

Edit: Du har jo ikke linket til et stilsett...

 

Edit2: Jo, det hadde du

Endret 18. mai 2004 av Jibril2k

[galskapen]

siden vises da den.... er jo ikke stort bortsett fra forsøket på de hover buttonsene