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

Bild mit links einblenden bei klick -- bei 2.ten klick wider ausblenden

BDG

BDG

Mitglied
Also ich hab eine Seite im windows desing bzw ich will eine machen ... und bei dem start
symbol will ich auch machen dass es sich einblendet beim 1. klick und ausblendet beim 2. klick ... wie mache ich das ?
Also cih weiß ich hab das schonmal vor langer zeit gefragt aber da haben mir die links nicht geholfen ... gibt es da vielleicht ein codebeispiel ? und kann man das vielleicht machen das eine ganzen div eingeblendet wird <? weil es sol ja nicht nur ei bild sondern darauf auch die links ...
 
also ich würde das so machen dass ich im head bereich nen script schreib und des dann so gestalte:
HTML: 
<script type="text/javascript">
var offen = 0;
function change_start(){
   if(offen){
      //zummachen also
      document.getElementById('id_des_start_div').style.display = 'none';
      offen = 0;
   }else{
      //öffnen
      document.getElementById('id_des_start_div').style.display = 'inline';
      offen = 1;
   }
}
</script>
verstänglich?
bewirkt zwar kein richtiges öffnen aber es is auf jedenfall dann da^^

und um des dann zu öffnen bei klick musst du halt noch des start div machen

HTML: 
<div style="display: none;" id="id_des_start_div" onclick="change_start();">
...
</div>
ok?

ps ungeprüft und hoffentlich gehts ;)


//edit: t bei </script> hat gefehlt
danke für hinweis
 
Zuletzt bearbeitet:
hmm schonmal thx für die hilfe ... aber es geht trotzdem leider nicht ... ich schreib mal den code meiner seite :
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript">
var offen = 0;
function change_start(){
   if(offen){
      //zummachen also
      document.getElementById('id_des_start_div').style.display = 'none';
      offen = 0;
   }else{
      //öffnen
      document.getElementById('id_des_start_div').style.display = 'inline';
      offen = 1;
   }
}
</script>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="Login">
<form action="login/login.php" method="post">
Dein Username:<br>
<input type="text" size="14" maxlength="35"
name="username"><br>
Dein Passwort:<br>
<input type="password" size="14" maxlength="35"
name="password"><br><br>
<input type="submit" value="     Login     ">
</form>
</div>
<div id="start">
<img src="button-start.jpg" />
</div>
<div style="display: none;" id="start" onclick="change_start();">
<img src="STart1.jpg">
</div>
</body>
</html>
und hier der code der css :
Code: 
     body {
      background-image:url(Desktop1.jpg);
      background-repeat:no-repeat;
    }
 #Login {
    position:absolute;
       left:885px;
    top:85px;
    width:300px;
    height:150px;
       color: #efefef;
 }
    #start {
   position:absolute;
   top: 730px;
   left: 9px;
 }
 
 img {
    border: none;
    }
und PS: falls mal jemand das auch haben will muss ich ein rechtschreibfehler melden :
bei dem html code der im headbereich stehen soll hast du unten bei script das t vergessen :)
 
omg xD
aaaalso
wenn du son problem hast dass es ned funzt dann jags durchn validator
der hätt dir gsagt dass du 2 gleiche ids hast
und außerdem des
'id_des_start_div'
Zum Vergrößern anklicken....
hättest ersetzen solln^^

also(ich hab des css in den head dazu rein dann ist es nur eine datei und zusätzlich alt zu den img dazu dass mans au ohne die bilder zu haben sieht[hätte dir validator auch gesagt das zu tun])

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test seite</title>
<script type="text/javascript">
var offen = 0;
function change_start(){
   if(offen){
      //zummachen also
      document.getElementById('start').style.display = 'none';
      offen = 0;
   }else{
      //öffnen
      document.getElementById('start').style.display = 'inline';
      offen = 1;
   }
}
</script>
<style type="text/css">
 body {
      background-image:url(Desktop1.jpg);
      background-repeat:no-repeat;
    }
 #Login {
    position:absolute;
       left:885px;
    top:85px;
    width:300px;
    height:150px;
       color: #efefef;
 }
    #start {
   position:absolute;
   top: 730px;
   left: 9px;
 }
 
 img {
    border: none;
    }
</style>

</head>
<body>
<div id="Login">
<form action="login/login.php" method="post">
Dein Username:<br>
<input type="text" size="14" maxlength="35"
name="username"><br>
Dein Passwort:<br>
<input type="password" size="14" maxlength="35"
name="password"><br><br>
<input type="submit" value="     Login     ">
</form>
</div>
<div id="start_button">
    <img src="button-start.jpg" alt="button start" onclick="change_start();">
</div>

<div style="display: none;" id="start">
    <img src="STart1.jpg" alt="start">
</div>
</body>
</html>


//edit: seite hatte keinen title
 
Juhu !! THX !!!!! Es geht !!!! THXTHXTHX !
sry das ich nich selbst in den quellcode gekuckt hab :)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben