Avatar billede kipolaks Nybegynder
16. december 2008 - 18:20 Der er 8 kommentarer og
1 løsning

lave en knap med tekst og billed på med mouseover funktion

hej!

jeg sidder og prøver at lave en knap som skifter bagrund når jeg fører musen henover den.
her er et eks -> http://www.gratisimage.dk/graphic/images/2008/December/16/9446_4947E208.jpg

på billedet ses 2 knapper, den ene (gul) er når musen føres henover. det skal bemærkes at baggrunden som skifter er et billede.. så hvordan laver jeg det sådan at jeg kan putte endnu et billede og noget tekst oven på bagrundsbilledet (som skifter med mouseover) og samtidig gøre hele knappen til et hyperlink ?
Avatar billede w13 Novice
16. december 2008 - 18:29 #1
F.eks. noget i stil med:

<div style="width: 100px; height: 75px; background-image: url(baggrund.png)" onmouseover="this.style.backgroundImage='url(baggrund_hover.png)'" onmouseout="this.style.backgroundImage='url(baggrund.png)'" onclick="window.location.href='link.htm'">
  <img src="billede1.jpg">
  Tekst her
</div>
Avatar billede ssv Nybegynder
16. december 2008 - 20:06 #2
Eller med lidt CSS og et a-tag :-)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Titel</title>
<style type="text/css">
a { display: block; width: 150px; height: 150px; background: green; text-align: center; color: #fff; padding: 40px 0 0 0; }
a img { background: #fff; color: #000; border: 0; }
a:hover { background: yellow; color: #000; }
</style>
</head>

<body>
<div>
<a href="ditlink.her">Tekst her<br><br><img src="#" height="60px" width="120px" alt="Alt-tekst goes here"></a>
</div>
</body>
</html>
Avatar billede ssv Nybegynder
16. december 2008 - 20:07 #3
Bemærk: nogle af tingene i CSSen er unødvendige når du har et rigtigt billede indsat, jeg brugte dem kun for test. Bla. color og background i a img..
Avatar billede kipolaks Nybegynder
16. december 2008 - 21:27 #4
ssv -> det virker jo fint men hvis jeg ændrer a tagget vil alle mine links jo se sådan ud ?
Avatar billede ssv Nybegynder
16. december 2008 - 23:30 #5
Ja, det er klart (my bad). Så kan du give det en speciel class i stedet - ex:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Titel</title>
<style type="text/css">
a.exphover { display: block; width: 150px; height: 150px; background: green; text-align: center; color: #fff; padding: 40px 0 0 0; }
a.exphover img { background: #fff; color: #000; border: 0; }
a.exphover:hover { background: yellow; color: #000; }
</style>
</head>

<body>
<div>
<a class="exphover" href="ditlink.her">Tekst her<br><br><img src="#" height="60px" width="120px" alt="Alt-tekst goes here"></a>
</div>
</body>
</html>
Avatar billede sv1sson Nybegynder
17. december 2008 - 00:17 #6
Avatar billede sv1sson Nybegynder
17. december 2008 - 00:22 #7
Avatar billede ssv Nybegynder
17. december 2008 - 09:56 #8
Eller bare brug den nemme løsning :-)
Avatar billede kipolaks Nybegynder
18. december 2008 - 15:01 #9
lukker
Avatar billede 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.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

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