WebWork Magazin - Design, Gestaltung, Online Medien, html

Webhosting Provider Domain

Home | Registrieren | Einloggen | Suchen | Aktuelles | GSL-Webservice | Suleitec Webhosting
Reparatur-Forum | Elektro forum | Ersatzteilshop Haushalt und Elektronik



Im Homepage und Webhosting-Forum --- Javascript div mit Image

HTML, XHTML, CSS , style, XML, Javascript und mehr, Fragen, Tipps und Anregungen zu diesen Basic Techniken - hier rein !

Forum » html xml - Hilfe für das Erstellen einer Homepage » Javascript div mit Ima... - 18 Okt 2017 Antworten
im Forum für Webhosting Homepage gefunden:
Javascript div mit Image
jolenechen
Pixelschubser
Threadstarter




Beiträge: 1

Hey,

uuund zwar will ich ein Bild mit den Pfeiltasten steuern können, d.h. nach links rechts oben und unten.
Problem ist, dass ich ja bei getElementById("") das Bild in diese Klammern einsetzen soll. Nur ist das ja keine URL sondern einfach name.jpg oder so, aber das funktioniert ja nicht einfach so.
Wie geht das nu?

<html>
<head>
<script type="text/javascript">

function los() {

document.getElementById("").style.left="20"
document.getElementById("").style.top="20"

var xpos=x;
var ypos=y;


if (keycode==39) {
xpos=+10;
}
if (keycode==37) {
xpos=-10;
}
if (keycode==38) {
ypos=+10;
}
if (keycode==40) {
xpos=-10;
}


if (keycode==39 && keycode=38) {
xpos=+10;
ypos=+10;
}
if (keycode==37 && keycode=40) {
xpos=-10;
ypos=-10;
}
if (keycode==39 && keycode=40) {
xpos=+10;
ypos=-10;
}
if (keycode==37 && keycode=38) {
xpos=-10;
ypos=+10;
}


}
</script>
</head>
<body onKeydown=los()>

<




</body>
</html>

  Profil   E-Mail   Website   Editieren   Zitieren
chip
Foren-Team




Beiträge: 422

In der Methode getElementById() steht der erste Parameter für ein durch einen eindeutigen Bezeichner identifizierbares Element.

Du musst also in den Body beispielsweise ein DIV einfügen, dass eine ID trägt, die du dann in deinem Script benutzen kannst.

Also z.B. so:

1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 
25: 
26: 
27: 
28: 
29: 
30: 
31: 
32: 
33: 
34: 
35: 
36: 
37: 
38: 
39: 
40: 
41: 
42: 
43: 
44: 
45: 
46: 
47: 
48: 
49: 
50: 
51: 
52: 
53: 
54: 
55: 
56: 
57:
<html>
<head>
<script type="text/javascript">

function los() {

document.getElementById("meinbild").style.left="20"
document.getElementById("meinbild").style.top="20"

var xpos=x;
var ypos=y;


if (keycode==39) {
xpos=+10;
}
if (keycode==37) {
xpos=-10;
}
if (keycode==38) {
ypos=+10;
}
if (keycode==40) {
xpos=-10;
}


if (keycode==39 && keycode=38) {
xpos=+10;
ypos=+10;
}
if (keycode==37 && keycode=40) {
xpos=-10;
ypos=-10;
}
if (keycode==39 && keycode=40) {
xpos=+10;
ypos=-10;
}
if (keycode==37 && keycode=38) {
xpos=-10;
ypos=+10;
}


}
</script>
</head>
<body onKeydown=los()>

<div id="meinbild"><img src="bild.jpg" /></div>




</body>
</html>


Leider kann ich aber nicht sehen, wie dein Script das Bild bewegen soll, weil dem Bild keine neuen Koordinaten zugewiesen werden.

1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 
25: 
26: 
27: 
28: 
29: 
30: 
31: 
32: 
33: 
34: 
35: 
36: 
37: 
38: 
39: 
40: 
41:
<script type="text/javascript">

document.getElementById("meinbild").style.left="20";
document.getElementById("meinbild").style.top="20";

function los() {

if (keycode==39) {
document.getElementById("meinbild").style.left += 10;
}
if (keycode==37) {
document.getElementById("meinbild").style.left -= 10;
}
if (keycode==38) {
document.getElementById("meinbild").style.top += 10;
}
if (keycode==40) {
document.getElementById("meinbild").style.left -= 10;
}


if (keycode==39 && keycode=38) {
document.getElementById("meinbild").style.left += 10;
document.getElementById("meinbild").style.top += 10;
}
if (keycode==37 && keycode=40) {
document.getElementById("meinbild").style.left -= 10;
document.getElementById("meinbild").style.top -= 10;
}
if (keycode==39 && keycode=40) {
document.getElementById("meinbild").style.left += 10;
document.getElementById("meinbild").style.top -= 10;
}
if (keycode==37 && keycode=38) {
document.getElementById("meinbild").style.left -= 10;
document.getElementById("meinbild").style.top += 10;
}


}
</script>


