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?
Bedankt! Die return echo'ed eigenlijk gewoon die image? Ik had ong. hetzelfde met een switch($waardering) gebouwd. Maar kan iemand me helpen met die OnMouseOver?
Met die functie heb je toch een MouseOver voor 1 afbeelding? Als je nu bijvoorbeeld op de derde ster staat (van de 5). Dan wordt alleen de derde geel en niet de 1e en de 2e. En als je op de 5e staat wordt alleen de 5e geel en niet 1 t/m 4. Enz. Ik wil graag dat als je op een ster staat alle sterren < dan die ster ook die mouseover tonen.
@ SanThe: het kan op twee manieren. De beste manier is met externe bestanden, maar omwille van de duidelijkheid doe ik het hier op het forum meestal in de head sectie (te vergelijken met embedded styles vs. linked styles)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script type="text/javascript">
function init () {
// maak een var aan die naar het goede element verwijst
// ik laat de varnamen altijd voorafgaan door een underscore
// sommige browsers schieten namelijk in de stress als je precies
// dezelfde naam gebruikt
var _plaatje1 = document.getElementById ('plaatje1');
// koppel de functie handle_mouseover aan het onmouseover event van _plaatje1
// geef het keyword 'this' mee als argument zodat het element van binnenuit de
// functie te benaderen is
_plaatje1.onmouseover = function () {
return handle_mouseover (this);
}
// koppel de functie handle_mouseout aan het onmouseout event van _plaatje1
// geef het keyword 'this' mee als argument zodat het element van binnenuit de
// functie te benaderen is
_plaatje1.onmouseout = function () {
return handle_mouseout (this);
}
}
function handle_mouseover (obj) {
obj.src = 'plaatje_over.jpg';
}
function handle_mouseout (obj) {
obj.src = 'plaatje_out.jpg';
}
// koppel de functie init aan het onload event van het window object
window.onload = init;
</script>
</head>
<body>
<img id="plaatje1" src="">
</body>
</html>
De code van dit voorbeeld is niet getest en geeft een idee. Het lijkt of dit veel omslachtiger is, maar het is modulair van opzet werkt veel handiger als je veel plaatjes en veel pagina's hebt.
Het gemakkelijkste is volgens mij met Adobe Photoshop.
Je maakt je lagen grijze sterretjes, en je lagen gele sterretjes en met Image Ready, kun je er zeer makkelijk roll-overs maken.
