Een beetje uitleggen
Ik zal toch even wat uitleg geven over dit script.
Allereerst zie je binnen de html-tag <h3></h3> twee javascript events. (Gebeurtenissen). Namelijk onmouseover en onclick.
Zo zijn er nog veel meer, onmouseover vuurt wanneer de muis over, in dit geval, het <h3></h3> element gaat.
En onclick als je op het element drukt met de muis.
Deze events kan je in bijna alle html-tags gebruiken.
this.style.cursor = is een Cascading style element waarmee je kan bepalen wat voor pictogram er gebruikt moet worden als de muis over het <h3></h3> element gaat.
De standaard cursor welke wordt gebruikt is default.
Wat voorbeelden:
style.cursor = .....
hand
help
move
pointer
text
wait
crosshair
* - resize waarbij de asterisk (*) kan staan voor
N, NE, NW, S, SE, SW, E en W. je ziet dit zijn dus
compass directions N = Noord, NE = Noord =Oost etc.
Nieuw welke in de IE6 zijn toegevoegd zijn:
all-sroll
col-resize
no-drop
not-allowed
progress
row-resize
url(uri)
vertical-text
Uitgebreide informatie hierover kan je lezen op:
http://msdn.microsoft.com/library/d.../author/dhtml/reference/properties/cursor.asp
onclick event:
In voorbeeld -> onclick="openContent(this)"
openContent is de naam van de javascript functie de de verdere afhandeling verzorgt.
Het sleutel woord "this":
this is een sleutelwoord die staat voor het beschikbaar stellen van zichzelf inclusief alle leden en onderdelen van het element waarvan uit de functie wordt aangeroepen. Oke ik weet het klink ingewikkeld.
Het <h3> element bevat allerlei attributen waaronder het attribuut "id" zoals je kan zien in het voorbeeld. Doordat het sleutelwoord "this" als het ware alle attributen doorgeeft aan de functie waaronder het id- attribuut, kan de functie openContent daar direct gebruik van maken.
Voor een overzicht van al deze attributen van het <h3> element welke dus via het sleutel woord "this" kan worden meegegeven kan je hier zien:
http://msdn.microsoft.com/library/d...html/Quick_Reference_for_Reader_Markup_25.asp
In ons voorbeeld kan je zien dat beide <span> elementen standaard worden verborgen en pas door er op te clicken zichtbaar worden. Dit kan natuurlijk niet alleen met het <span> element, nee dit kan met alle html elementen. Zo kan je dus bijvoorbeeld een <img> element waarin een plaatje staat ook verbergen. als zo'n element verborgen is dan bestaat deze wel in het geheugen van de computer maar wordt deze niet gerenderd. Ik maak gebruik van het attribuut id om de elementen vanuit javascript te kunnen aanroepen.
Oke nu vertel ik nog wat over de javascript functie openContent zelf. (openContent is een naam die ik verzonnen heb, dit kan elke naam zijn die je zelf verzint)
Omdat we in het html-element het sleutel woord this hebben gebruikt, houdt het dus in dat de "c" in openContent(c) alle onderdelen van het element <h3> bevat. Daarom is c een object. Via c kunnen we alle elementen aanroepen van het <h3> element.
En dat doe ik dus ook.
switch (c.id)
Hiermee refereer ik aan het object c met als onderdeel id dit is dus het id nummer van het <h3> element. Omdat ik 2 verschillende elementen heb die het zelfde moeten doen gebruik ik de instructie switch waarmee ik de mogelijkheid heb om onderscheidt te maken tussen het <h3> en het tweede <h3> element. Zo kan je natuurlijk nog veel meer switches gebruiken. In switch zie je staan "case" dit wil zeggen dat deze de verschillende mogelijke waardes van het attribuut id doorloopt. Let Op! Na elk Case moet een break staan om te voorkomen dat hij de volgende case gaat uitvoeren. case is niet meer en minder dan vergelijken of in dit geval "c.id" de waarde "h1" bevat zo ja, dan worden de instructies binnen de case afgehandeld. De volgende case "h2" wordt doorlopen als "c.id" geen "h1" waarde bevat. Bevat de "c.id" ook deze niet, dan wordt er niets gedaan.
Als je goed kijkt dan kan je zien dat c.id "h1" kan bevatten. Als we dan terug kijken in het <h3> element dan kan je zien dat daar als id attribuut "h1" is opgegeven.
with statement:
Dit is een van mijn favorieten, want met dit statement kan je namelijk een path aanleggen naar een subonderdeel van een element. (Weer ingewikkeld). De instructie:
document.getElementById("") welke door alle 3 browser wordt ondersteund creerd een referentie naar in dit geval het attribuut style van het span1 of als tweede het span2 element.
Doordat we document.getElementById("") gebruiken kunnen we binnen de { } rechtstreeks de onderdelen aanspreken.
in ons voorbeeld :
with (document.getElementById("element").style)
{
Hier kan je alle mogelijke style settings aanpassen
visibility : hidden / visibile
}
dit kan ook:
document.getElementById("element").style.visibility = 'hidden' / visible
maar ook bijvoobeeld
document.getElementById("element").style.color = "#121212";
of
with (document.getElementById("element").style)
{
color = "#121212";
}
ander voorbeeld:
we hebben het element <img id="img1"> gebruikt:
with (document.getElementById("img1"))
{
src = "a.jpg";
width = 100;
height = 100;
}
Ik denk dat het nu wel duidelijk is.
Boek Tip:
Javascript 1.5 "Het Complete Handboek" is een van de boeken die ik geleerd heb.
isbn: 9039516065 € 67,50
http://www.nl.bol.com/is-bin/INTERS...0&Section=BOOK&lgl=1&plid=&lgl_BOL_OWNER_ID=1
Leuk boek om te leren.
<hr>
Hier kan je alle cursors zien die er zijn:
http://www.wernand.net/samples/cursor
Gr. Wernand
