Gå til innhold

Css-Hjelp

Kirukk

Av Kirukk
i Programmering og webutvikling

Anbefalte innlegg

Kirukk

Kirukk

Skrevet
Skrevet

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.

Videoannonse

Videoannonse
Annonse
BA1

BA1

Skrevet
Skrevet

sånn:

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

der meny er namnet på class'n... burde funke

Kirukk

Kirukk

Skrevet
  • Forfatter
Skrevet

Hei,,

 

 

Det er det som ikke funker her.....

 

Jeg har skrevet nøyaktig det der på css..men bildet forandrer seg ikke...

Kirukk

Kirukk

Skrevet
  • Forfatter
Skrevet 

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

BA1

BA1

Skrevet
Skrevet (endret)

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
Kirukk

Kirukk

Skrevet
  • Forfatter
Skrevet (endret)

Så hva kan gjøres??? må bruke javascript da elr??

 

Edit:

 

Har oxo prøvd class="meny"

Endret av Kirukk
DanielP

DanielP

Skrevet
Skrevet

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>

BA1

BA1

Skrevet
Skrevet (endret)

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
DanielP

DanielP

Skrevet
Skrevet
Den korrekte rekkefølgen er a.meny:hover, og ikke a:hover.meny. Legg til apostrofer rundt urlen, en god vane å ha.

ok. Flott, lærte jeg også noe nytt: FYI; Det virket slik som jeg hadde skrevet det. Men nå vet jeg iallefall at det ikke var rett.

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å
Gå til emneliste

  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...