CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

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 ?

Synes godt om

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>

Synes godt om

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>

Synes godt om

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

Synes godt om

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 ?

Synes godt om

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>

Synes godt om

sv1sson Nybegynder

17. december 2008 - 00:17 #6

Prøv lige dette link http://webdesign101.dk/showcase/rollover/rollover_3.php

Synes godt om

sv1sson Nybegynder

17. december 2008 - 00:22 #7

eller dette link? http://webdesign101.dk/rollover/eksempel_2.php

Synes godt om

ssv Nybegynder

17. december 2008 - 09:56 #8

Eller bare brug den nemme løsning :-)

Synes godt om

kipolaks Nybegynder

18. december 2008 - 15:01 #9

lukker

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 HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Bredde på div elementer Af dane022 i HTML	2	16/02/202408:29	20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML	2	21/12/202322:51	22/12/202308:03
validering <input tlfnr. Af slein55 i HTML	5	15/10/202311:43	15/10/202314:51
Link fra form input Af jnrmgs i HTML	9	19/09/202319:10	23/09/202313:11
includere i HTML Af slein55 i HTML	3	15/09/202313:47	16/09/202309:40

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