Hallo liebes Forum,
wenn eins der Bilder im Code sichtbar wird, sollen die anderen nicht mehr angezeigt werden können.
Wie kann ich das am besten machen?
(If oder true -- false??)
Der Code:
HTML
<!DOCTYPE html>
<html>
<style>
</style>
<body>
<img style="visibility: hidden; float: left;" src="Pic.jpg" width="200" height="200" style="border: 0px;" id="myP" />
<img style="visibility: hidden; float: left;" src="Pic.jpg" width="200" height="200" style="border: 0px;" id="myP2"/>
<img style="visibility: hidden; float: left;" src="Pic.jpg" width="200" height="200" style="border: 0px;" id="myP3"/>
<button style="margin-left: 0px;" type="button" onclick="myFunction()">Bild1</button>
<button type="button" onclick="myFunction2()">Bild2</button>
<button type="button" onclick="myFunction3()">Bild3</button>
<button type="button" onclick="myFunction4()">Alles Löschen</button>
<p id="Text1" style="visibility: hidden; float: left; margin-top: 230px; margin-right: 0px;">Text1</p>
<p id="Text2" style="visibility: hidden; float: left; margin-top: 230px; margin-left: 30px; margin-right: 30px;">Text2</p>
<p id="Text3" style="visibility: hidden; float: left; margin-top: 209px; margin-right: px;">Text3</p>
<button type="button" onclick="myFunction5()">Text1</button>
<button type="button" onclick="myFunction6()">Text2</button>
<button type="button" onclick="myFunction7()">Text3</button>
<script>
function myFunction() {
document.getElementById("myP").style.visibility = "visible";
}
function myFunction2() {
document.getElementById("myP2").style.visibility = "visible";
}
function myFunction3() {
document.getElementById("myP3").style.visibility = "visible";
}
function myFunction4() {
document.getElementById("myP").style.visibility="hidden";
document.getElementById("myP2").style.visibility="hidden";
document.getElementById("myP3").style.visibility="hidden";
document.getElementById("Text1").style.visibility="hidden";
document.getElementById("Text2").style.visibility="hidden";
document.getElementById("Text3").style.visibility="hidden";
}
function myFunction5() {
document.getElementById("Text1").style.visibility="visible";
}
function myFunction6() {
document.getElementById("Text2").style.visibility="visible";
}
function myFunction7() {
document.getElementById("Text3").style.visibility="visible";
}
</script>
</body>
</html>
Alles anzeigen
Vielen Dank für eure Antworten