tutorials.de Buch-Aktion 05/2012
ERLEDIGT
JA
ANTWORTEN
4
ZUGRIFFE
737
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 20.03.11 11:03 #1
    Eli- Eli- ist offline Mitglied Bronze
    Registriert seit
    Feb 2011
    Beiträge
    40
    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
     
    Zitieren Zitieren
  2. 22.03.11 09:33 #2
    Quaese Quaese ist offline Moderator
    tutorials.de Moderator
    Registriert seit
    Feb 2004
    Beiträge
    3.451
    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 :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

    <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
     
    Vielleicht muss man manchmal vom Weg abkommen, um nicht auf der Strecke zu bleiben!
    ----
    Der "Fortsetzungsroman" auf www.leuteforum.de

    New kind to realize large scalable projects with jQuery: jQuery SDK
    Zitieren Zitieren
  3. 22.03.11 15:17 #3
    Eli- Eli- ist offline Mitglied Bronze
    Registriert seit
    Feb 2011
    Beiträge
    40
    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-Code:
    <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 :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

    <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
    Geändert von Eli- (22.03.11 um 17:14 Uhr)
     
    Zitieren Zitieren
  4. 22.03.11 21:59 #4
    Quaese Quaese ist offline Moderator
    tutorials.de Moderator
    Registriert seit
    Feb 2004
    Beiträge
    3.451
    Hi,

    es funktioniert schon, nur wird die Klasse .hidden bereits in http://s.jimdo.com/app/cdn/min/group...s?201103221230 verwendet und dort mit der important-Regel dauerhaft auf nicht sichtbar gesetzt.

    Lösung:
    Nenne die Klasse um - z.B. in clsHidden. Nicht vergessen, die Werte der class-Attribute in den "more"-Elementen anzupassen.

    Ciao
    Quaese
     
    Vielleicht muss man manchmal vom Weg abkommen, um nicht auf der Strecke zu bleiben!
    ----
    Der "Fortsetzungsroman" auf www.leuteforum.de

    New kind to realize large scalable projects with jQuery: jQuery SDK
    Zitieren Zitieren
  5. 23.03.11 06:21 #5
    Eli- Eli- ist offline Mitglied Bronze
    Registriert seit
    Feb 2011
    Beiträge
    40
    hi,

    danke hat geklapt!

    Lg
    Dennis
     
    Zitieren Zitieren
« Variable in Attributfilter benutzern [jQuery] | [mootool] Prüfen ob ein Objekt vorhanden ist... »

Ähnliche Themen

  1. Bilder fixieren, auf einem Punkt erscheinen
    Von amberrachel im Forum CSS
    Antworten: 11
    Letzter Beitrag: 02.01.10, 14:46
  2. Bilder tauschen per OnClick()
    Von Radhad im Forum Javascript & Ajax
    Antworten: 3
    Letzter Beitrag: 02.03.06, 09:59
  3. Bilder erscheinen nicht - aber wo liegt der Fehler?
    Von UnderMonkey im Forum HTML & XHTML
    Antworten: 7
    Letzter Beitrag: 15.09.05, 20:28
  4. javascrip aus php aufrufen
    Von westwind im Forum PHP
    Antworten: 2
    Letzter Beitrag: 13.02.05, 12:36
  5. JavaScrip platzieren
    Von ozdesign im Forum CSS
    Antworten: 0
    Letzter Beitrag: 01.11.04, 04:19

Stichworte