Postion von Button bei Mauberührung verändern

[Karl Heinz]

Guten Abend,

habe eine Frage zu folgendem HTML-Beispiel:

http://de.selfhtml.org/html/formulare/anzeige/input_button.htm@title=Beispiel

Das Beispiel hat ja zwei Buttons:

"Text 1 anzeigen"
und
"Text 2 anzeigen"

"Text 1 enzeigen" soll so bleiben wie es ist. Bei "Text 2 anzeigen soll eine Veränderung her und zwar folgende:

Wenn ich mit der Maus über den Button fahre, soll der Button nach oben springen, so das ich den Button nichtmehr anklicken kann. Fahre ich dann an die neue Positon des Buttons der ja jetzt weiter oben ist, so soll der Button wieder zurück nach unten springen. Das soll immer so hin und her gehen. Es soll also keine Möglichkeit geben den Button anzuklicken, ist sowas möglich?

Ich will mir hier einen kleinen Scherz bei einem Freund erlauben :-).

Wäre echt toll wenn ihr mir helfen würdet.

Ich hab nicht viel Ahnung von dem Kram, er hat morgen Geburtstag und ich möchte ihm eine kleine Überraschung basteln.

[Steel]

Hi!

Sicher ist das möglich. Alle nötigen Informationen findest Du auf der von Dir verlinkten Dokumentaion. ;)

Du brauchst nen Evenhandler. Hier wäre http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onmouseover@title=onmouseover ein Kandidat.
Dann möchtest Du den Button verschieben. Für sowas ist CSS ganz nett. In deinem Fall würde ich sagen eine Steuerung der Anzeige über http://de.selfhtml.org/javascript/objekte/style.htm@title=style is ok.
In deinem Fall Müsste es helfen dem Button Position: absolute und top:0 zu verpassen. Und falls er das schon hat das wieder zu entfernen.

Kannste alles in den Eventhandler direkt ins Element schreiben. Das ist zwar kein guter Stil, aber was solls... Das Element refenzierst Du mit this. (this.style...)

onmouseover="this.style.width='200px'" macht das Teil z.b. 200 Pixel breit.

[Karl Heinz]

Habs so probiert:

<input type="button" name="Text 2" value="Nein" onmouseover="this.style.position-top=100px">

Tut sich aber nix, was mach ich falsch

Dann gleich noch die nächste Frage, der Button soll ja immer hin und her springen

von Position A nach Positon B

bzw.

von Position B nach Position A

Wie kann ich das toggeln realisieren?

[Steel]

Habs so probiert:

<input type="button" name="Text 2" value="Nein" onmouseover="this.style.position-top=100px">

Tut sich aber nix, was mach ich falsch

Klar.
Du sprichst 2 Attribute an: position und top position gibst du absolute und top 0
Das heisst das element soll an einer absolut zum nächsten positionierten Vorfahrenelement positioniert werden. (in deinem Fall der Seite) Und zwar genau 0 Pixel von oben. Also am obersten Rand. Das sind 2 Befehle.

Dann gleich noch die nächste Frage, der Button soll ja immer hin und her springen

von Position A nach Positon B

bzw.

von Position B nach Position A

Wie kann ich das toggeln realisieren?

Indem Du prüfst, ob er schon gesprungen ist. Die standard Position ist nicht absolut. Und JS kann so einfach auch nicht auf nicht selbst gesetzte CSS styles zugreifen. Mit if (this.style.position == 'absolute') kannst du dann feststellen, daß es bereits gesetzt wurde. Wenn nicht, ist position leer.

if (this.style.position == 'absolute') {setze position; setze Koordinate} else {setze position auf ''; setze Koordinate auf '' }

Ein Attribut auf '' setzen stellt die Defaulteinstellung wieder her.

[Steel]

Hi!

if (this.style.position == 'absolute') {setze position; setze Koordinate} else {setze position auf ''; setze Koordinate auf '' }

Is natürlich nen Logikfehler. Entweder musst du die Bedingung auf not (!= statt ==) prüfen oder die Einstellungen umkehren.

[Karl Heinz]

Jetzt hab ich es so probiert:

<input type="button" name="Text 2" value="Nein" onmouseover="this.style.position='absolute' this.style.top='0'">

