Jump to content
Sign in to follow this  
halvardm

Header med hover?

Recommended Posts

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?

Share this post


Link to post

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..

Share this post


Link to post

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

Edited by joffar

Share this post


Link to post

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å..

Edited by Skomaker

Share this post


Link to post

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 */
}

Share this post


Link to post

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.

Share this post


Link to post
Min?

:D

Very good...

 

Bedre forklart også...

 

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

Edited by joffar

Share this post


Link to post

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...