Je hebt TRSpeaker nodig voor deze pagina! HOME
Deze workshop is eigenlijk meer een cursus. Het is een zeer uitgebreide demonstratie van wat er mogelijk is met de onMouseover gebeurtenis. Daarnaast wil ik jullie overtuigen van het belang van de onMouseOver event . Hoewel het regelmatig wordt toegepast, wordt de potentie ervan niet echt ingezien.
De pc reageert op diverse bedieningselementen: het toetsenbord, de muis, een touchpad. Het bedienen via de muis gebeurt vooral door klikken (rechts, links, midden en dubbelklikken, slepen). Maar de muis registreert nog veel meer dingen, zoals waar die is, waar ie overheen gaat (Rollover), in welk vlak, die binnnen komt (onMouseOver) en weer uitgaat (onMouseOut). In diverse programmeertalen zijn deze Events opgenomen, maar vreemd genoeg worden ze maar zeer spaarzaam creatief in webpagina's gebruikt. En dan nog vooral voor wat aardige visuele effecten, zoals het accentueren van links. Dit hele verhaal, wat volgt is een pleidooi om het beter, vaker en creatiever in te zetten met name in aangepaste software en als bedieningswijze voor kinderen. Het is namelijk vooral in de combinatie met geluid zeer intuïtief.
De gebruiksmogelijkheden hiervan zijn heel erg groot en worden vooral door onze vindingrijkheid bepaald. Ik had bij het maken van deze workshop het volgende in gedachten: een kind met een groot (17inch) touchpad werkt; het hoort een geluid als het ergens met de hand (die hier de muisnavigatie vervangt) bij komt; deze directe koppeling zonder klik is niet alleen erg intuïtief en bedieningsvriendelijk; het schept ook de mogelijkheid een extra niveau van interactiviteit te creëren; immers het klikken blijft mogelijk en kan andere functies op zich nemen.
 |
Wat nog het meest op lijkt, op waar ik aan dacht, is dit slappe, slimme TouchStream Mini toetsenbord van Fingerworks, links, dat automatisch een touchpad wordt , als je er met je vingers over beweegt. Het is ongeveer even groot als een muismat. Het kan ook gebaren herkennen; ietsje groter is het iGesturepad, waar je niet op kunt typen en nog groter het LP Touch Stream (rechts). |  |
Gaat het alleen om het bedieningsgemak? Nee, het is ook de directe koppeling van muisbeweging en de feedback, die een heel onmiddellijke interactiviteit creëert, die naar mijn idee -goed gebruikt- heel stimulerend werkt, en niet alleen bij verstandelijk gehandicapten en kleine kinderen. Wel is het oppassen geblazen, want deze wisselwerking zit mensen dicht op de huid en kan verschrikkelijk irriteren; we zijn toch gewend aan het klikgebeuren, dat meer ruimte laat.
Voorbeelden
Het simpelste is een teksttoelichting als je met je muis over een link gaat. Dit zijn visuele effecten.
Nu naar geluid. En wel spraaksynthese. Ga maar eens met je muis over deze link (dit gebruikt TRSpeaker , gratis, download: 219 kb) toelichting code. Kun je de mogelijkheden tot instructie voorstellen, bijvoorbeeld voor nog niet lezende kinderen. En je hoeft alleen te typen wat je uitgesproken wilt hebben.
Niet te erg geschrokken? Deze onMOuseOver is gekoppeld aan een link, dat ziet er zo uit in code:
<a href="#" title="" onMouseOver="TRSpeaker1.Speak("hee moses mina tekst tekst tekst")">
Op deze pagina word MS Agent via een link opgeroepen, en ook met onMouseOver. Dit is uniek, want een dergelijk gebruik van MS Agent heb ik nog nergens kunnen vinden.
De onMouseOver event kan ook verbonden worden met een gebied, Area of een laag, Layer. Vanwege de fraaie mogelijkheden die het biedt en de eenvoud, gaan we ons op de volgende pagina vooral bezig houden met het koppelen van onMouseOver aan de area door middel van Image Mappen. Dat is het toekennen van areas, gebiedjes aan delen van een afbeelding.
Maar eerst wil ik een korte opsomming geven van wat de onMouseOver allemaal kan oproepen, en hoe je dat kan inzetten.
Op de Overzichtpagina vind je een tabel met alle scripts van deze workshop, hun mogelijkheden, hun werking en hun codes.
Je kunt er een ander venster mee openen, zoals deze popup toelichting code. Deze pagina is zelfsluitend gemaakt via een ander javascript. Je kunt zo even een toelichting of instructie geven, zonder dat er al te veel bediend hoeft te worden. Ook is hier weer geluidinbedding toegepast.
Je kunt ook binnen een webpagina tekst oproepen. Dit kun je gebruiken om een vraag te tonen; als de leerling een antwoord wil, gaat ie met de muis eroverheen; hij hoeft de pagina niet te verlaten. Bekijk hier het voorbeeld toelichting code.
Nog fraaier is dit voorbeeld; via links worden na onMousOver verschillende plaatjes getoond, met een toelichting gegeven via spraaksynthese toelichting code.
Wat denk je van een geluidsbestand, dat afspeelt als je over een link gaat toelichting code ?
Je kunt tenslotte ook een pagina maken met afbeeldingen, waarvan die elk zin verbonden met een eigen geluid, dat wordt afgespeeld via een onMouseover toelichting code . Dat lijkt voor de leek een beetje op Image Mappen, waar we ons de volgende pagina mee gaan bezig houden. Maar het is anders, omdat met Image Mappen onderdelen (plekken of velden) van een afbeelding worden aangewezen, die de gebeurtenis oproepen als de muis erover gaat.
Toen ik al bijna klaar was met deze workshop kwam ik weer eens op www.ookjij.nl , een site, die zeer bedieningsvriendelijk is. Ze gebruiken het onMouseOver zeer intensief en effectief; hun pagina's zijn gemaakt met Flash, een prachtig maar ook duur en professioneel webbouw programma van Macromedia. Kortom geen doe-het-zelf optie. Maar kijk eens op deze site naar de mogelijkheden, die deze event biedt.
In de docs. kun je via accentueringen en toelichtingen een beeld krijgen, waar je de code kan en moet bewerken, als je er zelf mee aan de slag gaat.
Op de volgende pagina gaan we aan de slag met één veel gebruikte vorm van onMuseOver de ImageMap (afbeeldingskaart).