ForumübersichtHtml & CSS

Klapptext mit Bild! - Seite 1

Einloggen
Benutzername:
Passwort:

Passwort vergessen?
Kostenlos
Anmelden
Geschlossen
AutorText


B4ckflip



Punkte: 4748
Hallo Leute könnt ihr mir einen einfachen Tipp geben wir ich einen versteckten Text bzw ein Formular sichtbar mache, wenn man auf ein Bild klickt.

Also man sieht ein Bild, klickt drauf und darunter öffnet sich neuer Inhalt.

Wäre schön, wenn ihr mir was einen Tipp geben könntet.

Beste Grüße,
Dennis



Sniper
Super-Moderator



Punkte: 3620
Hallo ,

probier mal das hier ich weißt nicht ob´s Richtig ist da ich derzeit nicht daheim bin ...
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
37
38
39
<html>
<head>
<script>
/* ************************************************************** *
 * Funktion zum Ein- bzw. Ausblenden eines Elements               *
 * Parameter:                                                     *
 * strDivID - ID des Elementes, das ein-/ausgeblendet werden soll *
 * objImg   - Objekt des Bildes, das gewechselt werden soll       *
 * ************************************************************** */
function toggleDiv(strDivID, objImg){
  var myObj = document.getElementById(strDivID);
  // Falls der Container eingeblendet werden soll
  if(myObj.style.display == "none"){
    // Container einblenden
    myObj.style.display = "block";
    // Bild wechseln
    objImg.src = "up.gif";
  }else{
    // Container ausblenden
    myObj.style.display = "none";
    // Bild wechseln
    objImg.src = "down.gif";
  }
}
</script>
</head>
<body>
<div>
    <div style="height: 25px; width: 250px; background: #0080FF; padding: 3px; border: 1px solid #4F4F4F;">
        <img onclick="toggleDiv('divID_1', this)" id="imgID_1" style="float: right;" src="down.gif" width="14" height="14" alt="" />
   Überschrift
    </div>
    <div id="divID_1" style="display: none; width: 250px; background: #efefef; padding: 3px; border: 1px solid #4F4F4F; border-top-width: 0;">
        - Inhalt 1<br />
        - Inhalt 2<br />
    </div>
</div>
</body>
</html>


Liebe Grüße
Sniper

Bei Fragen oder Probleme PM me oder schreib in das Forum


Brummbaer



Punkte: 1688
@B4ckflip

Vielleicht kannst Du das auch gebrauchen was einfaches.
Wenn man das entsprechede Bild anklickt, geht eine vordefinierte Seite auf.

Hier der Code:

<p align="center"><a target="_blank" href="http://www.erol-berlin.de"><img border="0" src="http://erol-berlin.de/media/Zeitlich/Brummbaer.jpg" alt="" /></a></p>



<p align="center"> für die Position

http://www.erol-berlin.de die Seite wo es hingehen soll

http://erol-berlin.de/media/Zeitlich/Brummbaer.jpg das Bild was man sieht

Gruss Brummbaer

Geschlossen