• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

variablen mit onmouseover ändern

littleHtml Freak

littleHtml Freak

Mitglied
hallo,
ich übe mich gerade ein wenig an java script und habe mal einen kleinen code geschrieben der aber nicht recht funktionieren will. Was passieren soll ist im grunde ganz einfach und sinnlos. ein link ist mit top und left positioniert. beim berüphren mit der maus sollen sich die die x und y werte vertauschen.( x und y sind sozusagen wie koorinaten eines koordinatensystems zu betrachten)
hier ist jetzt der code...
habe keine wirkliche ahnung wie ich die werte vertauschen soll... habe es hier mit funktionen gemacht; habe es aber uch schon direkt im eventhander probiert
Code: 
<html>

<head>


<title>Test</title>

<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script>
funktion bewegung1(zahl2){var zahl1=zahl2; return zahl1}
funktion bewegung2(zahl1){var zahl2=zahl1; return zahl2}
</script>


</head>

<body>


<script>

var x = 70; 
var y = 500;


document.write("<a style='position: absolute; top: "+y+"px; left: "+x+"px;' href='http://www.google.de' onmouseover='y=bewegung1("+x+") x=bewegung2("+y+")'> Wichtiger Link zu wichtigem Inhalt</a>");

</script>



</div>
<noscript>
laaangweilig
</noscript>


</body>

</html>
hoffe ihr könnt mir helfen :D
viele grüße
 
Es reicht natürlich nicht, wenn Du irgendwelche Variablen mit den Zahlenwerten vorbesetzt, sondern Du musst top und left vorbesetzen:
Code: 
onmouseover='this.style.top=x+"px";this.style.left=y+"px";'
Viel Erfolg und viele Grüße - Ulrich
 
danke schonmal aber ich weiß nicht ganz wo ic hdas hintun soll :/

Code: 
document.write("<a style='position: absolute; top:"+x+"px;left: "+y+"px;' onmouseover='this.style.top="+x+"px; this.style.left="+y+"px; y=bewegung1("+x+") x=bewegung2("+y+")' href='http://www.google.de> Wichtiger Link zu wichtigem Inhalt</a>");
das funktioniert nicht. man sieht den link nichtmal mehr :(
kann ich beliebigviele befehle in den eventhandler packen?
oder mach ich irgendwas anderes falsch?
viele grüße
 
Zuletzt bearbeitet:
Da habe ich einen Fehler gemacht: Den " im Mouseover muss ein \ vorangestellt werden:
Code: 
onmouseover='this.style.top=x+\"px\";this.style.left=y+\"px\";'
 
document.write vergisst du am Besten mal wieder. Abgesehen davon kannst du dein Vorhaben auch mit CSS realisieren.
Und der Sinn deiner beiden Funktionen bewegung1 und bewegung2 ist mir auch schleierhaft.
 
die fehlerkonsole sagt viel was meine seite nicht betrift und "missing ; before statement" und da ist ein pfeil direkt auf mein ; am ende von doc.write

warum soll ich doc.write vergessen?

ich will den code später noch ausbauen und dann geht das nichtmehr mit css (position von mauszeiger abhängigmachen oder sowas) daher auch die funktionen, die einfach die werte von x und y vertauschen

@Sempervivum
wo soll das denn überhaupt hin? wo packe ich denn dann die funktionen hin die positionierung... ich bin im moment noch ein ziemlicher js noob ;)

viele grüße
 
Schau mal, so funktioniert es:
Code: 
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Script-Type" content="text/javascript" />
</head>
<body>
<script>
var x = 70; 
var y = 500;
document.write("<a style='position: absolute; top: "+y+"px; left: "+x+"px;' href='http://www.google.de' onmouseover='this.style.top=x+\"px\";this.style.left=y+\"px\";'> Wichtiger Link zu wichtigem Inhalt</a>");
</script>
</div>
<noscript>
laaangweilig
</noscript>
</body>
</html>
 
littleHtml Freak schrieb:
warum soll ich doc.write vergessen?
Zum Vergrößern anklicken....

Weil document.write Anfänger vor unerklärlichen Problemen stellen kann.
Außerdem wird der Code dadurch unübersichtlicher...

edit:

Code: 
<!doctype html>
<html>
<head>
	<title>Playground</title>
	<style>
		#pos1 { position: absolute; top: 500px; left: 70px; }
		#pos2 { position: absolute; top: 70px; left: 500px; }
	</style>
</head>

<body>
	<a id="pos1" href="http://www.google.de">Wichtiger Link zu wichtigem Inhalt</a>
	<script>
		document.getElementById("pos1").onmouseover = function() {
			this.id = "pos2";
		};
	</script>
</body>
</html>
 
Zuletzt bearbeitet:
vieln dank an euch beide! beide methoden funktonieren soweit!
das problem bei beiden ist nur dass es rückwärts nicht mehr funktoniert :/ also es geht nur einmal... wie kann ich das erreichen, dass es unedlich viele male funktioniert?
mein (kläglicher? :D) versuch sieht so aus:
Code: 
<script type="text/javascript">

            var i = 2;
        while( i != 0){
            if( i == 2){
                document.getElementById("pos1").onmouseover = function() {
                this.id = "pos2";};
                i--;
            }
            if( i == 1){
                document.getElementById("pos2").onmouseover = function() {
                this.id = "pos1";};
                i++;
            }
        }
    </script>
habe hier arcsinhs lösung weiterverwendet weil es mit dco.wirte jetzt wirklich sehr unübersuchtlich würde ;)
viele grüße
 
Code: 
document.getElementById("pos1").onmouseover = function() {
    this.id = this.id == "pos1" ? "pos2" : "pos1";
};

Meinst du so?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben