afbeelding bij hover

Status
Niet open voor verdere reacties.

Julian16

Gebruiker
Lid geworden
4 mei 2007
Berichten
189
Ik ben bezig met een website over auto's. Ik wil graag dat wanneer je met de muis over een link gaat dat er een klein plaatje verschijnt waar je de auto kunt zien.

<a href="A8.html" class="link">Audi A8</a><br />

.link:hover { background-color: yellow; }

wie weet hoe ik dit kan wijzigen zodat er een plaatje verschijnt als ik eroverheenga?

bedankt :thumb:
 
Code:
.link:hover {
  background: url('plaatje.jpg');
}
 
Waarom helemaal met onnodige JavaScript willen doen terwijl het met 3 (of 1) regel kan in CSS :rolleyes:
 
Zie mijn eerste reactie.
 
Ja dat werkt niet, ik heb mijn css staan in het mapje css op mijn bureaublad en mijn afbeelding op het bureaublad. als ik C:\*\*\Desktop\plaatje.jpg gebruik werkt het niet :confused:
 
Je begrijpt ook dat je "plaatje.jpg" met vervangen door een door jouw gekozen plaatje :rolleyes:

Verder kun je beter met relatieve paden gaan werken, als je dit wilt uploaden naar een site en jij hebt er doorleuk "C:/Documents and Settings/user/.../plaatje.jpg" staan dan werkt dat natuurlijk niet.

Bevind de afbeelding zich in dezelfde map als het CSS dan doe je "plaatje.jpg" zit ie binnen de map van het CSS in een andere map dan is het "mapnaam/plaatje.jpg" ligt ie in een map lager dan de map van de CSS dan wordt het "../plaatje.jpg"

Blijven toch de basisprincipes die je moet weten wil je websites maken :confused:
 
2a9uzx3.jpg


wat gaat er mis?? :confused:
 
dat je bestand vermoedelijk op .jpg eindigt, en niet op .jpeg ...
 
Misschien werkt het als je de code vervangt met:

Code:
.link:hover{
background-image: url('AudiLogo.jpg');
}
 
Als ik het goed zie heet jouw plaatje Audilogo, zonder verder iets erachter. Dat moet je hernoemen in audilogo.jpg
Dan moet je in de css/html alleen KLEINE letters gebruiken voor namen van plaatjes, bestanden, enz. In Windows is er geen verschil tussen hoofd- en kleine letters, maar op de meeste servers (op internet dus) is er wel verschil. Audilogo.jpg is daar iets heel anders dan audilogo.jpg.
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan