Notifikationer

Markér alle som læst Log ud

compac Seniormester

15. januar 2010 - 18:01 Der er 9 kommentarer og
1 løsning

Rollover knap med tekst

Jeg kunne tænke mig at lave en knap, som skifter farve når musen kører over den. Samtidig skal der stå en fast tekst på knappen, så jeg kun behøver to billeder og kan nøjes med at ændre teksten ved oprettelse af en ny knap.
Jeg er kommet hertil:

<html>
<head>

<style type="text/css"><br />
.cssbutton<br />
{<br />
position: relative;<br />
font-family: Tahoma, Georgia, sans-serif, helvetica, arial;<br />
background: url(roll/over.jpg) no-repeat;<br />
white-space: nowrap;<br />
display: block;<br />
width: 100px;<br />
height: 28px;<br />
margin: 0 0 2px 0;<br />
padding: 0;<br />
}<br />
<br />
.cssbutton a<br />
{<br />
display: block;<br />
color: #000000;<br />
font-size: 12px;<br />
font-weight: bold;<br />
text-align: center;<br />
width: 100px;<br />
height: 28px;<br />
display: block;<br />
float: left;<br />
color: #ffffff;<br />
text-decoration: none;<br />
}<br />
<br />
.cssbutton img<br />
{<br />
width: 100px;<br />
height: 28px;<br />
border: 0<br />
}<br />
<br />
* html a:hover<br />
{<br />
visibility:visible<br />
}<br />
<br />
.cssbutton a:hover img<br />
{<br />
visibility:hidden<br />
}<br />
<br />
.cssbutton span<br />
{<br />
position: absolute;<br />
left: 5px;<br />
top: 5px;<br />
margin: 0px;<br />
padding: 0px;<br />
cursor: pointer;<br />
} <br />
</style>
</head>
<body>

<p> </p>

<div class="cssbutton">

<a href="index.html"><img src="roll/down.jpg" alt="Home" /><span>Home</span></a>
</div>
<div class="cssbutton">
<a href="menubar.html"><img src="roll/down.jpg" alt="Menu Bar" /><span>Menu Bar</span></a>
</div>
<div class="cssbutton">
<a href="competition.html"><img src="roll/down.jpg" alt="Competition" /><span>Competition</span></a>
</div>
<div class="cssbutton">
<a href="links.html"><img src="roll/down.jpg" alt="Links" /><span>Links</span></a>
<p> </p>
</div>
<p> </p>

<p> </p>

</body>
</html>

-men kan ikke få det til at virke.

Synes godt om

madsens90 Praktikant

15. januar 2010 - 18:15 #1

Er ikke helt sikker på hvad du mener med de 2 billeder, og er lidt for doven til at læse din kode igennem (beklager), men hvis du blot snakker om en knap med lidt CSS på kan det gøres med en input knap, noget javascript, og CSS.

<style type="text/css">
.button {
border: 1px solid #000000;
background-color: #EEEEEE;
}

.button:hover {
background-color: #CCCCCC;
}
</style>

<input type="button" class="button" value="LINK TEKST" onclick="location.href='http://www.eksperten.dk'" />

Er ikke sikkert det lige var det style du havde tænkt på, men det kan jo bare ændres.

Synes godt om

compac Seniormester

15. januar 2010 - 19:42 #2

Der er et eksempel på hvad jeg mener her:

http://www.freebits.co.uk/css-rollover-buttons.html

Synes godt om

Slettet bruger

15. januar 2010 - 20:02 #3

Dette kan gøres med en div med baggrundsbillede:

Synes godt om

compac Seniormester

15. januar 2010 - 20:34 #4

Jeg har prøvet denne:
<html>
<head>
<style type="text/css">
.menuBotton {
background-image: url('roll/down.jpg');
}
.menuBotton:hover {
background-image: url('roll/over.jpg');
}
</style>
</head>
<body>
test af knapper
<div class="menuButton">
<a href="xxxx.html"><img src="roll/over.jpg" alt="Menu Bar" /><span>Menu Bar</span></a>
<p>Produkter</p>
</div>
</body>
</html>

-men der kommer blot forgrunden og roll-over-funktionen virker ikke.
Knappens tekst står ved siden af billedet i denne kode.

Knappen skal vel ligge i en link for den kan bruges til noget.

