Forandring av bildet ved mousemovement

14. november 2007

slett

Endret 29. juli 2018 av Slettet-DJZwKv

semafor · 14. november 2007

Enten må du lytte på musebevegelsene med javascript, ellers må du forklare bedre slik at det evt. går an å forklare hvordan du kan gjøre dette med noen pseudoelementer (a:hover).

Stian Jacobsen · 14. november 2007

Bruk javascript til å finne brukerens skjermstørrelse (Du trenger bare bredden)

Så deler du dette i to, f.eks 1024 / 2 = 512, så om musen er innen for 512 piksler, så viser du bilde A, om ikke, vis bilde B..

Du kan også lage et to kolonners design med 100% height.. da er det mye enklere, om musen beveger seg over kolonne a, vises bilde A, om musen er over b, vises b

15. november 2007

slett

Endret 29. juli 2018 av Slettet-DJZwKv

semafor · 16. november 2007

<html>
<head>
<style type="text/css">
* {margin: 0; padding: 0;}
a {
display: block;
   position: absolute;
   width: 50%;
   height: 100%;
}
a#venstre {
   padding-right: 114px;
}
a#venstre:hover {
   background: transparent url(http://home.hit.no/~061108/ansikt2.jpg) no-repeat center right;
   z-index: 1;
}
a#hoyre {
   padding-left: 115px;
   right: 0;
}
a#hoyre:hover {
   background: transparent url(http://home.hit.no/~061108/ansikt.jpg) no-repeat center left;
   z-index: 1;
}
</style>
</head>
<body>
<div>
<a href="#" id="venstre"></a>
<a href="#" id="hoyre"></a>
</div>
</body>
</html>

Lykke til.

edit: legg denne koden inn i http://www.w3schools.com/html/tryit.asp?fi...e=tryhtml_basic for å se, f. eks.

Endret 16. november 2007 av semafor

Logg inn

Forandring av bildet ved mousemovement

Anbefalte innlegg

Gjest Slettet-DJZwKv

Lenke til kommentar

Videoannonse

semafor

Lenke til kommentar

Stian Jacobsen

Lenke til kommentar

Gjest Slettet-DJZwKv

Lenke til kommentar

semafor

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer