Onmouseover onmouseout – html, javascript, css

_{Pagina 1 van 2}
1 |2| volgende»

door: Joriso

De mouseover is een van de frequentst toegepaste manieren om HTML webpagina's op te leuken met behulp van o.a. Javascript en CSS. De term mouseover duidt op het bewegen van de cursor (dmv de muis) over een object op een html webpagina - zoals een link, plaatje of tekst. Dit heet 'n html onmouseover event.

mouseover!

Het html onmouseover event is een eenvoudig gereedschap om een mouseover effect toe te voegen aan een button, navigatie menu of cursor, en zo een html pagina grafisch interessanter te maken. Daarnaast kunnen ook met gebruik van bijv. javascript, CSS stylesheets, Flash of Java spectaculaire effecten worden gegenereerd die door de mouseover worden getriggered.

Het onmouseover event kan een willekeurig script laten uitvoeren. Het kan met behulp van javascript dus bijvoorbeeld ook een alert box of een popup window openen of een geluid laten afspelen, enz.

Inhoud:

Mouse over javascript
Mouse over css

Simpele Onmouseover button in javascript

Om met een javascript mouseover een plaatje of button te laten verspringen heb je minimaal twee image bestanden nodig. Naast het oorspronkelijke image bestand dien je daarbij ook een tweede image bestand te 'preloaden'. Als je dit nalaat loopt je mouseover image swap te traag en lijkt het effect nergens naar.

Stel we gebruiken de volgende twee jpeg plaatjes en noemen ze (bijvoorbeeld) mouseover1 en mouseover2.

Deze sla je op je in dezelfde map waarin je de html pagina met het mouseover script hebt opgeslagen.

mouseover1.jpg

mousover2.jpg

Om een image file te laden voor de pagina wordt getoond zet je de volgende code tussen de <head> </head> tags van je html pagina:

</script>

Om nu bijvoorbeeld een mouseover button – link te maken plaats je de volgende code tussen de <body></body> tags in de html pagina waarin je de button wilt zien. Je definieert hier wat er gebeurt wanneer de cursor over het element gaat (onmousover) als wanneer deze er weer van verwijdert wordt (onmouseout).

<a href="http://www.joriso.nl"

onMouseOver="document.mouseover.src=image2.src" onMouseOut="document.mouseover.src=image1.src">

Voor alle duidelijkheid: De volledige html pagina – met javascript toegevoegd – komt er dus zo uit te zien:

</script>
</head>
<body>

<a href="http://www.joriso.nl" onMouseOver="document.mouseover.src=image2.src" onMouseOut="document.mouseover.src=image1.src">
<img src="mouseover1.jpg" border=0 name="mouseover"></a>

</body>
</html>

En ziehier een voorbeeld van de resulterende mouseover button:

mouseover!

Op dezelfde manier als bij het onmouseover effect kun je ook nog een onclick event instellen voor wanneer er op de button geklikt wordt. Dan heb je een derde plaatje nodig.

_{Pagina 1 van 2}
1 |2| volgende»

Commentaar van bezoekers:

van: Andrew

23:57:43, 30th-Oct-06

Misschien niet onbelangrijk is om er bij te vertellen dat "document.mouseover.src" verwijst naar het "name="mouseover"" atribut in het img element en dat die name maar 1 keer kan worden gebruikt, dus bij een tweere mouseover buton oid wordt het bv "document.mouseover2.src" en "name="mouseover2""...anders werken bijden niet!

van: Hannes

10:20:14, 12th-Dec-06

URL: http://www.dreamchannel.be

Idd, Andrew, goede tip !

van: Eveline

14:02:08, 7th-Jul-07

Ik wil dus inderdaad meerdere knoppen.
Maar kom er niet uit met bovenstaand commentaar.
Kan je me misschien helpen?
Want als ik via google zoek op zo'n script zie ik door de bomen het bos niet meer en op deze site staat het verdomd goed uitgelegd.

van: flupke

21:43:18, 7th-Jul-07

<html>
<head>
<script language="Javascript">



</script>
</head>
<body>

<a href="http://www.joriso.nl" onMouseOver="document.mouseover.src=image2.src" onMouseOut="document.mouseover.src=image1.src">
<img src="mouseover1.jpg" border=0 name="mouseover"></a>

<a href="http://www.joriso.nl" onMouseOver="document.mouseover2.src=image4.src" onMouseOut="document.mouseover2.src=image3.src">
<img src="bla.jpg" border=0 name="mouseover2"></a>

</body>
</html>

enz....

van: Kris

15:04:56, 25th-Jul-07

Kan je aan een onMouseOver 2 verschillende events koppelen: bvb. een plaatje openen en tegelijkertijd een wav-bestandje afspelen? Zoja, hoe moet je dat doen?

van: Cris

10:23:51, 26th-Jul-07

nee dat kan niet

van: pietje prik

11:37:30, 26th-Jul-07

Kris - Natuurlijk kan dat - alleen koppel je dan niet twee events aan een mouseover. Je begrijpt het verkeerdom -

De mouseover is de event. 1 mouseover is dus altijd maar 1 event. Maar aan dit event kun je zoveel acties tegelijk koppelen als je maar wilt - plaatjes openen muziek of filmpjes spelen enz. is geen enkel probleem.

Je moet ze gewoon alle acties in een javascript functie zetten die je triggered op het moment dat het onmouseover event plaatsvindt.

van: floepq

11:39:15, 26th-Jul-07

floep

van: Kris

08:54:37, 27th-Jul-07

Even concreet:
Stel: ik wil bij mouse-over op basketbal.gif twee dingen laten gebeuren:
1. actie1: plaatje.jpg laten verschijnen
2. actie2: geluid.wav laten horen

Ik laat dus als volgt de functie LetsGo aanroepen bij mouse-over:
<div align="center"><a href="#"><IMG SRC="basketbal.gif" onmouseover="LetsGo(actie1,actie2)" onmouseout="hideTip()" width="64" height="64" border="0"></a>

Welk javascript moet ik dan in de functie LetsGo zetten zodat de 2 acties tegelijk uitgevoerd worden?

van: pietje prik

19:45:31, 27th-Jul-07

Dit heeft nix meer te maken met mouseover
dergelijks
function letsgo(){
document.getelementById ('idvanjeplaatjedatjeeerderopdehtml pagina hebt gezet met eigenschap display:hidden').style.display="block";

//en in de regel daaronder zet je iets om je wav bestandje af te spelen - even googlen
}
de functie moet in de head van je html pagina

van: Sander

21:42:07, 8th-Aug-07

URL: http://www.wittecobra.nl

Hoi,
Kan ik ook een SWF file een onmouseover link geven? dat hij als je er overheen gaat naar een andere html pagina gaat?

Ik heb een filmpje gemaakt met flash mx2004 nu wil ik hem op mijn site zetten en zodra je er met de cursor over heen gaat naar main.html gaat.

Ik hoop dat jullie kunnen helpen??

van: Stijn

20:15:09, 28th-Jan-08

URL: http://steimar.nl/

Volgends mij kan dat niet ik heb al eens geprobeerd het zo <a href="URL">SWF</a> te doen en het lukte niet :P

van: piet

08:28:36, 22nd-Apr-08

hoe zit dan met 8 links?

van: fabian

11:04:06, 23rd-May-08

URL: http://fabian.juistekeus.nl

op mijn site veranderd de kleur van link als je er overheengaat

van: Marvin

14:48:04, 23rd-Jun-08

Heel relaxed! werkt perfect!

van: .daniel

14:50:24, 24th-Jun-08

het gebruik van de hoofdletters (onMouseOver / onMouseOut) komt niet door de w3c validatie. Gebruik onmouseover resp. onmouseout...

van: femke

20:48:08, 11th-Aug-08

dank je wel voor deze zeer bruikbare informatie!

van: lemmy

00:30:59, 1st-Oct-08

he, he, eindelijk heb ik het voor elkaar. Goede info hier. Top!

van: daniella

21:19:39, 28th-Oct-08

hoiii...

ik wil dat ook proberen om een mouse-over met plaatje en geluid uit te voeren
het lukt me alleen los :S
of de mouse-over van het plaatje dat het veranderd
of de moouse-over van het geluid dat jet het hoort als je erover gaat
maar niet beide!

willen jullie het even duidelijk zetten, want ik begrijp het niet helemaal zoals het hierboven staat!

DANKJEWEL

van: cil

22:11:45, 25th-Dec-08

graag zou ik ook een html script hebben om een miniatuur afbeelding vanuit fp gemaakt met een mouse over naar de originele afbeelding te linken , maar weet niet welk script ik hiervoor nodig heb, dus wil niet de miniatuur met een mouse over naar een nieuwe pagina maar gewoon vergroten. Wie kan mij helpen>

van: carminda

21:06:50, 25th-Jan-09

Hoi Joris,

Begrijp ik het goed? Als je meerdere img wilt laden dat het vertragende werkt? Bijv: 25x25 plaatjes .

Mijn probleem is: ik zoek een mogelijkheid om 25x img die aan de voorkant zich laadt en 25x img achterkant laadt dmv Onmouseover en out.
heb jij misschien een andere tip voor mij?

ik dacht aan roteren of flippen, maar helaas tot nog toe nog geen resultaat.

Misschien kunt jij mij hierbij helpen.

Groet,
Carminda

info@meuporto.net

van: melis

14:18:00, 18th-Feb-09

hallo,

ik wil mousover hebruiken bij buttons.
Ik heb op mijn site 50 verschillende buttons...
Moet ik dit dan op iedere pagina zetten, of kan het ook in css ofzow????

Heb er totaal geen verstand van.

Bedankt alvast!

van: bart

16:17:40, 12th-Apr-09

hey, kan iemand me helpen,

wat moet ik intypen als ik een link bijvoorbeeld met rode letters wil laten oplichten

<a href="www.gogle.nl" onMouseover="?">Link1</a>

wat moet er in de plaats van de vraagteken staan?!?

Alvast bedankt!

van: Geart

12:12:35, 5th-Jul-09

Zo werkt het ook:

1.
function mouseOver()
2.
{
3.
document.getElementById("b1").src ="images/menubuttons/homebuttononmouse.png";
4.
}
5.
function mouseOut()
6.
{
7.
document.getElementById("b1").src ="images/menubuttons/homebutton.png";
8.
}
9.
function mouseOver2()
10.
{
11.
document.getElementById("b2").src ="images/menubuttons/attractiesbuttononmouse.png";
12.
}
13.
function mouseOut2()
14.
{
15.
document.getElementById("b2").src ="images/menubuttons/attractiesbutton.png";
16.
}
17.
</script>
18.
</head>
19.
<body>
20.

21.
<div id="wrapper">
22.

23.
<div id="header"></div>
24.
<div id="menuspacetop"></div>
25.

26.
<div id="navigation">
27.
<a href="index.html"> <img class="menuimages" src="images/menubuttons/homebutton.png"
28.
id="b1" width="80" height="35" onmouseover="mouseOver()" onmouseout="mouseOut()" /></a>
29.
<a href="attracties.html"> <img class="menuimages" src="images/menubuttons/attractiesbutton.png"
30.
id="b2" width="124" height="35" onmouseover="mouseOver2()" onmouseout="mouseOut2()" /></a>

van: Laura

11:01:12, 8th-Jul-09

Goedemorgen,
Kan iemand mij helpen??
Ik maak de website voor mijn werk.. maar ik krijg bovenstaande niet voor elkaar.
Het gaat om fotootjes van medewerkers.. deze zijn zw en moeten dan kleur worden.. ik zie alles de foto in zwart wit maar deze verandert dus niet in kleur als ik met de muis erover heen ga..? De code heb ik ook al 100 x nagekeken.... hellup!

van: Gerrit maassen van den brink

14:55:13, 29th-Jul-09

URL: http://reverewolf@hotmail.com

wat gaat hier mis?

<!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>
<script language="JavaScript">

</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>OnlyGSM.nl</title>
<style type="text/css">

</style></head>

<body><center>
<table width="800" height="1162" border="1" background="backgroundnew.jpg">
<tr>
<td align="left" valign="top"><p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p align="center">
<a href="" onMouseOver="document.mouseover.src=image2.src" onMouseOut="document.mouseover.src=image1.src">
<img src="Menu/Mouseover/htc-logo.png" alt="" name="mouseover" width="150" height="82" border=0 id="image1"></a>

<a href="" onMouseOver="document.mouseover1.src=image4.src" onMouseOut="document.mouseover1.src=image3.src">
<img src="Menu/Mouseover/samsung-logo.png" border=0 width="150" height="82" name="mouseover1" id="image2" /></a>

<a href="" onMouseOver="document.mouseover2.src=image6.src" onMouseOut="document.mouseover2.src=image5.src">
<img src="Menu/Mouseover/sonyericsson-logo.png" border=0 name="mouseover2" width="127" height="82" id="image3" /></a>

<a href="" onMouseOver="document.mouseover3.src=image8.src" onMouseOut="document.mouseover3.src=image7.src">
<img src="Menu/Mouseover/lg-logo.png" border=0 width="173" height="78" name="mouseover3" id="image4" /></a>

<a href="" onMouseOver="document.mouseover4.src=image10.src" onMouseOut="document.mouseover4.src=image9.src">
<img src="Menu/Mouseover/nokia-logo.png" border=0 width="180" height="64" name="mouseover4" id="image5" /></a>

 </p>
</div></td>
</tr>
</table>
</center>
</body>
</html>

van: Teun

22:29:46, 5th-Sep-09

Is het mogelijk om Dat je over het plaatje gaat er een ander plaatje komt, en dat als je er op klikt nog een ander plaatje komt!=

van: Annemieke

13:09:44, 21st-Sep-09

Hoe kan ik in een afbeelding een geluidseffect met mouseover effect toevoegen

van: Dennisjee.

18:33:40, 4th-Oct-09

het kan veel makkelijker.

<a href=\"#\">
<img src=\"button_normal.bmp\" onmouseover=\"this.src=\'button_mouseover.bmp\'\" onmouseout=\"this.src=\'button_normal.bmp\'\">
</a>

van: Dennisjee.

18:34:27, 4th-Oct-09

De slashes ff wegdenken.

van: Frans

20:41:26, 19th-Oct-09

Vraag:

Het lukt me wel met Mouseover maar als ik er op klik gaat IE naar de map van het HTML document, hoe kan ik dat voorkomen?

van: wesley

19:53:33, 10th-May-10

er is hier nogal een tijdje niet op gereageerd dus vraag me af of dat nog gebeurd, maar toch heb ik een vraagje..

Ik probeer meerdere van die rolloverimages op 1 pagina te krijgen, zoals uitgelegd op de eerste pagina..

maar zodra ik een 2de aanmaak en daar met me muis overheen ga veranderd het eerste plaatje en niet het 2de..

ik heb de java code nu zo:

<script language="Javascript">

</script>

<script language="Javascript">

</script>

en de 2 html images:

<a href="#" onMouseOver="document.mouseover.src=image2.src" onMouseOut="document.mouseover.src=image1.src"><img src="../img/orgineel.jpg" border=0 name="mouseover"></a>
<br />
<br />

<a href="#" onMouseOver="document.mouseover.src=test2.src" onMouseOut="document.mouseover.src=test1.src"><img src="../img/orgineel.jpg" border=0 name="mouseover1"></a>

van: wesley

20:11:22, 10th-May-10

probleem opgelost op de manier van Dennisjee ;-) bedankt daarvoor :p
dit is een veel duidelijkere en eenvoudigere manier als je alleen de rollover nodig hebt.

van: erik

11:43:58, 29th-May-10

super die oplossing van Dennisjee. Véél makkelijker!

Commentaar toevoegen:

Naam:
Link:^{(niet verplicht)}
Commentaar:
^{<-- code:}