Klappt leider nicht :-(

Ist die Syntax falsch, oder wo liegt der Fehler?

[Steel]

Hi!

<input type="button" name="Text 2" value="Nein" onmouseover="this.style.position='absolute' this.style.top='0'">

Klappt leider nicht :-(

Ist die Syntax falsch, oder wo liegt der Fehler?

Super. du musst nur die Befehle mit einem ; trennen.

[Karl Heinz]

Hi!

<input type="button" name="Text 2" value="Nein" onmouseover="this.style.position='absolute' this.style.top='0'">

Klappt leider nicht :-(

Ist die Syntax falsch, oder wo liegt der Fehler?

Super. du musst nur die Befehle mit einem ; trennen.

Das klappt jetzt, der Button zischt ab nach oben, sobald ich mit der Maus drüber fahre.

Er soll aber wieder nach unten gehen sobald ich ihn nun oben versuche anzuklicken, wie kann ich das denn nun wieder hinbekommen?

[Steel]

Das klappt jetzt, der Button zischt ab nach oben, sobald ich mit der Maus drüber fahre.

Er soll aber wieder nach unten gehen sobald ich ihn nun oben versuche anzuklicken, wie kann ich das denn nun wieder hinbekommen?

Hab ich dir geschrieben. Mit einer If-Abfrage auf position.

[Karl Heinz]

Hab ich dir geschrieben. Mit einer If-Abfrage auf position.

Ohje, ich kann doch keine Java Script, hab mich noch nie mit beschäftigt. Brauch ich da eine Funktion oder kann ich das direkt in die Zeile mit einbauen?

Für ein Beispiel wäre ich dir super dankbar... sonst muss ich nämlich heute Nacht wach bleiben...

[Steel]

Hab ich dir geschrieben. Mit einer If-Abfrage auf position.

Ohje, ich kann doch keine Java Script, hab mich noch nie mit beschäftigt. Brauch ich da eine Funktion oder kann ich das direkt in die Zeile mit einbauen?

Für ein Beispiel wäre ich dir super dankbar... sonst muss ich nämlich heute Nacht wach bleiben...

Ne Funktion wäre natürlich besser. Kannste aber auch alles in den eventhandler schreiben:

if(this.style.position == 'absolute'){this.style.position=''; this.style.top=''} else {this.style.position='absolute'; this.style.top='0'}

Sprich: Wenn das Element position absolute hat dann resette position und top. Sonst setze position auf absolute und top auf 0.

Wie gesagt: Is nicht schön, aber für den einen kleinen Zweck reichts. Besser wäre den Eventhandler nicht inline zu notieren, eine CSS-Klasse zu benutzen und evtl. eine Funktion zu schreiben.

[Karl Heinz]

Hab's versucht mit dieser Funktion umzusetzen:

  
<script type="text/javascript">  
<!--  
var zustand = "unten";  
function toggle() {  
if (zustand=="unten")  
{  
alert("Button ist unten");  
this.style.position='absolute'; this.style.top='0';  
zustand="oben";  
}  
else  
{  
alert("Button ist oben");  
this.style.position=''; this.style.top='';  
zustand="unten";  
}  
}  
//-->  

Klappt leider nicht, was mach ich falsch?

[Steel]

Hab's versucht mit dieser Funktion umzusetzen:

<script type="text/javascript">
<!--
var zustand = "unten";
function toggle() {
if (zustand=="unten")
{
alert("Button ist unten");
this.style.position='absolute'; this.style.top='0';
zustand="oben";
}
else
{
alert("Button ist oben");
this.style.position=''; this.style.top='';
zustand="unten";
}
}
//-->

>   
> Klappt leider nicht, was mach ich falsch?  
  
Die Funktion weiß nicht, was du mit this meinst. This bezieht sich auf das aktuelle Element. Wenn Du einen Eventhandler fuer den Button hast, dann ist this der Button:  
  
<script type="text/javascript">  
  
var zustand = "unten";  
  
function toggle(myElement)  
{  
  if (zustand=="unten")  
  {  
    alert("Button ist unten");  
    myElement.style.position='absolute';  
    myElement.style.top='0';  
    zustand="oben";  
  }  
  else  
  {  
    alert("Button ist oben");  
    myElement.style.position='';  
    myElement.style.top='';  
    zustand="unten";  
 }  
}  
</script>  
  
Diese Funktion kannst du im Eventhandler so aufrufen: onmouseover='toggle(this)'  
  
Du kannst getrost, die Variable zustand weglassen, wenn Du die Eigenschaft position abfragst.  

-- 
Vergesst Chuck Norris.  
Sponge Bob kann unter Wasser grillen!

[Karl Heinz]

Danke Dir, klappt jetzt alles tadellos :-)