veranderende header als je over een link hovert

Status
Niet open voor verdere reacties.
S

swen1997

Gebruiker
Lid geworden
7 apr 2012
Berichten
137
Beste helpmijer`s,

Ik ben bezig met het maken van een site met recepten van Italiaanse gerechten. Ik wil graag dat als ik over de menu-knop van toetjes hover, dat het plaatje in de header dan een toetje word. Ditzelfde wil ik dan graag voor de andere knoppen, zoals hoofdgerechten, voorgerechten, etc.

Is dit mogelijk met css, en zo ja hoe?
 
Beste swen,

Ik ben niet zo goed in css maar ik denk dat dit hem is:
HTML: 
<head>
<style type='text/css'>
#x1:hover
{
background-image:url('toetje.gif');
}
</style>
</head>
<body>
<input type="button" id="x1" value="menuknop van toetjes" />
</body>

Ik weet niet of dit goed is........
 
bedankt voor de snelle reactie, ik ga er wat mee proberen en laat zo snel mogelijk weten of het lukt.
 
Het werkt, maar dan verandert de achtergrond van het plaatje zelf. is het mogelijk om in plaats van de achtergrond van de knop de achtergrond van de header te veranderen?
 
Sorry ik begrijp niet zo heel goed wat je bedoelt,
Kan je het iets beter (je zal het vast wel goed doen) uitleggen?
Misschien kan je een voorbeeld laten zien......

Nogmaals sorry dat ik je nu niet kan helpen
 
ik vind het zelf altijd lastig om uit te leggen.
ik heb nu 2 containers, 1 de header en 1 het menu met knoppen.
met de code die u me gaf verandert de achtergrond van de knop als je erover hovert, wat wij graag willen is dat dan niet de achtergrond van de knop maar de achtergrond van de header (dus een heel ander deel van de pagina) verandert.

Bij alternate hebben ze iets wat lijkt op wat wij graag willen: http://www.alternate.nl/html/index.html
na een paar seconde verandert het plaatje, maar hier moet je op de knop klikken. wij willen dit graag al hebben als je over de knop hovert.
(wij willen overigens niet dat de plaatjes automatisch veranderen, alleen als je met de muis over één van de menu-knoppen gaat)
 
HTML: 
<head>
<style type='text/css'>
#hoi
{
width:300px;
height:300px;
}
#hoi:hover
{
background:url('toetje.gif');
}
</style>
</head>
<body>
<div id="hoi"/>
<input type="button" id="x1" value="menuknop van toetjes" />
</div>

</body>

Dit is wat ik er van kan maken, maar het moet denk ik simpeler kunnen:
Ik zet de button nu in dezelfde div, die div geef ik een afmeting.
Als de afmeting van de div hetzelfde is als die van de afbeelding, ziet het er goed uit.
Maar dit kan denk ik beter.......
:rolleyes:
 
Hoi swen1997,
Ik denk dat je deze kant op moet:
  • Binnen de links zet je een lege <span>, dus bv.
    <a href="toetjes.htm">Onze wonderschone toetjes pagina<span></span></a>.
  • In de css geef je de span een absolute positie, op de plaats van de header (en ook zo groot).
  • De <body> geef je een relatieve positie, zodat de <span> absoluut geplaatst wordt t.o.v. de <body>.
  • De span krijgt het toetje-afbeelding als background image.
  • Normaal gesproken is die afbeelding buiten het scherm geplaatst.
  • Bij een hover over de link wordt met a:hover span{...} de afbeelding op zijn plek gezet.
  • Bij verschillende menu-onderdelen krijgen die elk een id, zodat de juiste afbeelding getoond kan worden die er bij hoort.

Als voorbeeld:



Met vriendelijke groet,
CSShunter
 
bedankt voor alle reacties, het is mij met de manier van webdesigner al gelukt, ik echter nog proberen om dit met de manier van csshunter te doen.

Iedereen een prettige jaarwisseling gewenst!
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan