SELFHTML Forum  SELFHTML Forumsarchiv  2008  Juni

	SELFHTML Forumsarchiv Linkgrafik hin und her bewegen
	(JAVASCRIPT) Linkgrafik hin und her bewegen von ohneworte77, 30. 06. 2008, 18:02  (JAVASCRIPT) Linkgrafik hin und her bewegen von Chris, 30. 06. 2008, 18:04  (JAVASCRIPT) Linkgrafik hin und her bewegen von Robert, 30. 06. 2008, 19:21  (JAVASCRIPT) Linkgrafik hin und her bewegen von Robert, 30. 06. 2008, 19:34

Linkgrafik hin und her bewegen

Die folgende Nachricht zum Thema stammt von: ohneworte77, 30. 06. 2008, 18:02

Hallo,

ich möchte mit onmouseover und onmouseout Linkgrafiken animieren. Bei onmouseover soll die Grafik(eine Patrone) langsam nach rechts wandern. Bei onmouseout soll sie wieder langsam auf ihre ursprüngliche Position zurückkehren. Bei onclick soll sie dann schneller kurz nach links und dann schnell nach rechts bis sie hinter dem nächsten Framefenster verschwindet und wieder langsam am Browserrand(links) auftaucht und zu ihrer Position zurückkehrt.
Ich hab es bis jetzt geschafft das bei onmouseover die Grafik sich wie gewünscht bewegt. Allerdings greifen weiteren Bewegungen nicht mehr. Kann mir da irgendjemand helfen??? Irgendwie klappt das nicht mit dem abbrechen der Bewegung wenn ein bestimmter Punkt erreicht ist.

Linkgrafik hin und her bewegen

Die folgende Nachricht zum Thema stammt von: Chris, 30. 06. 2008, 18:04

Hi

»» Kann mir da irgendjemand helfen???

Ja dann poste doch mal deine Funktion die das Bild bewegt...

Linkgrafik hin und her bewegen

Die folgende Nachricht zum Thema stammt von: Robert, 30. 06. 2008, 19:21

Hi,

»» Bei onmouseover soll die Grafik(eine Patrone) langsam nach rechts wandern. Bei onmouseout soll sie wieder langsam auf ihre ursprüngliche Position zurückkehren.
<script type="text/javascript">
 var run;
 var x = 0;
 function Move(v)
 {
   x += v;
   var Startposition = 0;
   var Endposition = 1000;
   var patrone = document.getElementById("PatronenID");
   patrone.style.left=(x)+"px";
   if (x >= Endposition)
   {
     patrone.style.left=Endposition;
     window.clearInterval(run);
     run = null;
   }
   if (x <= Startposition)
   {
     patrone.style.left=Startposition;
     window.clearInterval(run);
     run = null;
   }
 }
 function setMove(v)
 {
   run = window.setInterval("Move("+v+")",10);
 }
</script>

<a href="link.htm">
<img id="PatronenID" src="Patrone.png"
 onmouseover="window.clearInterval(run);setMove(2);"
 onmouseout="window.clearInterval(run);setMove(-2);"
 style="position:absolute;">
</a>

Das dürfte der Part sein aber, wenn du:

»» Bei onclick soll sie dann schneller kurz nach links und dann schnell nach rechts bis sie hinter dem nächsten Framefenster verschwindet und wieder langsam am Browserrand(links) auftaucht und zu ihrer Position zurückkehrt.

dann solltest du keine "LINKGRAFIK" benutzen sondern einen Javascript
um am Ende der Animation auf deine Seite zu springen.

mfg Robert

Linkgrafik hin und her bewegen

Die folgende Nachricht zum Thema stammt von: Robert, 30. 06. 2008, 19:34

Hi,

wolltes du den script vieleicht so?

<script type="text/javascript">
 var run;
 var x = 0;
 var Ende = false;
 function Move(v)
 {
   x += v;
   var Startposition = 0;
   var Endposition = 1000;
   var patrone = document.getElementById("PatronenID");
   patrone.style.left=(x)+"px";
   if (x >= Endposition)
   {
     if (Ende == true)
     {
      window.setTimeout("window.location.href='http://www.selfhtml.org';",750);
     }
     else
     {
      patrone.style.left=Endposition;
     window.clearInterval(run);
     run = null;
     }
   }
   if (x <= Startposition)
   {
     patrone.style.left=Startposition;
     window.clearInterval(run);
     run = null;
   }
 }
 function setMove(v)
 {
   run = window.setInterval("Move("+v+")",10);
 }
</script>

<img id="PatronenID" src="Patrone.png"
 onclick="window.clearInterval(run);
    this.onmouseover = null;
    this.onmouseout = null;
    Ende = true;
    setMove(-5);
    window.setTimeout('setMove(8)',500);"
 onmouseover="window.clearInterval(run);setMove(2);"
 onmouseout="window.clearInterval(run);setMove(-2);"
 style="position:absolute;">

bei setMove(ist das die Geschwindigkeit) mit der sich das Bild bewegen soll.

mfg Robert

 SELFHTML Forum  SELFHTML Forumsarchiv  2008  Juni

© 1998-2008  Impressum, Software: Classic Forum