Seite 1 von 1
Info box
Verfasst: Mo Apr 30, 2012 4:50 pm
von Kmitska
Hallo Leute,
ich wollte wissen, wie man so coole "Information Box" erstellen kann, also auch so unsichtbar und man kann es wieder verschwinden lassen, wenn man auf "x" drückt.
Und da wäre noch was, wie mache ich solche Menüs wie hier:
http://css-tricks.com/
Also das immernoch bisschen leuchtet und aus geht, wenn man davon geht.
Re: Info box
Verfasst: Mo Apr 30, 2012 5:16 pm
von canlot
also die Box kannst du mit ein bisschen Css und JavaScript erstellen. visibility:visible; bei der Box und beim Klicken auf das X also auf eine Bilddatei nehme ich an dann onclick="document.getElementById("BoxId").style.visibility:hidden" zwischen den tags unterbringen.
Und dass leuchten kann man glaube ich mit CSS3 Eigenschaft box-shadow erreichen. z.B. box-shadow 0px 0px 10px white;
http://westciv.com/tools/boxshadows/index.html hier was zum rumspielen
funktioniert aber wie gesagt nur mit CSS3 fähigen Browsern und bei CSS musste du dann
BoxID:hover
{
//das wird der tun bei drübergehen der Maus auf der Box.
}
ps. so genau weiß ich dass nicht mehr musst du selbst ausprobieren
Re: Info box
Verfasst: Di Mai 01, 2012 9:17 am
von Kmitska
Em... kannst du mehr zu der Box sagen?
BIn nicht unbedingt der JS-Experte hier...
Re: Info box
Verfasst: Di Mai 01, 2012 9:25 am
von Xin
Box-shadow wird wohl nicht von allen Browsern unterstützt, die Eigenschaft ist eben noch recht neu.
Die Javs-Skript-Zeile bei onClick ändert lediglich die CSS-Eigenschaft "visibility" auf "hidden" für das Element mit der Id "BoxId".
Re: Info box
Verfasst: Di Mai 01, 2012 9:33 am
von Kmitska
Könnt ich irgendwie ein Beispiel haben? :/
Also ich will, dass diese Box erschreint, wenn jmd. z.B. auf "BLah" geht. (Text)
Re: Info box
Verfasst: Di Mai 01, 2012 10:13 am
von canlot
Kmitska hat geschrieben:Em... kannst du mehr zu der Box sagen?
BIn nicht unbedingt der JS-Experte hier...
sowas zum Beispiel:
Code: Alles auswählen
<html>
<head>
</head>
<body style="background-color:#ccc">
<a href="#" onclick="document.getElementById('infobox').style.visibility='hidden'">Box unsichtbar machen</a></br>
<a href="#" onclick="document.getElementById('infobox').style.visibility='visible'">Box sichtbar machen</a>
<div id="infobox" style="position: absolute; width: 200px; height: 300px; top: 300px; left: 100px; background-color: red; box-shadow:0px 0px 30px #CFDB5C;">
Bin die Infobox
</div>
</body>
</html>
Für ein besseres Ergebnis musst du ein wenig rumspielen.