Suche im Forum:
Suchen


Autor Nachricht
Beitrag12.07.2010 um 11:16 (UTC)    
Titel: CSS - div box bei klick auf Button anzeigen
Antworten mit Zitat
Ich bekomm es einfach nicht hin.
weiß jemand vielleicht wie ich das realiesieren kann?

also wenn man auf den Button klickt, soll die box da erscheinen wo ich sie positioniere. bei erneutem klick auf den button, soll sie wieder verschwinden Wink

danke schon mal im vorraus!
↑
Beitrag12.07.2010 um 11:42 (UTC)    
Titel: Box per Klick erscheinen lassen
Antworten mit Zitat
Hallo

Das ist recht einfach:


1) Wenn du Box und Button irgendwo im Design platzieren möchtest:

Code in "Text über Design":

Zitat:

<script type="text/javascript">

function switch()
{
if(document.getElementById("Meine_Box").style.display == "block")
{
document.getElementById("Meine_Box").style.display = "none";
}
else
{
document.getElementById("Meine_Box").style.display = "block";
}
}

</script>


<div id="Meine_Box"> ... HIER INHALT DER BOX ... </div>

<div id="Mein_Button"><input type="button" value="TEXT AUF BUTTON" onclick="switch();"></input></div>




"Code ohne Style-Tags":

Zitat:

<style type="text/css">
<!--

#Meine_Box
{
display: none;
z-index: 10;
position: absolute;
top: 300px;
left: 50%;
margin-left: -200px;
width: 400px;
height: 200px;
background-image: url(URL HINTERGRUNDBILD);
background-color: #FARBCODE FÜR HINTERGRUNDFARBE;
font-family: Arial;
text-align: left;
color: #TEXTFARBE;
font-weight: normal;
font-size: 13px;
text-decoration: none;
border: none;
}

#Mein_Button
{
z-index: 11;
position: absolute;
top: 500px;
left: 50%;
margin-left: -100px;
width: 200px;
height: 100px;
background-image: url(URL HINTERGRUNDBILD);
background-color: #FARBCODE FÜR HINTERGRUNDFARBE;
font-family: Arial;
text-align: center;
color: #TEXTFARBE;
font-weight: normal;
font-size: 16px;
text-decoration: none;
border: none;
}

//-->
</style>




2) Wenn du die Box frei und den Button im Textfeld platzieren möchtest:


Code in "Text über Design":

Zitat:

<script type="text/javascript">

function switch()
{
if(document.getElementById("Meine_Box").style.display == "block")
{
document.getElementById("Meine_Box").style.display = "none";
}
else
{
document.getElementById("Meine_Box").style.display = "block";
}
}

</script>


<div id="Meine_Box"> ... HIER INHALT DER BOX ... </div>




"Code ohne Style-Tags":

Zitat:

<style type="text/css">
<!--

#Meine_Box
{
display: none;
z-index: 10;
position: absolute;
top: 300px;
left: 50%;
margin-left: -200px;
width: 400px;
height: 200px;
background-image: url(URL HINTERGRUNDBILD);
background-color: #FARBCODE FÜR HINTERGRUNDFARBE;
font-family: Arial;
text-align: left;
color: #TEXTFARBE;
font-weight: normal;
font-size: 13px;
text-decoration: none;
border: none;
}

//-->
</style>




In "Quellcode" der Seite, wo der Button sein soll an die gewünschte Stelle:

Zitat:

<p align="center"><input type="button" value="TEXT AUF BUTTON" onclick="switch();"></input></p>




Das grüne musst du noch anpassen.


Ich hoffe, das hilf dir, da ich den Code jetzt nicht getestet habe; müsste aber klappen.


Gruß


Zuletzt bearbeitet von ill-fated am 12.07.2010, 13:08, insgesamt 2-mal bearbeitet
↑
Beitrag12.07.2010 um 11:52 (UTC)    
Titel:
Antworten mit Zitat
klappt leider nicht Sad die box ist IMMER sichtbar Sad
↑
Beitrag12.07.2010 um 11:53 (UTC)    
Titel:
Antworten mit Zitat
Hää
Willst du jetzt dein Button Transparent machen oder was ?
______________
↑
Beitrag12.07.2010 um 11:58 (UTC)    
Titel:
Antworten mit Zitat
nein ich will einfach einen button der bei klick eine div box ein/aus blendet.

ca so:
klick -> box da
klick -> box weg
...usw

leider bekomm ich das nicht hin
↑
Beitrag12.07.2010 um 12:20 (UTC)    
Titel:
Antworten mit Zitat
Soweit ich sehe ist das die Klasse für die Box:

Zitat:

.Extras {
display: none;
margin: auto;
width: 300px;
padding: 10px;
font-size: 18px;
background-image: url(http://img.webme.com/pic/t/tombraiderinsider/rock_bg_new.jpg);
background-color: #ffffff;
border: 1px solid #B9B9B9;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;}



Bevor sie eingeblendet werden kann, musst du sie ausblenden (das rote).


Und in den Code des Buttons musst du dann das schreiben (laut deinem Code):

Zitat:

<input type="submit" value="search" onclick="if(document.getElementById('Extras').style.display == 'block'){document.getElementById('Extras').style.display = 'none'; }else{document.getElementById('Extras').style.display = block'; }; "/>




Ist praktisch derselbe Code wie oben bereits geschrieben, nur anders aufgebaut.


Zuletzt bearbeitet von ill-fated am 12.07.2010, 13:22, insgesamt 2-mal bearbeitet
↑
Beitrag12.07.2010 um 14:08 (UTC)    
Titel:
Antworten mit Zitat
text über dem design:
<div id="menu">lala</div>

<script type="text/javascript">function toggleVisibility (menu) {obj = document.getElementById(menu);
obj.style.visibility = obj.style.visibility == 'hidden' ? 'visible' : 'hidden';}</script>

text unter dem design:
<a href="javascript:void(0);" onclick="toggleVisibility('menu');">einblenden / ausblenden</a>

css code ohne style tags:
#menu {
visibility: hidden;
z-index: 100;
position: absolute;
height: 200px;
width: 200px;
left: 50%;
margin-left: -100px;
top: 300px;
background-color: #000000;
}


so geht es jetzt, nur passiert beim ersten mal klicken auf den link nichts.
wie kann ich das denn so eintellen das es gleich beim ersten klick eingeblendet wird?



hier beispiel: http://tigerforce-online.de.tl/


Zuletzt bearbeitet von tombraiderinsider am 12.07.2010, 15:09, insgesamt einmal bearbeitet
↑
Beiträge der letzten Zeit anzeigen:   
  • Seite 1 von 1

  •  
    • Gehe zu:  


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de

© 2024 webme GmbH, Deutschland. Alle Rechte vorbehalten.