nicht angemeldet
mittels onkeydown cursor über bildern ändern
0 1 0 0 0 0 
Struppi
0
1
mittels onkeydown cursor über bildern ändern
Hallo zusammen,
ich möchte folgendes erreichen:
Wenn man mit der Maus über ein Bild fährt und gleichzeitig eine Taste gedrückt hält (shift), soll sich der Cursor verändern und beim loslassen der Taste wieder der vorherige Cursor erscheinen.
Laut SelfHtml ist onkeydown auch für <img> verfügbar, allerdings nur "während er ein Element aktiviert hat". Das klinkt so als müßte man erst den Fokus auf das Bild setzen.
Mir ist beides nicht gelungen (Safari/Firefox).
Wie muß ich vorgehen um mein Ziel zu erreichen?
Bin für jede Hilfe dankbar.
-
Hi,
Wie muß ich vorgehen um mein Ziel zu erreichen?
Ich hab das noch nie gemacht, aber so sollte es gehen:
Ein globales Flag (Variable der du die Werte true und false geben kannst) anlegen, das du per onmouseover des Bildes auf true setzt und bei onmouseout wieder auf false.
Dann das onkeydown nicht für das Bild, sondern für das gesamte Dokument. Und dort dann nur den Cursor ändern, wenn das Flag auf true steht.
mfG,
steckl-
Hi Stefan,
Ein globales Flag (Variable der du die Werte true und false geben kannst) anlegen, das du per onmouseover des Bildes auf true setzt und bei onmouseout wieder auf false.
Ich arbeite aber mit mehreren Bildern!
Dann das onkeydown nicht für das Bild, sondern für das gesamte Dokument. Und dort dann nur den Cursor ändern, wenn das Flag auf true steht.
Wie kann ich nun an die ID des Bildes kommen? Würde ich den Cursor nämlich für document setzen, wäre über dem Bild ein anderer Cursor erscheinen.
mfG,
stecklMit freundlichen Grüßen
amclust
-
Hallo,
Ein globales Flag (Variable der du die Werte true und false geben kannst) anlegen, das du per onmouseover des Bildes auf true setzt und bei onmouseout wieder auf false.
Ich arbeite aber mit mehreren Bildern!
Und wo liegt jetzt da das Problem?
Gruß
-
Hi,
Und wo liegt jetzt da das Problem?
Ich habe die events einmal umgekehrt belegt.
Die Dokumentweite Abfrage per onkeydown und onkeyup belegt jetzt nur noch die globale Variable "active". Der onmouseover Event der jeweiligen Bilder setzt den Cursor.Problem beim Firefox:
Ignoriert die Events onkeydown und onkeyup (keine Fehlerausgabe).
Problem bei Opera:
Setzt den Cursor nicht (keine Fehlerausgabe).
Problem bei Safari:
Setzt den Cursor nicht wieder zurück, wenn active false ist (keine Fehlerausgabe)!
================= schnipp =====================
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script language="javascript" type="text/javascript">
<!--
var active = false;function onDownKey(e) {
e=e?e:window.event;
window.document.title="shift: "+e.shiftKey;//debug
active = e.shiftKey ? true : false;
}
function onUpKey(e) {
e=e?e:window.event;
window.document.title="shift: "+e.shiftKey;//debug
active = false;
}function setCursor(imgid) {
var obj=document.getElementById(imgid);
window.document.title="over: "+imgid;//debug
obj.style.cursor = active ? "crosshair" : obj.pointer;
}
function setup(img) {
img.pointer = img.style.cursor;
if(document.all&&!window.opera) {
img.onmouseover = new Function('setCursor("'+img.id+'");');
}else {
img.setAttribute("onmouseover","setCursor('"+img.id+"');");
}
return false;
}
window.onload = function () {
document.onkeydown = onDownKey;
document.onkeyup = onUpKey;
}
//-->
</script>
</head>
<body><img style="float: left; margin: 10px; cursor: move;" id="img1" onload="setup(this);" src="test1.jpg" width="200" height="200" border="1" alt="" />
<img style="float: left; margin: 10px; cursor: move;" id="img2" onload="setup(this);" src="test2.jpg" width="200" height="200" border="1" alt="" />
<img style="float: left; margin: 10px; cursor: move;" id="img3" onload="setup(this);" src="test3.jpg" width="200" height="200" border="1" alt="" /></body>
</html>-
Hallo,
Allein das drücken einer Taste wie Shift ist noch kein "richtiger" Tastendruck, der ein Event auslöst (ausserdem kennt nicht jeder Browser event.(shift|alt|ctrl)Key - <http://de.selfhtml.org/javascript/objekte/event.htm@title=siehe "event" bei SELFHTML>). Ich glaube, du musst eine andere Lösung suchen. Für was möchtest du denn den Cursor gerade mit der Shift-Taste ändern?
Gruß
-
Hi,
Allein das drücken einer Taste wie Shift ist noch kein "richtiger" Tastendruck, der ein Event auslöst (ausserdem kennt nicht jeder Browser event.(shift|alt|ctrl)Key - <http://de.selfhtml.org/javascript/objekte/event.htm@title=siehe "event" bei SELFHTML>).
SELFHTML ist nicht auf dem neuesten Stand.
Ich glaube, du musst eine andere Lösung suchen.
Leider reagieren alle aktuellen Browser auch noch sehr unterschiedlich darauf, wann man den Cursor verändert und von wo aus (z.B. onMouseDown).
Überhaupt nicht nachvollziehbar ist das Verhalten von Opera 9.5, der leider auch nur die CSS 1 cursor unterstützt.
Ich habe meine Konzept komplett umgestellt, so das ich nicht mehr auf den Cursor angewiesen bin.
Vielen Dank an alle die sich an der Lösung des Problems beteiligt haben!
-
-
Ich habe mal ein Beispiel geschrieben, das zumindest im IE und FF funktioniert:
<script type="text/javascript"> var shift = false; document.onkeydown = function(e) { if(!e) e = window.event; shift = e.shiftKey; } document.onkeyup = function(e) { if(!e) e = window.event; document.body.style.cursor = ''; shift = e.shiftKey; } document.onmousemove = function(e) { if(!e) e = window.event; var el = e.target || e.srcElement; if(el.tagName.toLowerCase() == 'img' && shift) document.body.style.cursor = 'pointer'; } </script>Opera ändert in diesem Beipsiel den Cursor aber nur wenn die Maus über ein neues Element kommt.
Struppi.
-
-
-
-
Nachfolgend ein Beispiel um das Dilemma zu verdeutlichen:
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script language="javascript" type="text/javascript">
<!--
function onDownKey(e) {
e=e?e:window.event;
window.document.title="shift: "+e.shiftKey;//debug
document.body.style.cursor = e.shiftKey ? "crosshair" : "default";
}
function onUpKey(e) {
e=e?e:window.event;
window.document.title="shift: "+e.shiftKey;//debug
document.body.style.cursor = "default";
}
document.onkeydown = onDownKey;
document.onkeyup = onUpKey;
//-->
</script>
</head>
<body><img style="float: left; margin: 10px; cursor: move;" id="img1" src="test1.jpg" width="200" height="200" border="1" alt="" />
<img style="float: left; margin: 10px; cursor: move;" id="img2" src="test2.jpg" width="200" height="200" border="1" alt="" />
<img style="float: left; margin: 10px; cursor: move;" id="img3" src="test3.jpg" width="200" height="200" border="1" alt="" /></body>
</html>
-
-
Moin.
Meine Lösung mit Hilfe dieser Hilfsfunktion. Das Verhalten von Opera scheint mir ein Bug.
Christoph
-
Moin.
Moin, Moin
Meine Lösung mit Hilfe dieser Hilfsfunktion. Das Verhalten von Opera scheint mir ein Bug.
Deine Lösung funktioniert tatsächlich (Respekt).
Leider kann ich sie nicht nutzen, da mein Programm nicht open source ist!
Außerdem ist die Browserunterstützung für die CSS 2.1 Cursor leider nicht komplett, sodaß ich mein Konzept umgestrickt habe.Christoph
Vielen Dank für deine Mühe.
amcluster
-
Moin.
Deine Lösung funktioniert tatsächlich (Respekt).
Leider kann ich sie nicht nutzen, da mein Programm nicht open source ist!Daran hätte es jetzt nicht scheitern sollen. Open-source-Bibliotheken können durchaus in closed-source Projekten verwendet werden - die Artistic License erlaubt dies (unter entsprechenden Voraussetzungen; nicht-komprimierte JavaScripte erüllen diese automatisch, da der Quelltext zwangsläufig offen liegt).
Ansonsten hätte ich auch keine Probleme damit, den Programmschnipsel der "public domain" hinzuzufügen...
Außerdem ist die Browserunterstützung für die CSS 2.1 Cursor leider nicht komplett, sodaß ich mein Konzept umgestrickt habe.
Ok.
Christoph
-
-