✔ Javascrip onclick -> Bilder erscheinen

E

Eli-

Mitglied
hi
ich habe folgendes vor:
Ich habe mehrere Bilder untereinander: (Soll ne art Menü aus Bildern werden)

Bild1.png
Bild2.png
Bild3.png

Wenn man jetzt auf eines der Bilder klickt, sollen unter dem Bild noch andere Bilder auftauchen. z.B.

Bild1.png
Bild_das_erscheint1.png //Wenn möglich mit Link
Bild_das_erscheint1.png //Wenn möglich mit Link
Bild2.png
Bild3.png

Und das auch mit den anderen Bildern.
Ich habe das früher mal schon versucht, aber habs nicht geschafft, und jetzt brauche ich es halt für meine Webseite (DemonWars.de). Ich glaube es ist auch schwierig, die erscheinenden Bilder mit einem Link zu versehen. Mit Javascript kenne ich mich einigermaßen aus, doch das wird dann schon ziemlich schwer, finde ich.

Könnt ihr mir vllt helfen? Wäre echt nett

Lg
Dennis
 
Hi,

setze die Bilder, die erst nach dem Klick gezeigt werden sollen, in ein DIV. Dieses wird mit Hilfe der CSS-Eigenschaft display: none versteckt. Wird das Bild geklickt, wird das zugehörige Element eingeblendet.

Um die Elemente einander zuordnen zu können, könnten ihre IDs mit einem Suffix versehen sehen werden, über das sie identifiziert werden.

Beispiel:
Code: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
  <!--
.hidden{
  display: none;
}
 //-->
</style>
<script type="text/javascript">
function toggleImg(strSuffix){
  var objWrapper = document.getElementById("more_" + strSuffix);

  var strAttr = (window.getComputedStyle)? window.getComputedStyle(objWrapper, null)['display']
                                         : objWrapper.currentStyle['display'];

  objWrapper.style.display = (strAttr=="block")? "none" : "block";
}
</script>
</head>
<body>
<img id="img_01" onclick="toggleImg('01');" src="bild.jpg" alt="">
<div id="more_01" class="hidden">
  <img src="bild1.jpg" alt="">
  <img src="bild2.jpg" alt="">
</div>
<img id="img_02" onclick="toggleImg('02');" src="bild.jpg" alt="">
<div id="more_02" class="hidden">
  <img src="bild1.jpg" alt="">
  <img src="bild2.jpg" alt="">
</div>
</body>
</html>
Ciao
Quaese
 
hi,
danke für den Code, nur leider funktioniert er irgendwie nicht.
Auf DemonWars.de auf der linken Seite hab ichs mal versucht, probeweise.
Hier der Code:
HTML: 
<p>
    <img id="img_01" onclick="toggleImg('01');" src="http://www.gw-help.info/Forum/DemonWars/Bilder/Men%C3%BC/news.png" alt="News" />
</p>
<div id="more_01" class="hidden">
    <img src="http://www.gw-help.info/Forum/DemonWars/Bilder/Men%C3%BC/news.png" alt="" /><br />
    <img src="http://www.gw-help.info/Forum/DemonWars/Bilder/Men%C3%BC/news.png" alt="" />
</div>
und im Head ist es so:
Code: 
<style type="text/css">
  <!--
.hidden{
  display: none;
}
 //-->
</style>
<script type="text/javascript">
function toggleImg(strSuffix){
  var objWrapper = document.getElementById("more_" + strSuffix);
 
  var strAttr = (window.getComputedStyle)? window.getComputedStyle(objWrapper, null)['display']
                                         : objWrapper.currentStyle['display'];
 
  objWrapper.style.display = (strAttr=="block")? "none" : "block";
}
</script>
Hab ich vllt irgendwas übersehen?

Lg
Dennis
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück