• Apfeltalk ändert einen Teil seiner Allgemeinen Geschäftsbedingungen (AGB), das Löschen von Useraccounts betreffend.
    Näheres könnt Ihr hier nachlesen: AGB-Änderung
  • Was gibt es Schöneres als den Mai draußen in der Natur mit allen Sinnen zu genießen? Lasst uns teilhaben an Euren Erlebnissen und macht mit beim Thema des Monats Da blüht uns was! ---> Klick

neue ebene mit javascript

hello

Schöner von Nordhausen
Registriert
02.07.06
Beiträge
327
hallo zusammen

ist es möglich über javascript bei einem mausklick auf einen link ein div-element einzublenden?

so in ungefähr sieht das element im css code aus:
Code:
.bereich1 {
display: none;
height: 200px;
width: 300px;
float:left;
}
und da ist es im html code:
Code:
<html>
<head>
<title>test</title>
</head>
<body>

<div class="bereich1">
<h1>content</h1>
</div>

<a href="#">link</a>
</body>
</html>
und jetzt sollte beim klick auf den link der bereich1 eingeblendet werden, sprich er sollte zu display:block; wechseln

ist das so möglich?

mfg
manuel
 

Sir Q

Rheinischer Winterrambour
Registriert
12.04.05
Beiträge
923
Mit prototypejs und script.aculo.us lassen sich solche dinge enorm einfach und effektreich machen.

<div id="bereich1" style="display:none">
bla bla bla
</div>

<a href="#" onclick="new effekt("bereich1", "appear"); return false;">klick</a>

zum beispiel - sorgt dafür, dass das div mit der id bereich1 ganz sanft eingefadet wird …
 

hello

Schöner von Nordhausen
Registriert
02.07.06
Beiträge
327
habe jetzt folgendes script:

Code:
<title>Unbenanntes Dokument</title>

<script src="/js/prototype.js" type="text/javascript"></script>
<script src="/js/scriptaculous.js" type="text/javascript"></script>

<style type="text/css">
.bereich {
    background-color:#999999;
    height:200px;
    width:300px;
    position:absolute;
    top: 100px;
    left:100px;
}
</style>
</head>
<body>

<a href="#" onClick="Element.hide('demo-effect-appear'); new Effect.Appear('demo-effect-appear');">test</a>

<div class="bereich" id="demo-effect-appear">
    <img src="http://script.aculo.us/images/demo-logo.gif" alt="">
</div>  
</body>
</html>

funktionieren tut aber nichts...kann mir jemand sagen wiso?
 
Zuletzt bearbeitet: