"Tage Danielsen" <tagedanielsen@tiscali.dk> skrev i en meddelelse
news:47187bc3$0$2091$edfadb0f@dtext02.news.tele.dk...
>
>
>> 1. Lav et billede, og så en kopi, hvor du fjerner fem dele
>> 2. På originalen, brug image map og area
>>
http://www.w3schools.com/tags/tag_area.asp og
>>
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_areamap til at
>> definere de klikbare områder, dette findes der programmer til. Og -
>> 3. brug CSS hover med cursor:cross til at sætte cursoren til det samme,
>> lige meget hvor den er på billedet
>>
http://www.w3schools.com/css/pr_class_cursor.asp.
>
> Den er jeg helt med på
>
>> 4. Linksne i area kan laves med henvisning til en simpel JS-tæller. Eller
>> du kan gøre det med lidt serverside. tror ikke, du kommer ud over én af
>> delene.
>
> Her kniber det så lidt mere - har du evt et forslag til en simpel tæller -
> jeg har ledt og ledt på nettet, men syntes ikke lige at kunne finde det
> rigtige.
>
> T Danielsen
>
En simpel tæller kan vist ikke gøre det. Så kan man klikke 5 gange på samme
fejl, og få at vide at opgaven er løst...
<script type="text/javascript">
Fundet = new Array( 5);
for ( idx = 0; idx < 5; idx ++) {
Fundet[ idx] = false;
}
function MapFundet( idx) {
Fundet[ idx] = true;
AllFound();
}
funktion AllFound() {
var total = 0;
for ( idx = 0; idx < 5; idx++) {
if ( Fundet[ idx] == true) {
total++;
}
}
if ( total < 5) {
document.getElemtById( 'res_txt').innerHTML = "Du har fundet
"+total+" af 5 fejl";
}
else {
document.getElemtById( 'res_txt').innerHTML = "Du har fundet alle 5
fejl";
}
// eller simplere, men mindre overskueligt:
// document.getElemtById( 'res_txt').innerHTML = ( total < 5) ? "Du har
fundet "+total+" af 5 fejl" : "Du har fundet alle 5 fejl";
}
</script>
I de 5 områder i areamap, hvor ændringerne er, sætter du
onclick="MapFundet( X);" hvor X er fra 0 til 5, forskelligt for hvert
område.
Hvor areamappet klikkes forkert, sætter du onclick="AllFound();". Man kunne
også lave en anden funktion, der via "res_txt" fortæller at klikket var
forkert.
Et sted i HTML skal du så have en div eller span ( eller hvad der nu ellers
passer i dit design), med <xx id="res_txt"></xx>. Det vil så vise resultatet
efter et klik.
Der er omkring en million andre måde det kan gøres på - dette blot for at
give dig ideen, og det er i øvrigt ikke testet.
En god ting at tilføje, kunne være en markering af de områder der er blevet
korrekt identificeret som fejl - evt. med mulighed for at vise, de brugere
der må give op, den rigtige løsning.
(Der er intet i verden så frustrerende som ikke at få svaret på en opgave
man ikke selv kan løse!)
Birger