JavaScript und CSS

Dieses Thema im Forum "Web-Know-how für die Homepage" wurde erstellt von computernarr, 10. März 2004.

Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. computernarr

    computernarr Kbyte

    Registriert seit:
    30. März 2002
    Beiträge:
    163
    Hi @ all!
    Ich hab folgendes Problem:
    Ich habne HTML datein da ist ein Bild drin die per CSS und div positioniert wurde! Jetzt will ich mit JavaScript das so machen das das Bild immer ein bisschen nach rechts geht bis zum Bildschrimrand und wieder zurück! Wie kann ich das bewerkstelligen mit JS und CSS?
     
  2. Gast

    Gast Guest

    dein div muss einen namen haben, z.b. "test" <div id="test">....</div>

    mit:

    document.getElementById("test").style.left="100";

    wird das element mit den namen "test" auf eine position von 100px von links gesetzt. egal, was vorher als left angegeben worden ist.

    probiers mal mit:
    <script>
    function bewegen()
    {
    for(var I=200;i--;i>10;)
    document.getElementById("test").style.left = i;
    }

    </script>
    <body onLoad="bewegen()">
    <div id="test" style="position:absolute;top:100;left:200"><img src="test.jpg"></div>

    bei der forschleife musste ein wenig experimentieren.... leider hab ich momentan keinen editor zur hand um es selbst zu testen.
     
  3. computernarr

    computernarr Kbyte

    Registriert seit:
    30. März 2002
    Beiträge:
    163
    Kann mir niemand helfen?
     
  4. computernarr

    computernarr Kbyte

    Registriert seit:
    30. März 2002
    Beiträge:
    163
    Hier mal der Quellcode
    Code:
    <html>
    <head>
    <title>DIV</title>
    <meta name="author" content="BBS">
    <meta name="generator" content="Ulli Meybohms HTML EDITOR">
    <link rel="stylesheet" href="div.css" type="text/css">
    <script language="JavaScript">
    function bewegen() {
    
    
    
    document.getElementById("erde").style.left=200px;
    }
    </script>
    <noscript></noscript>
    
    </head>
    <body >
    <div id="erde" class=1 > <img src="erde.jpg" width="103" height="103" border="0" alt=""></div>
    <div class=2><img src="mars.jpg" width="132" height="132" border="0" alt=""></div>
    <div class=3>Hallo Bild Mars</div>
    <div class=4>Wenn hier<br>
    Wasser wäre?</div><br><br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <input type="button" value="Start" onClick="bewegen()" >
    </body>
    </html>
    Code:
    div.1 {position: absolute; top: 50px; left: 100px; id="erde"; }
    div.2 {position: absolute; top: 200px; left: 300px; }
    div.3 {position: absolute; top: 185px; left: 300px; }
    div.4 {position: absolute; top: 250px; left: 325px; color: #FFFFFF; }
    
    
    
     
  5. computernarr

    computernarr Kbyte

    Registriert seit:
    30. März 2002
    Beiträge:
    163
    Mit dem verschieben hatte ich an eine for-schleife gedacht!

    Die Id muss ich die in css zuweisen oder in HTML?
     
  6. kalweit

    kalweit Hüter der Glaskugel

    Registriert seit:
    18. April 2000
    Beiträge:
    31.487
    Mal so sinngemäß - die Positionierung steckt in document.getElementsById(<div-id>).style.left, diesen Wert kannst du einfach überschreiben. Nun brauchst du nur noch ein setInterval(), welches eine Funktion aufruft, in der du "left" erhöhst bzw. verringerst. Wenn das Objekt an der Ausgangsposition ist, beendest du einfach den Interval. Nun kannst du noch entscheiden, ob du das von der Browserfensterbreite abhängig machst (was die Sache ein wenig komplizierter macht) oder ob dir feste Werte reichen.

    Gruss, Matthias
     
  7. whisky

    whisky Ganzes Gigabyte

    Registriert seit:
    1. Oktober 2001
    Beiträge:
    11.014
Status des Themas:
Es sind keine weiteren Antworten möglich.

Diese Seite empfehlen