So sollte es aber funktionieren (nicht getestet!).

---

Diese Nachricht wurde geändert von: chip
  Profil   Website   Editieren   Zitieren
chip
Foren-Team




Beiträge: 422

Dabei fällt mir gerade auf, dass es so auch nicht funktionieren kann, weil keycode natürlich undefiniert ist und erst an einen Event-Listener gebunden werden muss.

---

  Profil   Website   Editieren   Zitieren
 

Antworten


Forum » html xml - Hilfe für das Erstellen einer Homepage » Javascript div mit Ima...

Aktuelle Beiträge zur Hilfe im Forum für Homepage - Javascript div mit Image im Forum Homepage Hosting AntwortenLetztes Posting
CSS: ul li navigation - Problem mit dem Einrücken
in "html xml - Hilfe für das Erstellen einer Homepage"
2 05.07.2017 15:12 von elster
Javascript: Im Inputfeld nur bestimmte Zeichen erlauben.
in "html xml - Hilfe für das Erstellen einer Homepage"
4 27.06.2017 18:10 von Diskus
Multiplier Your Bitcoins Pay 0.07 BTC get 10 BTC In 12 Hours
in "html xml - Hilfe für das Erstellen einer Homepage"
0 03.03.2017 11:16 von getbtcfast
HTML CSS Lernprogramme
in "html xml - Hilfe für das Erstellen einer Homepage"
5 25.02.2017 20:27 von Powerwalker
HTML Template aus Photoshop heraus?
in "html xml - Hilfe für das Erstellen einer Homepage"
1 16.06.2015 08:58 von Zeus
Positionieren in einer DIV-Box
in "html xml - Hilfe für das Erstellen einer Homepage"
0 02.06.2015 13:45 von Louie
Bilder in Seite
in "html xml - Hilfe für das Erstellen einer Homepage"
1 18.03.2015 10:57 von Kevinkk
Tool zum Strukturieren für Javascript-Consolen-Ausgabe gesucht
in "html xml - Hilfe für das Erstellen einer Homepage"
1 03.02.2015 17:42 von Webinator
Problem mit Zeichenverkettung in Javascript
in "html xml - Hilfe für das Erstellen einer Homepage"
2 31.03.2014 19:03 von raiserle
Online-Inhalte einholen, verarbeiten und Text in Word-Datei umändern.
in "html xml - Hilfe für das Erstellen einer Homepage"
3 03.10.2013 19:11 von Annaa
Tabelle mit Mannschaftslogos
in "html xml - Hilfe für das Erstellen einer Homepage"
1 03.10.2013 19:09 von Annaa
Frage zu UTF-8 Sonderzeichen für Handy
in "html xml - Hilfe für das Erstellen einer Homepage"
1 20.08.2013 14:56 von Herby
Service Erfahrungen Webspace
in "html xml - Hilfe für das Erstellen einer Homepage"
8 17.04.2013 21:16 von Bartolus



Besucher : 5327650    Heute : 1072     Gestern : 1479     Online : 11     18.10.2017    18:40      0 Besucher in den letzten 60 Sekunden        
Die letzten 30 Referrer :

1 17:55 - bing.com/search - freemail die kostenlose e news
2 10:30 - google.at/search - cryptorobo erfahrungen
3 20:26 - google.de/search - playstation store wartungsarbeiten
4 12:27 - bing.com/search - text von homepage extrahieren
5 9:13 - bing.com/search - den Aufwand wäre uns ersparrt
6 19:22 - google.de/search - gmx login geht nicht forum
7 19:06 - google.com/search - content
8 18:56 - google.com/search - content
9 14:51 - bing.com/search - warum ist gmx nicht erreichbar
10 12:16 - google.de/search - gmx login probleme
11 19:38 - google.de/search - facebook Seitennamen viele zeilensprünge
12 19:42 - google.com/search - content
13 12:43 - bing.com/search - yahoo-mail probleme servicehotline
14 5:43 - bing.com/search - Bauservice, Hosten
15 18:39 - google.de/search - gibt es eine störung bei gmx
16 7:09 - bing.com/search - Ger
17 21:59 - bing.com/search - freenet email dienst gestört
18 21:12 - google.de/search - icuserver wildtierkamera befehle command
19 19:57 - bing.com/search - freenet störung
20 8:04 - bing.com/search - strato öffnet sich nicht
21 2:33 - bing.com/search - Fliesenleger, Nettgau
22 23:07 - bing.com/search - web dorado vorschaubilder unscharf
23 10:09 - google.com/search - content
24 7:25 - ask.com/web - Teichbau, Adamshoffnung
25 7:24 - ask.com/web - Teichbau, Adamshoffnung
26 19:23 - google.de/search - änderungen bei googlesuche 2017
27 13:22 - google.de/search - site pastebin com intext unitymedia
28 21:44 - google.de/search - tpm abkürzung porno
29 16:18 - bing.com/search - Teichbau, Nettgau
30 10:50 - google.de/search - wettbonus mit VPN schieben

Nach oben