Synes godt om

madsens90 Praktikant

15. januar 2010 - 21:42 #5

Beklager.. Havde ikke set det skulle være et billede:

<style type="text/css">
.button {
background-image: url('roll/down.jpg');
width: 100px;
height: 28px;
}

.button:hover {
background-image: url('roll/down.jpg');
width: 100px;
height: 28px;
}
</style>

<input type="button" class="button" value="LINK TEKST" onclick="location.href='http://www.eksperten.dk'" />

Det skulle meget gerne virke det der.
Ellers kan det sagtens lade sig gøre med en div også, hvis du meget gerne vil have det?

Synes godt om

compac Seniormester

15. januar 2010 - 22:00 #6

Ja, nu kommer der en knap, der skifter farve når markøren kører over.
Men i mit eksempel var der tale om 2 billeder, som blev byttet om.
Den anden del af mit spørgsmål er: Hvordan "lægger" man tekst oven i billedet (knappen)? - ligesom der er gjort i den side jeg henviser til.

Synes godt om

madsens90 Praktikant

17. januar 2010 - 16:20 #7

I det eksempel jeg gav ved sidste kommentar skulle der meget gerne være 2 billeder der bliver byttet om.

'roll/down.jpg' og 'roll/down.jpg'..

Teksten på billedet (knappen), ligger i value, som er i knappen.

Der hvor jeg har skrevet LINK TEKST.

Hvis du vil sætte en farve på teksten så du kan sætte color på CSS'en.
Det gøres sådan:

color: #FF0000;

Farven der er rød.. Blå er #0000FF.

Du kan prøve dig lidt frem.

hvis billedet ikke skifter med det samme du tager musen over er det fordi den skal loade 2 billeder, fremfor et.
Der er andre metoder at lave mouse-over på, hvor man kun bruger ét billede, der flytter sig efter hvornår man har musen over, og ikke har, og derfor ligner der er 2 billeder, men kun ét.

Du må sige til hvis du vil have eksempel på den metode.

Synes godt om

compac Seniormester

18. januar 2010 - 16:49 #8

Dit svar gav inspirationen til at få det at virke Madsen.
Læg et svar.

Synes godt om

madsens90 Praktikant

18. januar 2010 - 16:51 #9

Det lyder godt.

Må jeg se resultatet?
Så har næste som ser denne tråd også lige svaret på det, hvis han har samme spørgsmål som dig. :)

Synes godt om

compac Seniormester

30. januar 2010 - 21:12 #10

Ja det har du ret i:

Her er html-koden:

<link rel="stylesheet" type="text/css" href="knapper.css" media="screen">
....
....
...

<div class="cssbutton">
<a href="index.php"><img src="roll/down.jpg" alt="forside/><span>Forside</span></a>
</div>
<div class="cssbutton">
<a href="sale.php"><img src="roll/down.jpg" alt="side2"/><span>Side2</span></a>
</div>

og i css:

.cssbutton
{
position: relative;
font-family: Tahoma, Georgia, sans-serif, helvetica, arial;
background: url(roll/over.jpg) no-repeat;
white-space: nowrap;
display: block;
width: 100px;
height: 28px;
margin: 0 0 2px 0;
padding: 0;
}

.cssbutton a
{
display: block;
color: #000000;
font-size: 12px;
font-weight: bold;
text-align: center;
width: 100px;
height: 28px;
display: block;
float: left;
color: #ffffff;
text-decoration: none;
}

.cssbutton img
{
width: 100px;
height: 28px;
border: 0
}

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

Programmeringssprog kurser

Kurser inden for grundlæggende programmering

Se alle Programmeringssprog kurser

Flere spørgsmål fra Andet programmering kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Bat file. Af johnnylassen i Andet programmering	4	I går 16:10	I dag 09:43
Hjælp til Api.asmx Af lurup i Andet programmering	1	17/03/202609:27	17/03/202614:12
burgermenu til hjemmeside - hjælp! Af SabrinaL i Andet programmering	2	12/11/202514:10	02/12/202520:42
Hjælp til programmering af website Af hamdenlange i Andet programmering	16	17/08/202522:26	19/08/202515:53
Kan man registrere hvis folk lukker en side ned Af KurtG i Andet programmering	8	24/07/202513:06	28/07/202517:03

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