Gå til innhold

Css-Hjelp


Anbefalte innlegg

Hei,

 

trenger hjelp til css.

 

det er slik at jeg skal lage slik som onmouseout og onmouseover... ved hjelp av css..

 

Kan noen hjelpe meg med det? Altså har to bilder, det er til linker. når man kommer over med musen skal bilde 2 vises og ellers skal bilde1 vises.

 

Jeg har prøvd med a.link osv med background img

 

A.linkMENY:hover {
 BACKGROUND-IMAGE: url(images/LINK/about2.jpg); 

 

Noe slikt... Me class som peker fra selve html siden..men dette funker ikke...

 

Takker for all hjelp.

Lenke til kommentar
Videoannonse
Annonse

<link rel="stylesheet" href="style.css" type="text/css">

 

 

 

<td><a class=meny href="#"><img  src="images/LINK/home.jpg" width="120" height="20" border="0" ></td>

 

 

A:hover.meny { BACKGROUND-IMAGE: url(images/LINK/about2.jpg); }

 

Noen som ser noe feil her... Det er vel dette som trengs...

Lenke til kommentar

hmm.. sikker på at bildeurlen er riktig?

 

Kan du poste HTML koden?

 

sidan det er background kan du ikkje skifte bilde over eit anna bilde viss du skjønne, f.eks.

<a href=".." class="meny"><img src="..:"></a>

Men kan skifte bakgrunn bak tekst f.eks.

VIss du vil bruke bilde kan du jo

A:link.meny { BACKGROUND-IMAGE: url(images/LINK/knapp.jpg); }

og så bruke <a href=".." class="meny"><img src="eit trans bilde"></a>. Trur det funker, men har ikkje laga sånn med bilde før... Har sett mange andre her på forumet som har det så die kan sikkert hjelpe...

 

NB med url: Viss du har stil-dokumentet (t.d. stil.css) i ei anna mappe enn html fila, f.eks stil/stil.css , så må urlen vere: "../images/LINK/osv"

 

Edit: Her kom HTML koden ja.....

Feilen er at bildet som kommer fram når musa beveger seg over det andre bilde blir vist bak orginalbildet viss du skjønner... sidan det er background...

 

edit2: så utenatt så bør du skrive class="meny" altså med "". Er krevd i xhtml. Kan kanskje sløyfe det i HTML

Endret av BA1
Lenke til kommentar

Vet ikke om det er rett, men det virker, så her er hvordan jeg har gjort det.

 

#meny a.hoved
{
display: block;
width: 101px;
height: 21px;
background-image: url(hoved3.gif);
border: none;
}
#meny a:hover.hoved
{
display: block;
width: 101px;
height: 21px;
background-image: url(hoved3_over.gif);
border: none;
}

 

<a href="#" class="hoved"></a>

Lenke til kommentar

Har laga eit eksempel på ei mogleg løysing: CSS knapp meny...

 

<style type="text/css" media="screen">

div#meny { width: 100px; padding: 0; margin: 0; display: block; }
div#meny a.knapp1 { background: url("knapp1.gif"); height: 40px; display: block;}
div#meny a.knapp1:hover { background: url("knapp2.gif"); height: 40px; display: block; }
div#meny a.knapp2 { background: url("knapp2.gif"); height: 40px; display: block; }
div#meny a.knapp2:hover { background: url("knapp1.gif"); height: 40px; display: block; }
</style>

</head>
<body>
<div id="meny">
<a href="link.html" class="knapp1"></a>
<a href="link2.html" class="knapp2"></a>
</div>

Endret av BA1
Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
×
×
  • Opprett ny...