Notifikationer

Markér alle som læst Log ud

BTEngineer Novice

27. juli 2006 - 19:30 Der er 9 kommentarer og
1 løsning

Udskiftning af billede

Hej.

Jeg har lavet en menu med knapper til min hjemmeside - Har lavet knapperne i Photoshop. Jeg syntes det ser lidt kedeligt ud, så derfor vil jeg gerne have lavet det sådan, at når man holder musen over en af knapperne, så bliver baggrunden på knappen grøn.

Min løsning:
Når man holder musen over en af knapperne, så vises der en grønfarvede knappe i stedet for en blå, som de alle er.

Nogen der har en JavaScript-løsning på det?

Håber nogen kan hjælp.

// Henrik

Synes godt om

caf Nybegynder

27. juli 2006 - 19:42 #1

Er det noget i denne retning du søger?
http://meyerweb.com/eric/css/edge/popups/demo2.html

Caf

Synes godt om

mclemens Nybegynder

27. juli 2006 - 19:43 #2

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">
.link{background:url("b1.gif");}
</style>

</head><body>
<a href="http://www.eksperten.dk" class="link" onmouseover="this.style.backgroundImage='url(\'b2.gif\')';" onmouseout="this.style.backgroundImage='url(b1.gif)';">Link</a>
</body></html>

Synes godt om

mclemens Nybegynder

27. juli 2006 - 19:44 #3

Eller en med css istedet:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">
a.link{background:url("b1.gif");}
a.link:hover{background:url("b2.gif");}
</style>

</head><body>
<a href="http://www.eksperten.dk" class="link">Link</a>
</body></html>

Synes godt om

mclemens Nybegynder

27. juli 2006 - 19:46 #4

Begge dele kan selvføgelig udvides en smule hvis det var en af dem du tænkte på ... her er lige den med css ... den med javascript kan udvides med autotildeling af onmouseover og onmouseout hvis det er den løsning du skal bruge...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">
#menu a{background:url("b1.gif");}
#menu a:hover{background:url("b2.gif");}
</style>

</head><body>
<div id="menu">
<a href="http://www.eksperten.dk">Link til eksperten</a><br>
<a href="http://www.w3.org">Link til w3</a>
</div>
</body></html>

Synes godt om

BTEngineer Novice

28. juli 2006 - 15:11 #5

Hm..
kan ikke rigtig få det til at virke.
Har prøvet følgende:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

<title>test</title>

<style type="text/css">
#menu a{
background:url("knap_kontakt.gif");
}

#menu a:hover{
background:url("kontakt_over.gif");
}
</style>

</head>

<body>

<div id="menu">
<a href="http://www.eksperten.dk"><img id="menu" border="0"></a>
</div>

</body>

</html>

Teksten står allerede på knappen.
Her er kontakt knappen som skal stå der når man ikke holder musen over:
http://www.kwudo.dk/knap_kontakt.gif

og her er den som skal vises når man holder musen over:
http://www.kwudo.dk/kontakt_over.gif

Synes godt om

mclemens Nybegynder

28. juli 2006 - 15:57 #6

Eksempel css:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type"

content="text/html; charset=iso-8859-1"><title>test</title>

<style type="text/css">

a#kontakt{display:block;width:110px;height:20px;background:url("knap_kontakt.gif");}
a#kontakt:hover{background:url("kontakt_over.gif");}

a#kontakt2{display:block;width:110px;height:20px;background:url("knap_kontakt.gif");}
a#kontakt2:hover{background:url("kontakt_over.gif");}

</style>

</head><body>

<a href="http://www.eksperten.dk" id="kontakt"></a>
<a href="http://www.eksperten.dk" id="kontakt2"></a>

</body></html>

Synes godt om

mclemens Nybegynder

28. juli 2006 - 16:00 #7

java script:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type"

content="text/html; charset=iso-8859-1"><title>test</title>

<style type="text/css">
#menu a img{border:0px;}
</style>

</head><body>
<div id="menu">
<a href="http://www.eksperten.dk"><img src="knap_kontakt.gif"

onmouseover="this.src='kontakt_over.gif';" onmouseout="this.src='knap_kontakt.gif';"></a>

<a href="http://www.eksperten.dk"><img src="knap_kontakt.gif"

onmouseover="this.src='kontakt_over.gif';" onmouseout="this.src='knap_kontakt.gif';"></a>
</div>
</body></html>

Synes godt om

mclemens Nybegynder

28. juli 2006 - 16:02 #8

(troede at det bare var en baggrund du havde bagved en tekst der skulle skifte)

Synes godt om

BTEngineer Novice

28. juli 2006 - 18:02 #9

Tak skal du have. :-)
Jeg har fået det til at fungere, brugte din sidste løsning, med javascriptet.

Synes godt om

mclemens Nybegynder

28. juli 2006 - 18:23 #10

Velbekom, og tak for point :o)

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript	5	27/04/202620:09	03/05/202613:59
Validering af filnavn i formular Af Strawberry i JavaScript	8	14/04/202610:11	20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript	2	03/02/202614:19	04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript	9	18/04/202516:52	22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript	2	14/02/202511:47	27/06/202514:34

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS