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

[Jaybird]

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

[siDDis]

element.onmouseover = function(){

element.src = "http://nyttbilete";

}

element.onmouseout = function(){

element.src = "http://defaultbilete";

}

[Matsemann]

Å 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

[Jaybird]

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 5. januar 2010 av Jaybird

[Matsemann]

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);

}

[MikkelRev]

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.

[hean]

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 5. januar 2010 av Nasciboy

[Matsemann]

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

[hean]

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.

[Matsemann]

Får vi se koden?

prøv display:block på a.

[hean]

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 5. januar 2010 av Nasciboy

[Matsemann]

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;

}

[hean]

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

 

Edit:

Glemte å takke... Tusen takk for hjelpen

Endret 5. januar 2010 av Nasciboy

[Jaybird]

Å 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?

[ventrec]

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.

[Skoen]

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.

[Jaybird]

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);

} "

[Kaptein Snus]

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