Ik wil graag een scriptje maken, een star rating systeem. Waarbij bv. op een artikel kan stemmen hoe goed je hem vond. Dit systeem bestaat uit 5 sterretjes die allemaal grijs zijn, en als je over heen gaat worden ze geel. Net zoals bij google video. Ik kan het wel maken maar als je dan op de derde ster staat wordt alleen de derde geel! Ik wil dat dan ook de eerste en de 2e geel worden. Hoe kan ik dit doen?
Met Image Ready kan dat zeker, maar die produceert een hele hoop overhead aan JavaScript code, zoals alle programma's die kant en klare code produceren.
Vervolgens maak je een stukje javascript dat alle sterretjes vindt en er een speciale "hover" functie aankoppelt:
function attachHovers() {
for (var i = 0; i < 5; i++) {
var ster = document.getElementById('ster' + i);
ster.basesrc = ster.src;
ster.onmouseover = function () {
return sterMouseOver(this);
}
ster.onmouseout = function () {
return sterMouseOut(this);
}
}
}
Vervolgens de hover functies:
function sterMouseOver(ster) {
var id = ster.id.substr(4);
for (var i = id; i >= 0; i--) {
document.getElementById('ster' + i).src = 'ster_mouseover.png';
}
}
function sterMouseOut(ster) {
var id = ster.id.substr(4);
for (var i = id; i >= 0; i--) {
document.getElementById('ster' + i).src = document.getElementById('ster' + i).basesrc;
}
}
en dan nog het laatste stukje javascript:
function init() {
attachHovers();
}
window.onload = init;
[edit]
Typfout... Deze doet ook dat de sterretjes ervoor meekleuren (dus als je op 3 staat kleuren 1, 2 en 3)
[/edit]
Ik heb even een ander voorbeeldje gemaakt: image rollovers
Vergelijk de broncodes maar eens. In mijn geval zie je in de HTML geen JavaScript staan.
[edit]Legolas en ik zijn het aardig eens, zie ik ;-)[/edit]
Jouw script is idd overzichtelijker, wel ben je vergeten dat wanneer er bv. een rollover is bij het derde sterretje, ook het 1ste en het 2de sterretje geel moeten zijn
Het komt veel vaker voor dat je een rollover op 1 image hebt, maar het gaat om het idee. Of: zelf leren JavaScripten en strakke slanke code produceren, of: werken met een WYSIWYG programma en genoegen nemen met overhead. Iedereen mag natuurlijk zelf kiezen.
Ik ben zo vriendelijk geweest om het uit te werken, Maar de credits gaan wel naar Legolas. Met zijn uitleg (en ergens een extra }) is het helemaal gelukt om he voor elkaar te krijgen:
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function attachHovers() {
for (var i = 0; i < 5; i++) {
var ster = document.getElementById('ster' + i);
ster.basesrc = ster.src;
ster.onmouseover = function () {
return sterMouseOver(this);
}
ster.onmouseout = function () {
return sterMouseOut(this);
}
}
}
function sterMouseOver(ster) {
var id = ster.id.substr(4);
for (var i = id; i >= 0; i--) {
document.getElementById('ster' + i).src = 'over.gif';
}
}
function sterMouseOut(ster) {
var id = ster.id.substr(4);
for (var i = id; i >= 0; i--) {
document.getElementById('ster' + i).src = document.getElementById('ster' + i).basesrc;
}
}
function init() {
attachHovers();
}
window.onload = init;
</script>
</head>
<body>
<img id="ster0" src="out.gif" />
<img id="ster1" src="out.gif" />
<img id="ster2" src="out.gif" />
<img id="ster3" src="out.gif" />
<img id="ster4" src="out.gif" />
</body>
</html>
Deze manier van javascript heet 'Unobtrusive scripting' :) d.w.z: javascript code volledig buiten de html opzetten. 'Progressive Enhancement' komt hier dan ook om de hoek kijken. Met die theorie als achtergrond van je applicatie, bouw je een app die ook zonder JavaScript volledig toegankelijk is: eerst een app maken die zonder JS werkt, en dan d.m.v Unobtrusive scripting de functionaliteit eraan hangen.
Natuurlijk gaat dit niet bij alle applicaties op, maar je kan er wel grotendeels aan voldoen.
