Mouse-over van een plaatje

Status
Niet open voor verdere reacties.
F

Fliene

Gebruiker
Lid geworden
17 aug 2009
Berichten
44
Hey allemaal!

We zijn nu op school bezig met HTML en css. En nu willen we als groep op de voorpagina foto's van ons hebben staan. Dit moeten links worden. De links hebben we al, maar we willen dat wanneer de muis eroverheen gaat, de foto's veranderen van kleur.

Dus we hebben gewoon 2 foto's gemaakt. Alleen nou weet ik niet zo goed hoe ik die mouse-over moet doen.

Zal al met a:hover { en dan? Want background-image komt ie op de achtergrond en hij moet op de plaats ervan komen zeg maar.

Kan iemand me hiermee helpen?

Alvast bedankt!

Groetjes Eveline
 
met photoshop kun je ze maken
 
Ja dat had ik door en heb ik dus ook gedaan.

Maar met css moet je ze mouse-over kunnen maken. Dát is dus mijn vraag.
 
Ideetje, je kunt natuurlijk het plaatje in een div zetten met als achtergrond het alternative plaatje. In de CSS kun je dan iets zetten als

#divnaam:hover{opacity:0;
}

NB: ik heb het niet zelf geprobeerd en weet dus niet zeker of het werkt.
 
Laatst bewerkt:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="nl">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title></title>
	<style type="text/css">
		a {display: block; width: 180px; height: 161px;}
		img {border: 0;}
		a#nr-001:hover img {display: none;}
		a#nr-001:hover {background: url(marietje-verschiet-van-kleur.jpg);}
	</style>
</head>
<body>
	<div>
		<a id="nr-001" href="marietje.html" title="Alle geheimen van Marietje"><img src="marietje.jpg" alt="Statieportret van Marietje" width="180" height="161" /></a>
	</div>
</body>
</html>
Werkt in IE 6, 7, 8, Opera, Safari, Google Chrome en Firefox.
De hoogte en breedte moet je natuurlijk aanpassen, net als de namen van de afbeeldingen.
De title en de alt zijn van groot belang voor zoekmachines, spraakbrowsers e.d.
De display: block is nodig bij de <a>, omdat 'n <a> anders niet groter wordt dan de tekst die erin staat. 'n Achtergrond-afbeelding erin wordt dan veel te klein.
 
Laatst bewerkt:
Een vriend van mij die had het over dat het in HTML makkelijker was. Iets met mouseover nog iets, maar dat snapte ik nog allemaal niet. Dit ga ik straks eens proberen :)
 
mouseover is geen html, dat is JavaScript. css is simpeler en werkt ook als JavaScript uit staat.
Code: 
a {display: block; width: 180px; height: 161px;}
img {border: 0;}
a:hover img {display: none;}
hoef je maar één keer op te geven voor alle links waar 't voor geldt.
Met de a:hover img {display: none;} laat je de gewone afbeelding verdwijnen.
Code: 
a#nr-001:hover {background: url(marietje-verschiet-van-kleur.jpg);}
Deze regel moet voor elke link worden aangepast: andere id, andere afbeelding.
't Kan dus nog korter dan ik hierboven heb gemaakt. De hele css wordt dan:
Code: 
a {display: block; width: 180px; height: 161px;}
img {border: 0;}
a:hover img {display: none;}
a#nr-001:hover {background: url(marietje-verschiet-van-kleur.jpg);}
 
Ja bij ons staat het idd ook bij css, dus vandaar dat ik eigenlijk wist dat het met css moet kunnen. Die vriend van mij had het wel gedaan bij een site via html, maar in css is 't dus netter?

Superbedankt voor het allemaal even uitleggen!! :)
 
Fliene zei:
Ja bij ons staat het idd ook bij css, dus vandaar dat ik eigenlijk wist dat het met css moet kunnen. Die vriend van mij had het wel gedaan bij een site via html,
Klik om te vergroten...
Of jij hebt hem verkeerd begrepen of je vriend is wat in de war, met html kun je zoiets gewoon niet doen.
 
Dit was wat hij gebruikte:

<a href="site.html" onmouseover="document.home.src='images/buttonbw.jpg'" onmouseout ="document.home.src='images/button.jpg'"><img name=home src="images/button" alt="Home" width="69" height="40" border="0"></a>

En hij staat online dus het kán wel.
 
Laatst bewerkt:
Nee, het kan niet :D
[JS]onmouseover="document.home.src='images/buttonbw.jpg'" onmouseout ="document.home.src='images/button.jpg'"[/JS]
is namelijk JavaScript. Dat het in de html staat, maakt niets uit. Als je je JavaScript uitzet in je browser, zul je zien dat 't niet meer werkt.
 
a {display: block; width: 180px; height: 161px;}
img {border: 0;}
a:hover img {display: none;}

Sorry maar hierbij laat je de afbeelding verdwijnen als je eroverheen gaat...? En dan werkt de link dus niet meer...
 
Laatst bewerkt:
Nee, de link werkt nog steeds. Omdat je de <a> als 'n blok-element hebt weergegeven met hoogte en breedte, werkt hij nog steeds. Alleen is de afbeelding weg. De link staat los van de afbeelding. Maar de link is onzichtbaar, en dat is wat lastig.
Daarvoor was de vierde regel:
Code: 
a#nr-001:hover {background: url(marietje-verschiet-van-kleur.jpg);}
Deze regel zorgt ervoor dat er 'n achtergrond-afbeelding verschijnt. De gebruiker hovert over de link en ziet alleen dat de afbeelding verandert. Maar het blijft gewoon 'n link.
 
Oke en dus het is noodzakelijk om die hoogte en breedte op te geven..? Want ik had dat blockelement dus niet gebruikt omdat ik dacht: het is toch al een plaatje. Haha :)

Ik ga het weer proberen.

Ik ben jullie echt heel dankbaar dat jullie zo veel moeite doen om het mij te laten snappen :P
 
Aha, stiekem dingen weglaten :D
Zolang die <img> in de link zit, werkt de link. Maar 'n <a> heeft van zichzelf niet meer hoogte en breedte dan nodig is om de inhoud (hier dus de <img>) weer te geven. Al je de <img> dus weghaalt, is er niets meer weer te geven, dus heeft de <a> geen hoogte en breedte meer. En werkt dus niet meer.
En 'n background-image heeft ook al geen hoogte en breedte, die vult alleen maar de achtergrond van waar hij (zij?) toevallig in staat. Dus geef je hoogte en breedte aan de <a>. En om dat te kunnen doen, moet je het in 'n blok-element veranderen.
 
Hahaha

Ja ik voel me echt een megakneus nu! :P

Edit: jeej, het is gelukt! Heel erg bedankt!!
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan