Header med hover?

[halvardm]

Holder på å lage en liten side nå, men så lurer jeg på noe.

Jeg har laget til at header'en er en link:

 

<a href="http://maraak.com"><img id="img" src="head.jpg"></a>

 

Men jeg skal bytte bilde når musen kommer over headeren.

Hvordan gjør jeg det?

[Simon Zimmermann]

wellstyled.com - fin tutorial på dette

[B4stian]

her er en kode du kan bygge videre på:

 

ul#menu {
list-style: none;
padding-left: 7px;
}

ul#menu li {
display: inline;
float: left;
}

ul#menu li a {
display: block;
overflow: hidden;
padding: 30px 0 0 0;
height: 0 !important;
height /**/ : 30px;
width: 100px;
}

ul#menu li a:hover {
background-position: 0 -30px;
}

.klasse1 {
background-image: url("hover4.jpg");
}

 

som du ser bruker jeg den koden i menyen min, du kan jo bare forandre det til header, også må du sitlle inn på background-position; den skal stå på så mange minus px som halve bildet er..

[halvardm]

HTML kode?

[joffar]

legg til flgende i css filen din

 

#headerimg settes lik img iden din
a#headerimg  {
background: url(./head2.jpg) top right;
}
a#headerimg hover {
background-position:top left;
}

 

Deretter bør du forandre

<a href="http://maraak.com"><img id="img" src="head.jpg"></a>

til

<a href="http://maraak.com class= "headerimg"></a>

 

Du må også legge til alt av formatering du har i img til #headerimg.

 

Grunnen til at jeg forandret id=img til id=headerimg er at du kan definere img i css slilk at alle bilder formateres likt.. derfor bør du ikke bruke #img, da dette kan gjøre det litt mere uoversiktlig..

 

Har ikke testet dette, men tror det skal virke... Husk å definere størrelse på headerimg i css også ..

 

forutsetter at headerbildet er ett bilde som du forflytter via hover for å vise andre delen av bildet...

 

 

Edit.. var litt for rask her.. masse rar kode her... uffa meg

Endret 16. september 2004 av joffar

[halvardm]

Hmm, fikk ikke denne til å funke

 

Edit. Skal teste det nye nå..

 

Edit2: Hva mener du med "settes lik img iden din"?

På .img står det kun "border: 0px solid" nå..

Endret 16. september 2004 av Skomaker

[halvardm]

Det er foresten 2 bilder.

Kan sette det sammen da.

[joffar]

i klassen

.headerimg må du definere størrelsen slik at bildet vil vises

 

her er hvordan jeg har min header..

 

HTML
<a href="#" id="header"></a>
CSS
a#header {
position : relative;
font-family: Trebuchet MS;
padding: 0;
height: 200px;
width:800px;
display: block;
background: #FAF4EB url(header2.jpg) no-repeat top left;
}
a#header:hover {
background-position:0px -Xantall px; /*kommer an p bildest;rrelsen */
}

[PoleCat]

Bruk heller h1 til dette:

 

<h1><a href="#">Sidens navn</a></h1>

 

h1 a {
 display: block;
 overflow: hidden;
 padding: 150px 0 0 0; /* 150px er høyden på bildet */
 height: 0 !important;
 height /**/ : 150px;
 width: 500px;
 background-image: url("url/til/bilde.jpg");
 background-repeat: no-repeat;
}

h1 a:hover {
 background-position: 0 -150px;
}
 

 

Det du gjør er å lage headerbildet med og uten hover i samme bilderfil, og legger dem rett under hverandre.

 

headervanlig

headerhover

= header.jpg

 

Du endrer da verdiene i CSS'en, padding og height, til halvparten av høyden på denne.

[halvardm]

Det funket!

Tusen takk for alle svar

[PoleCat]

Min?

[halvardm]

Jepp

[joffar]

Min?

Very good...

 

Bedre forklart også...

 

Men hvordan bestemmer du hvor Sidens Navn skal stå i header med denne koden?

Endret 16. september 2004 av joffar

[PoleCat]

Men hvordan bestemmer du hvor Sidens Navn skal stå i header med denne koden?

Det vises ikke i det hele tatt, noe av poenget med denne metoden.