Bewegte Layer
Luis
- javascript
Moin,
ich möchte ein Bild in einer Website zur Seite Bewegen (mit onclick). Dies funktioniert leider nicht und mein JavaScript-Debugger zeigt auch nicht an. Ich hoffe ihr könnt mir helfen.
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Navigations-Frame</title>
<meta http-equiv="content-type" content="text/html; charset=us-ascii" />
<meta name="generator" content="Webocton - Scriptly (www.scriptly.de)" />
<link rel="stylesheet" type="text/css" href="navi.css" />
<script language="javascript" type="text/javascript" src="Drive.js"></script>
</head>
<body>
<img src="logo_navi.png" alt="Logo" id="pl"/>
<img src="w.gif" id="w1" alt=""/>
<img src="w.gif" id="w2" alt=""/>
<img src="b1.png" id="kue" alt="" name="kue" onclick="LinksFahren()"/>
<img src="b2.png" id="ein" alt="" name="ein" />
<img src="b3.png" id="moe" alt="" name="moe" />
<img src="b4.png" id="ges" alt="" name="ges" />
<img src="b5.png" id="and" alt="" name="and" />
</body>
</html>
JavaScript: Drive.js
function LinksFahren(X, Y) {
// X = ID des Tags; Y = Gewünschte Position
var FahrLayer = document.getElementById(X);
var layerPosition = parseInt(FahrLayer.style.left);
if (layerPosition < Y) {
FahrLayer.style.left = (layerPosition - 5) + "px";
setTimeout("LinksFahren(X, Y)", 20);
}
}
CSS: navis.css
img {
width: 60px;
position: absolute;
top: 110px;
}
html, body {
padding: 0;
margin: 0;
background-image: url(hintergrund_grau.png); /*Korrekte Farbdarstellung!!!*/
}
img#pl {
position: absolute;
top: 20px;
right: 23px;
height: 70px;
width: auto;
}
img#w1{
position: absolute;
top: 127px;
width: 100%;
height: 1px;
}
img#w2{
position: absolute;
top: 105px;
width: 100%;
height: 1px;
}
#kue{
left: 1190px;
background-color: red;
}
#ein {
right: 110px;
}
#moe {
right: 190px;
}
#ges {
right: 270px;
}
#and {
right: 350px;
}
Danke im Vorraus
Luis
#kue{
left: 1190px;
background-color: red;
}
'Tschuldigung. gehört so:
#kue {
right: 30px;
}
setTimeout("LinksFahren(X, Y)", 20);
Du übergibst hier "X" und "Y" an das Script, ohne diese zu befüllen. Sinnvoller wäre hier setTimeout(function() { LinksFahren(X, Y); }, 20);
.
Gruß, LX
Hi,
ich möchte ein Bild in einer Website zur Seite Bewegen (mit onclick). Dies funktioniert leider nicht und mein JavaScript-Debugger zeigt auch nicht an.
Letzteres halte ich ja fuer ein Geruecht.
<img src="b1.png" id="kue" alt="" name="kue" onclick="LinksFahren()"/>
Aufruf der Funktion ohne Parameter.
function LinksFahren(X, Y) {
// X = ID des Tags; Y = Gewünschte Position
var FahrLayer = document.getElementById(X);
var layerPosition = parseInt(FahrLayer.style.left);
Nanu, die Funktion moechte ja doch Parameter ...?
getElementById von "nix" ergibt null, also muss es in der letzten zitierten Zeile einen Fehler geben, weil null kein Unterobjekt style besitzt.
MfG ChrisB
moin
<img src="b1.png" id="kue" alt="" name="kue" onclick="LinksFahren()"/>
Aufruf der Funktion ohne Parameter.
Ja du hast recht. ich bin auch ein idiot. ich habs mit verschiedenen möglichkeiten versucht. einmal mit und einmal ohne paramenter. deswegen hab ich den einmal vergessen wieder einzustellen.
Aber selbst mit paramenter hat es nicht funktioniert.
Hellihello
es geht auf jeden Fall so:
http://html-ag.wvs-berlin.de/Javascript/JS_Ziehen_Schieben/JS_Fenster_Ziehen_2.htm
Dank und Gruß,