Gå til innhold

[Løst]Få (meny)button-bilde til å endre farge når man holder mus over


Anbefalte innlegg

Skrevet

Hei!

 

Begynt å leke meg litt med litt Photoshopping, og litt webprogrammering. Så lurte jeg på om det er en omfattende sak, å få en button til å endre farge når man fører musen over(altså i menyen), om dere skjønner hva jeg mener.

 

Takkeer :)

Videoannonse
Annonse
Skrevet

Å bruke JS til noe så trivielt er ganske dumt.

Du har CSS-koden :hover, som bestemmer hvordan noe er når man holder musen over.

 

<a href="#" class="lenke">Knapp</a>

 

og så i CSS:

a.lenke {

background-color: #ff0000;

}

a.lenke:hover {

background-color: #00ff00;

}

W3schools

Skrevet (endret)

Førstnevnte ser jo særs enkel ut, hvorfor er det dumt å bruke det?

 

Hvordan hadde denne koden blitt om den også skal linke til noe?

 

Takker :)

 

Edit > BTW: Det skal være et bilde, ikke ren tekst.

Endret av Jaybird
Skrevet
Førstnevnte ser jo særs enkel ut, hvorfor er det dumt å bruke det?

Fordi det ikke vil virke for folk med JS deaktivert.

 

<a href="#" class="lenke">Knapp</a>

 

a.lenke {

background-image:url(bilde.jpg);

/* sette width, display block evt. */

}

a.lenke:hover {

background-image:url(bilde2.jpg);

}

Skrevet
Førstnevnte ser jo særs enkel ut, hvorfor er det dumt å bruke det?
Bruk Matsemann sin metode. En tommelfingerrelel er hvis noe kan gjøres i både CSS og JS, så bruk CSS. Alle nettlesere støtter CSS. JS er det mange som har slått av.
Skrevet (endret)

Lurte på noe lignende og da slipper jeg å lage en egen tråd på dette.

 

Ett bilde vil jo være tregere å laste ned så jeg lurer på om man kan lage en menyknapp i CSS som har MouseOver funksjon og som fungerer som en lenke.

 

Likt... Trondheimlufthavn

Endret av Nasciboy
Skrevet
Jeg skjønner ikke helt hva du sikter til? Du kan endre alt av bakgrunn, farge, ramme osv. som du vill i CSS.

Jepp det har jeg klart, problemet er at hele området skal fungere som en link uten i tillegg slik at man faktisk slipper å trykke på selve teksten.

 

Mouseoverfunksjonen har jeg klart men lite brukevennlig nå bruker ser menyknappen skifter farge og ingenting skjer når han trykker fordi pekeren ikke er på selve linken.

Skrevet (endret)
Får vi se koden?

Så klart...

 

Først poster jeg forsøket etter ditt tips...

A.display:block

{

background-color: #cccccc;

height: 30px;

width: 150px;

position: absolute;

top: 186px;

left: 3px;

text-align: left;

font-size: 20px;

}

echo "<a class=\"display\" href=\"index.php?meny=1\">Valg 1</a>";

Linken får ingen av egenskapene definert i CSS selectoren.

 

Her poster jeg det jeg har kommet frem til nå av denne funksjonen, så her gjør jeg helt klart en feil.

 

div.meny1

{

background-color: #cccccc;

height: 30px;

width: 150px;

padding: 0px;

border: 0px solid black;

margin: 0px;

position: absolute;

top: 186px;

left: 3px;

color: red;

text-align: left;

font-size: 20px;

}

 

.meny1:hover

{

background-color: #ffffff;

}

 

echo "<div class=\"meny1\">";

echo "<a href=\"index.php?meny=1\">Valg 1</a>";

echo "</div>";

Som du ser er dette kun en link med en "div" rundt som har en hover funksjon.

 

"Div" blir i mange tilfeller mye større en teksten på linken og det skaper ett problem da "div"-en ikke er en link i seg selv :(

Endret av Nasciboy
Skrevet

display:block er en egenskap, og skal derfor sammen med resten av CSS. ;)

I forsøk nummer to ligger jo alt på selve div-en.

 

echo "<a class=\"display\" href=\"index.php?meny=1\">Valg 1</a>";
a.display {

background-color: #cccccc;

height: 30px;

width: 150px;

display: block;

}

a.display:hover {

background-color: #ff0000;

}

Skrevet (endret)
display:block er en egenskap, og skal derfor sammen med resten av CSS. ;)

Haha, da hadde jeg jo rett... i at jeg gjorde en feil!

Her poster jeg det jeg har kommet frem til nå av denne funksjonen, så her gjør jeg helt klart en feil.

 

Uansett, genialt.. vriket som bare det!

 

Håper også TS får med seg dette siden jeg kuppet tråden hans :)

 

Absolutt mange fordeler med denne metoden enn å bruke ett bilde :thumbup:

 

Edit:

Glemte å takke... Tusen takk for hjelpen :)

Endret av Nasciboy
Skrevet
Å bruke JS til noe så trivielt er ganske dumt.

Du har CSS-koden :hover, som bestemmer hvordan noe er når man holder musen over.

 

<a href="#" class="lenke">Knapp</a>

 

og så i CSS:

a.lenke {

background-color: #ff0000;

}

a.lenke:hover {

background-color: #00ff00;

}

W3schools

 

Okei, skal prøve på dette nå, er ikke så dreven på dette så lurte på noen ting før jeg prøver:

 

HTML biten kan bare være som den er rekner jeg med? Hva blir "knapp" til egentlig?

 

cssbiten blir;

a.lenke {

background-image:url(images/heim.gif);

height: 22px;

width: 267px;

}

a.lenke:hover {

background-image:url(images/heim2.jpg);

}

 

Blir width/height rett?

Skrevet
Okei, skal prøve på dette nå, er ikke så dreven på dette så lurte på noen ting før jeg prøver:

 

HTML biten kan bare være som den er rekner jeg med? Hva blir "knapp" til egentlig?

 

cssbiten blir;

a.lenke {

background-image:url(images/heim.gif);

height: 22px;

width: 267px;

}

a.lenke:hover {

background-image:url(images/heim2.jpg);

}

 

Blir width/height rett?

 

Høyde og bredde bør du vel regulere etter størrelsen på bakgrunnsbildet ditt. Ettersom vi ikke vet hvor stort det er så er det tungt å svare på det, men du har skrevet det inn riktig i koden.

Skrevet

Bare litt pirk, men vil det ikke fungere lettere om du setter echo i ' ' istedet for ", så slipper du å sette skråstrek foran " i linkene.

  • 1 år senere...
Skrevet

Fortsetter i samme tråd..

 

Når jeg gjør som Matsemann sier, får jeg en Tekst som legger seg utenpå bildet, noe jeg ikke er intressert i. Teksten er den som er markert i koden under (Knapp).

Hvordan kan jeg få lagd til hover på bilde uten at det kommer en tekst oppå bildet? Dersom jeg fjerner teksten fra koden, kommer det ikke noe bilde heller.

 

Og hva gjør egentlig display:block?

 

Takk!

 

"<a href="#" class="lenke">Knapp</a>

 

a.lenke {

background-image:url(bilde.jpg);

/* sette width, display block evt. */

}

a.lenke:hover {

background-image:url(bilde2.jpg);

} "

Skrevet

Hvis du ikke vil at teksten skal vises i det hele tatt kan du sette text-indent til -99999px f.eks

 

a.lenke {
   background-image:url("bilde.jpg");
   text-indent:-99999px;
   /* width, display og resten av sakene */
}

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å
  • Hvem er aktive   0 medlemmer

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