Avatar billede mikevds Nybegynder
29. oktober 2008 - 17:29 Der er 3 kommentarer og
1 løsning

a:hover problemer

Jeg er ved at lave en hjemmeside og jeg har nogle knapper jeg gerne vil lave en hover effekt på.

Knapperne er lagt ind som jpg billeder og har hver deres div ID, jeg ved dette ikke er den optimale løsning men den tid den sorg.

Jeg kunne godt tænke mig at knapperne blev skiftet ud med et andet når musen kørte over dem, og jeg har fundet ud af at jeg skal bruge a:hover i css, men jeg kan ikke rigtig finde ud af det.

Er der nogen der kan hjælpe?

HTML (forsiden):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Billund Limosine Service</title>

<link rel="stylesheet" type="text/css" href="cssdokument.css" />

</head>

<body>

<div id="A">
<center><img src="Grafik/Skitse.jpg" alt="Skitse" /></center>
</div>

<div id="H">
<p>
Velkommen på Billund Limousine Services hjemmeside, hvor vi håber, De kan hente inspiration.<br />
Siden indeholder oplysninger om, hvilke biler vi kan tilbyde, priser og meget mere.<br />
<br />
Billund Limousine Service blev startet i 1992 af Tommy Søgaard.<br /> 
Lige siden starten har ideen været at sætte kunden i centrum og bevare den faglige stolthed. Det gør, at vi i dag kan tilbyde områdets bredeste udvalg inden for limousine-kørsel.<br />
<br />
Kig dig omkring og drøm dig ind i en verden af luksus.<br />
<br />
Vi er at træffe på telefon 75 35 37 77 dagligt fra klokken 07.00 - 08.30
<br />og igen fra klokken 17.30 - 22.30.<br />
<br />
Ved akut behov for kørsel kan Tommy Søgaard træffes på mobiltelefon 40 50 37 77<br />
<br />
Forespørgelser og bestillinger modtages gerne på mail : post@billund-limo.dk<br /> 

De er også velkommen til at skrive eller faxe til os :<br />
<br />
Billund Limousine Service<br />
Kobjergvej 13<br />
DK - 7190 Billund<br />
Telefax 75 35 38 88 <br />

</p>
</div>

<div id="B">
<a href="index.html">
<img src="Grafik/forsideknap aktiv.jpg" alt="Forside" border="0px" />
</a>
</div>

<div id="C">
<a href="korselaf.html">
<img src="Grafik/korselafknap.jpg" alt="Korselaf" border="0px" />
</a>
</div>

<div id="D">
<a href="nyheder.html">
<img src="Grafik/nyhederknap.jpg" alt="Nyheder" border="0px" />
</a>
</div>

<div id="E">
<a href="lufthavnskorsel.html">
<img src="Grafik/lufhavnskorselknap.jpg" alt="Lufhavnskorsel" border="0px" />
</a>
</div>

<div id="F">
<a href="biler.html">
<img src="Grafik/bilerknap.jpg" alt="Biler" border="0px" />
</a>
</div>

<div id="G">
<a href="bilsalg.html">
<img src="Grafik/bilsalgknap.jpg" alt="Bilsalg" border="0px" />
</a>
</div>

</body>
</html>

CSS:

@charset "utf-8";
/* CSS Document */

body{
    background-color:#393939;
}

h1{font-family:Verdana, Arial, Helvetica, sans-serif;
}

p{font-family:Arial, Helvetica, sans-serif;
}

#H{
margin-left:380px;
margin-top:-560px;
float:left;
height: 490px;
width: 650px;
position:absolute;
overflow: auto;
color:#000000;
text-align:left;
}

#B{position:absolute; top:172px; left:366px;
}

#C{position:absolute; top:172px; left:479px;
}

#D{position:absolute; top:172px; left:593px;
}

#E{position:absolute; top:172px; left:706px;
}

#F{position:absolute; top:172px; left:819px;
}

#G{position:absolute; top:172px; left:933px;
}

#I{position:absolute; top:210px; left:485px;
}

#J{position:absolute; top:210px; left:599px;
}

#K{position:absolute; top:210px; left:712px;
}

#L{position:absolute; top:210px; left:825px;
}

Billed af forsiden:
http://peecee.dk/upload/view/137713
Avatar billede roenving Novice
29. oktober 2008 - 22:28 #1
Absolut positionering af mange elementer ?-)

-- det lyder som verdens dårligste design-løsning (bruger du en tåbelig editor, f.eks. VS2003 ?-)

a:hover er absolut en mulighed, hvis man benytter billeder direkte, men umiddelbart ligner det en anden opgave, hvor det er mere hensigtsmæssigt at benytte javascript, f.eks.

I stedet for:

<div id="F">
<a href="biler.html">
<img src="Grafik/bilerknap.jpg" alt="Biler" border="0px" />
</a>
</div>

-- så brug f.eks.

<input type="image" src="Grafik/bilerknap.jpg" onclick="window.location.href='biler.html';return false;" onmouseover="this.src='bilerknapHover.jpg'" onmouseout="this.src='bilerknap.jpg'">

-- der kan være mange andre skemaer, men det er den jeg umiddelbart kommer til at tænke på, når jeg ser din mark-up !-)
Avatar billede mikevds Nybegynder
30. oktober 2008 - 11:07 #2
Hehe, nej det er nok mere mig der er problemet. Jeg bruger DreamWeaver men det er et af de første projekter jeg laver, så mine løsninger er nok højest tvivlsomme.

som du siger er absolute positioning ikke særlig smart for når siden åbnes på en computer med en anden opløsning skøjter knapperne jo rundt.

Jeg er ikke helt nået til Java-script endnu. (men det kommer dog).

Jeg har fået at vide at jeg istedet for absolute pos. skulle lave en "wrapper" altså en usynlig boks, og så få knapperne til at "float left", men det er jo heller ikke så let for en som mig.

Jeg troede mouseover var ultra simpelt, men det kan være at jeg skal sørge for at der er styr på knapperne først...

smid et svar roenving (for dit svar var jo rigtigt) og så laver jeg måske en andet spørgsmål angående knap-placering.
Avatar billede roenving Novice
30. oktober 2008 - 16:04 #3
Oki '-)
Avatar billede roenving Novice
31. oktober 2008 - 15:38 #4
-- og tak for point ;~}
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