Logo im Hintergrund der Homepage bewegen


  • Laccolith
  • 1692 Aufrufe 4 Antworten

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Logo im Hintergrund der Homepage bewegen

    Hi Ihr!
    Also, ich suche ein Javascript (eigentlich muss es nicht Java sein, denke aber, das ist am einfachsten) das ein Logo im Hintergrund einer Homepage andauernd bewegt. Am besten wäre es, wenn das Logo immer an den Ecken des Bildschirms anstoßen würde und in einem zufälligen Winkel "abprallt" und weiterfliegt...
    Das ganze soll im Hintergrund, also hinter dem Text etc. passieren.

    Ist so etwas möglich?

    Vielen Dank für eure Hilfe, Lacco

  • Danke, die Seiten hab ich schon durchgeschaut, aber nicht genau das, was ich will, gefunden.
    Ich will praktisch genau das hier, nur soll die Grafik im Hintergrund, d.h. hinter dem Text rumfliegen.

    Hat jemand ne Idee?

    Gruß, Lacco

  • Brainfuck-Quellcode

    1. <HTML>
    3. <HEAD>
    4. <title>Java Applet Java Script kostenlos downloaden - Java Script fliegende Grafik </title>
    5. <meta NAME="Audience" CONTENT="Alle">
    6. <meta NAME="Author" CONTENT="ROFL">
    7. <meta NAME="Classification" CONTENT="Webdesign">
    8. <meta NAME="Copyright" CONTENT="ROFL">
    9. <meta HTTP-EQUIV="Content-language" CONTENT="de">
    10. <meta HTTP-EQUIV="Content-type" CONTENT="text/html; CHARSET=iso-8859-1">
    11. <meta HTTP-EQUIV="Reply to" CONTENT="Rofl@roflweb.de">
    13. <style>
    14. A:link {color="#32CD32";text-decoration: none;font-weight: bold;}
    15. A:active {color="#ff0000";font-weight: bold;}
    16. A:visited {color="#32CD32";text-decoration: none;font-weight: bold;}
    17. A:hover {color="#ff0000";text-decoration:
    18. underline;font-weight: bold;}
    19. </style>
    22. <SCRIPT language=JavaScript> <!--
    24. //--------------- Image Floater
    26. var x1_richtung=1;
    28. var y1_richtung=1;
    30. var x1=10;
    32. var y1=10;
    34. var w=1;
    36. var h=1;
    38. function move_it() {
    40. if (document.layers) {
    42. document.gif1.left=x1;
    44. document.gif1.top= y1;
    46. } else {
    49. document.getElementById("gif1").style.left=x1;
    50. document.getElementById("gif1").style.top= y1;
    52. }
    54. if ((x1<0) || (x1>w-80)) {
    56. if (x1_richtung==1) x1_richtung=-1;
    58. else x1_richtung=1;
    60. } if ((y1<0) || (y1>h-40)) {
    62. if (y1_richtung==1) y1_richtung=-1;
    64. else y1_richtung=1;
    66. } x1=x1+(x1_richtung*1); y1=y1+(y1_richtung*1); setTimeout("move_it()",10); } ;function init() {
    68. if(navigator.appName=="Netscape") {
    70. w=innerWidth;
    72. h=innerHeight;
    74. } else {
    76. w=document.body.offsetWidth;
    78. h=document.body.offsetHeight;
    80. } move_it(); } //-->
    81. </SCRIPT>
    84. </HEAD>
    85. <BODY onload=init(); nosave>
    87. <h1 align="center"><font size="3">Java Script fliegende Grafik </font></h1>
    88. <DIV id=gif1 style="POSITION: absolute; TOP: 0px">
    89. <IMG src="ROFLLogo.gif" height=29 width=59 border=0></DIV>
    90. <p align="center"> </p>
    92. <p align="center">Ihr könnt die Grafik auch mit einem Link versehen.</p>
    94. <p align="center">Im Quelltext findet Ihr folgende Zeilen:</p>
    96. <p align="center"><font color="#800000">} if ((y1<0) ||
    97. (y1>h-40)) {<br>
    98. if ((x1<0) || (x1>w-80))
    99. {</font></p>
    101. <p align="center">Die -40 und die -80 sind die Maße wo die Grafik am rechten bzw.
    102. unteren Bildrand abprallen soll.<br>
    103. Diese Werte sind abhängig von der Größe des Bildes. Meine Grafik hat eine Grösse
    104. von 29x59. <br>
    106. Daran seht Ihr in etwa das Verhältnis und könnt es mit ein wenig
    107. experimentieren an Eure Grafikgrösse anpassen.</p>
    109. <p align="center"> </p>
    110. <p align="center"><a href="../download/fliegendeGrafik.zip" target="_self"><img src="../../../../Images/download.gif" width="150" height="54" alt="download.gif (1472 Byte)" border="0"></a></p>
    111. <p align="right">[Diese Seite stammt von
    112. <a href='http://www.roflweb.de/index.htm'
    113. target='_top' title='Hier geht es zu www.roflweb.de'>roflweb.de] </a></p>
    115. </BODY>
    116. </HTML>
    Alles anzeigen

    Hier ist der Code. Leider kenne ich mich mit HTML und Java nicht sehr gut aus, also kenn ich da nix dran modifizieren.
    Vielleicht könnt ihr ja was damit anfangen :)