• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] Bild bei Klick verstecken und neues erscheint

Status
Für weitere Antworten geschlossen.
J

jonas27

Neues Mitglied
Hallo,

wir sollen in der Schule eine html Seite entwickeln auf dem man nur ein kleines Bild sieht.
Wenn man dann auf dieses Bild klickt soll irgendwo auf dem Bildschirm ein neues Bild erscheinen und das,
worauf man geklickt hat soll verschwinden. Dies soll sich ein paar mal wiederholen bis schließlich das Bild wieder an der Anfangsposition erscheint und es von vorne beginnt.
Mein Problem ist, dass ich nicht weiss wie ich es schaffe, das alle anderen Bilder bis auf das Startbild versteckt werden.
Ich weiss zwar das ich e irgendwie mit visibility = 'hidden' machen muss aber ich versteh nicht ganz wo ich es einfügen muss.
Könnt Ihr mir helfen?

Hier mein Code:


<head>
<style type="text/css">

div
{
position:absolute;
}
</style>
</head>
<body>

<div style="top:25; left:100;">
<img onclick="
if(document.getElementById('i1').style.visibility != 'visible')
{
document.getElementById('i2').style.visibility = 'visible'
document.getElementById('i1').style.visibility = 'hidden'
}

"id="i1" src=click.png />
</div>


<div style="top:200; left:100;">
<img onclick="
if(document.getElementById('i2').style.visibility != 'visible')
{
document.getElementById('i3').style.visibility = 'visible'
document.getElementById('i2').style.visibility = 'hidden'
}

"id="i2" src=click.png />
</div>


<div style="top:375; left:100;">
<img onclick="
if(document.getElementById('i3').style.visibility != 'visible')
{
document.getElementById('i4').style.visibility = 'visible'
document.getElementById('i3').style.visibility = 'hidden'
}

"id="i3" src=click.png />
</div>


<div style="top:375; left:275;">
<img onclick="
if(document.getElementById('i4').style.visibility != 'visible')
{
document.getElementById('i5').style.visibility = 'visible'
document.getElementById('i4').style.visibility = 'hidden'
}

"id="i4" src=click.png />
</div>


<div style="top:375; left:450;">
<img onclick="
if(document.getElementById('i5').style.visibility != 'visible')
{
document.getElementById('i6').style.visibility = 'visible'
document.getElementById('i5').style.visibility = 'hidden'
}

"id="i5" src=click.png />
</div>




...usw




<div style="top:200; left:275;">
<img onclick="
if(document.getElementById('i17').style.visibility != 'visible')
{
document.getElementById('i18').style.visibility = 'visible'
document.getElementById('i17').style.visibility = 'hidden'
}

"id="i17" src=click.png />
</div>



<div style="top:25; left:275;">
<img onclick="
if(document.getElementById('i18').style.visibility != 'visible')
{
document.getElementById('i1').style.visibility = 'visible'
document.getElementById('i18').style.visibility = 'hidden'
}

"id="i18" src=click.png />
</div>

</body>
 
Werbung:
Du darfst das JavaScript nicht zu den Styles packen, sondern musst es in einen <script> Container verschieben und diesen möglichst vor dem schließenden <body> Tag platzieren.
 
Das versteh ich nicht ganz also diesen Teil:

div
{
position:absolute;
}

in einen Script Container?

Aber wie schaffe ich es, dass die bilder von Anfang an versteckt sind?
 
Werbung:
Ah so, nicht richtig gelesen. Du hast ja if-Abfragen in den Eventhandlern platziert. Ich habe dir nachfolgend mal ein kleines Script geschrieben, in dem ich allerdings keine Bilder sondern die DIVs ausblende. Hatte keine Lust, dafür extra images zu suchen. Die Anpassung ist dann deine Hausaufgabe. ;)

Vom Ansatz her sollte es aber verständlich sein. Die Elemente werden beim Laden der Seite per CSS invis gestellt und die Container erhalten fortlaufende Nummern, welche von den Eventhandlern als Funktionsparameter übergeben werden. Beim Klicken werden alle DIVs über eine for-Schleife unsichtbar gemacht und das nächste Element wird sichtbar. Ist das letzte Element erreicht, wird das erste aufgerufen. An sich hätte ich es eher per Array gemacht, aber durch die Nummerierung boten sich die Parameter geradezu an.

Ein Tipp noch am Rande: Du bist im falschen Forum. JavaScript !== Java.

HTML: 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Foobar</title>
</head>
<body>
    <div id="id1" onclick="hideImages(1)">Das ist ID 1</div>
    <div id="id2" style="visibility:hidden;" onclick="hideImages(2)">Das ist ID 2</div>
    <div id="id3" style="visibility:hidden;" onclick="hideImages(3)">Das ist ID 3</div>
    <div id="id4" style="visibility:hidden;" onclick="hideImages(4)">Das ist ID 4</div>
    <div id="id5" style="visibility:hidden;" onclick="hideImages(5)">Das ist ID 5</div>
    
    <script>
        function hideImages (idNr) {
            if (idNr < 5) {
                idNr = idNr + 1;
            } else {
                idNr = 1;
            }
            var id = "id" + idNr;
            for (var i = 1; i <= 5; i++) {
                var hideMe = document.getElementById("id" + [i]);
                hideMe.style.visibility = 'hidden';
            }
            var showMe = document.getElementById(id);
            showMe.style.visibility = 'visible';
        }
    </script>
</body>
</html>
 
Zuletzt bearbeitet:
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben