1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

neue ebene mit javascript

Dieses Thema im Forum "Web-Programmierung" wurde erstellt von hello, 10.03.08.

  1. hello

    hello Schöner von Nordhausen

    Dabei seit:
    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
     
  2. Sir Q

    Sir Q Rheinischer Winterrambour

    Dabei seit:
    12.04.05
    Beiträge:
    921
    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 …
     
  3. hello

    hello Schöner von Nordhausen

    Dabei seit:
    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?
     
    #3 hello, 10.03.08
    Zuletzt bearbeitet: 11.03.08

Diese Seite empfehlen