Andere afbeelding bij muisovergang

Status
Niet open voor verdere reacties.
C

coolegino

Gebruiker
Lid geworden
26 mei 2009
Berichten
31
Hallo,

Ik zou graag willen weten hoe je een andere afbeelding krijgt als je over een afbeelding heen gaat.

Neem als voorbeeld www.ah.nl als je daar over bijvoorbeeld acties heen gaat met de muis, zal je zien dat er een kleur achter komt. Dit wil ik ook graag.
 
Je kunt makkelijk bij een hover-event de achtergrond veranderen.

HTML: 
<style type="text/css">

.mouseOver {

  background: url(image.png);
  /* of */
  background: #ff0000;

}

.mouseOver:hover {

  background: url(imageHover.png);
  /* of */
  background: #00ff00;

}

</style>

<div class="mouseOver">

Als je hier overheen gaat verandert de achtergrond kleur van rood naar groen.

</div>
 
Hiervoor zal je moeten gaan werken met css, en dit komt er dan ongeveer zo uit te zien:

Code: 
.link {
/* Normale link */
background-color: #808080; /* Achtergrond = Navy */
background-image: url("evteenafbeelding.png"); /* Hier e.v.t. een achtergrondafbeelding */
background-repeat: no-repeat; /* achtergrond niet herhalen */
}
.link:hover {
/* Link mouse-over */
background-color: #000000; /* Achtergrond = Zwart */
background-image: url("andereafbeelding.png"); /* Hier e.v.t een andere achtergrond */
background-repeat: no-repeat; /* Nog steeds niet herhalen */
}

En in HTML word het dan zoiets:

HTML: 
<a class="link" href="#">Hier de tekst</a>

[EDIT]
@ErikBooy: Je was me voor... :D
[/EDIT]
 
Laatst bewerkt:
Bij een hover blijven de eigenschappen die je niet opnieuw declareert gewoon in stand. De background-repeat in je hover block is dus overbodig ;)

Overigens kan het natuurlijk ook nog met een stukje javascript:

HTML: 
<img src="image.png" alt="image" onmouseover="this.src='imageHover.png'" />
 
Ga ik me er ook nog even tegenaan bemoeien :)
't Kan nog korter:
Code: 
.link:
{background-color: #808080; /* Achtergrond = Navy */
background-image: url("evteenafbeelding.png"); /* Hier e.v.t. een achtergrondafbeelding */
background-repeat: no-repeat; /* achtergrond niet herhalen */
}
.link:hover {
/* Link mouse-over */
background-color: #000000; /* Achtergrond = Zwart */
background-image: url("andereafbeelding.png"); /* Hier e.v.t een andere achtergrond */
background-repeat: no-repeat; /* Nog steeds niet herhalen */
}

Code: 
.link:
{
background: #808080 url("evteenafbeelding.png") no-repeat;
}

.link:hover
{
background: #000 url("andereafbeelding.png") no-repeat;
}

Ik herhaal dat no-repeat trouwens wel. Ik weet niet meer welke, maar een of andere browser krijgt soms kuren als je 'n deel niet herhaalt. Dus herhaal ik 't altijd, maar daardoor weet ik niet meer welke 't was :(
(Durf wel om 'n krat pils te wedden dat 't dat foutenfestival IE 6 is...)
 
Goeroeboeroe zei:
(Durf wel om 'n krat pils te wedden dat 't dat foutenfestival IE 6 is...)
Klik om te vergroten...

Alleen jammer dat ik dan niet drink, ben ook pas 15...:D:D

Ik schrijf altijd alles het liefst op een aparte regel, dat vind ik duidelijker en dan kan ik alles goed uit elkaar houden...
 
Ik herhaal dat no-repeat trouwens wel. Ik weet niet meer welke, maar een of andere browser krijgt soms kuren als je 'n deel niet herhaalt. Dus herhaal ik 't altijd, maar daardoor weet ik niet meer welke 't was :(
Klik om te vergroten...

Dat komt inderdaad omdat je de 'shorthand-notatie' gebruikt. Doordat je opnieuw background definieert wis je de complete vorige bepaling van background voor dat element. Dan is inderdaad ook de no-repeat clause weg.
 
Dan maak ik er alcoholvrije pils van, is ook veel beter.
Ik vrees trouwens dat ik m'n weddenschap verlies. 't Heeft natuurlijk inderdaad met die shorthand te maken. Dat krijg je ervan als je gaat opscheppen wie 't kortst kan, maak je de meest oenige fouten :) Elke browser doet dat inderdaad.
Waar ik 't mee verwarde: in IE 6 werkt background: met alleen 'n url af en toe niet en is background-image nodig, zelfs als je verder helemaal niets opgeeft. En dat is volgens mij 'n echte bug.

Op 'n aparte regel is wel overzichtelijk en zeker in 't begin misschien wel handig, maar op 'n gegeven moment worden sommige stylesheets zo groot dat je vanzelf wel shorthand gaat gebruiken. Vooral bij border kan 't enorm schelen.
 
volgens mij is deze vraag nu wel opgelost :)
ik zou het persoonlijk met javascript doen :)
 
Tenzij je natuurlijk de WebDeveloper toolbar gebruikt in FF ;) Maar dat terzijde :p
 
ErikBooy007 zei:
Tenzij je natuurlijk de WebDeveloper toolbar gebruikt in FF ;) Maar dat terzijde :p
Klik om te vergroten...

Ach ja, die drie mensen die dat gebruiken...:D:D:D

Ik zou toch voor de CSS gaan, hoewel JS misschien makkelijker is als je een heel uitgebreid CSS-bestand hebt.
 
Haha, ik ben het met je eens hoort, CSS is de mooiste oplossing, JS de makkelijkste. Ik zou toch voor CSS gaan.
 
Hè? Ik vind css juist het makkelijkste. En dat kun je inderdaad niet uitzetten. (Althans: ik zet dat alleen uit om te zien of 'n site nog toegankelijk is voor 'n spraakbrowser en zo.)
 
Nou ja, ik vind alleen maar:

PHP: 
onmouseover="this.src='imageHover.png'"

toevoegen toch wel het makkelijkst. Aan gezien je bij het gebruik van een achtergrond ook nog de hoogte en breedte van je element in moet stellen, etc.
 
Nee, want die heb je toch al ingesteld bij de originele achtergrond-afbeelding? En aangezien 'n background-image gewoon het element vult, hoef je dat niet nog 'ns te doen.
En bij 'n gewone <img> moet je ook (eigenlijk) hoogte en breedte opgeven.
Of zit ik nou weer te slapen?
 
Als je puur een afbeelding weer wilt geven (zoals we in het voorbeeld aangaven) in bijv. een div, zul je toch de afmetingen in die CSS declaratie moeten meegeven. Anders wordt je div gewoon 0px * 0px. Dat bedoelde ik. En bij een gewoon <img> hoef je geen breedte en hoogte op te geven. Alleen als die afwijkt van de standaardafmetingen van het document.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan