nicht angemeldet
Ist es möglich nur einen Teil eines Elements klickbar zu machen?
Hallo!
Ich suche momentan nach einer Möglichkeit, nur einen Teil eines Elements klickbar zu machen.
Angenommen ich habe ein input type=text, welches auf der linken Seite ein Hintergrundbild hat (35px breit).
Nun will ich dass du die linken 35px dieses inputs klickbar sind.
Mit klickbar meine ich, dass der cursor von text auf pointer geht und bei klick ein alert ausgegeben wird.
Meine Versuche waren bisher alle erfolglos.
Zuletzt habe ich es so versucht (ich benutze jQuery):
$('input').mousemove(function(){
this.style.cursor = ((event.offsetX || event.layerX) < this.offsetWidth - 35) ? "text" : "pointer";
});
funktioniert aber auch nicht.
Könnt ihr mir helfen?
-
Hi!
$('input').mousemove(function(){
this.style.cursor = ((event.offsetX || event.layerX) < this.offsetWidth - 35) ? "text" : "pointer";
});Was ist 'event', beziehungswiese wo soll das deiner Meinung nach herkommen? > funktioniert aber auch nicht. "Funktioniert nicht" funktionert nicht als Fehlerbeschreibung. Beobachte bitte genauer. Was soll passieren, was passiert stattdessen, gibt es Fehlermeldungen, die nicht offen sichtbar werden? Besonders bei Javascript muss man dazu im Allgemeinen zu Fuß die Fehlerkonsole aufsuchen. Lo!-
Hi!
Was soll passieren, was passiert stattdessen, [...]
Dabei meine ich nicht nur das Offensichtliche, sondern auch ob Inhalte von Variablen und dergleichen dem Wunsch entsprechen, was man mit Kontrollausgaben überprüfen kann.
Lo!
-
Hi!
Was soll passieren, was passiert stattdessen, [...]
Dabei meine ich nicht nur das Offensichtliche, sondern auch ob Inhalte von Variablen und dergleichen dem Wunsch entsprechen, was man mit Kontrollausgaben überprüfen kann.
event.offsetX bzw. event.layerX scheint undefined zu sein. this.offsetWidth hat aber den richtigen Wert.
Gibt es alternativen zu event.offsetX, womit ich weiter komme?
-
event.offsetX bzw. event.layerX scheint undefined zu sein. this.offsetWidth hat aber den richtigen Wert.
Gibt es alternativen zu event.offsetX, womit ich weiter komme?
Die jQuery-Doku sagt was zu dem Thema.
--
for your security, this text has been encrypted by ROT13 twice. -
Hi,
Gibt es alternativen zu event.offsetX, womit ich weiter komme?
Warum findest Du es nicht heraus?
Teste (und zwar in unterschiedlichen Browsern):<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<script type="text/javascript" src="_____DEIN_JQUERY_PFAD_____"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#main").click(function(e) {
var txt = "";
for (prop in e) {
txt += prop + " - " + e[prop] + "<br>";
}
$("#out").html(txt);
});
});
</script>
<style type="text/css">
#main {
width: 300px;
height: 300px;
background: red;
margin: 30px;
}
</style>
</head>
<body>
<div id="main"></div>
<div id="out"></div>
</body>
</html>Gruesse, Joachim
--
Am Ende wird alles gut.-
Hi,
<style type="text/css">
#main {
width: 300px;
height: 300px;
background: red;
margin: 30px;ich vergass: hier noch ein position:relative, wirkt Wunder ;-)
Gruesse, Joachim
--
Am Ende wird alles gut.
-
-
-
-
Hi!
$('input').mousemove(function(){
this.style.cursor = ((event.offsetX || event.layerX) < this.offsetWidth - 35) ? "text" : "pointer";
});> > Was ist 'event', beziehungswiese wo soll das deiner Meinung nach herkommen? sorry... habe ich falsch in meinem beispiel hier geschrieben. es muss natürlich ~~~javascript $('input').mousemove(function(event){ this.style.cursor = ((event.offsetX || event.layerX) < this.offsetWidth - 35) ? "text" : "pointer"; });heißen.
funktioniert aber auch nicht.
"Funktioniert nicht" funktionert nicht als Fehlerbeschreibung. Beobachte bitte genauer. Was soll passieren, was passiert stattdessen, gibt es Fehlermeldungen, die nicht offen sichtbar werden? Besonders bei Javascript muss man dazu im Allgemeinen zu Fuß die Fehlerkonsole aufsuchen.
Fehlermeldungen gibt es keine (ja, wirklich keine!). Der curser bleibt durchgehend ein pointer und wird nie text.
-
-
Mahlzeit habe_google_benutzt,
Angenommen ich habe ein input type=text, welches auf der linken Seite ein Hintergrundbild hat (35px breit).
Nun will ich dass du die linken 35px dieses inputs klickbar sind.
Mit klickbar meine ich, dass der cursor von text auf pointer geht und bei klick ein alert ausgegeben wird.Lege über das Texteingabefeld ein transparentes Irgendwas. Sobald sich der Mauszeiger darüber befindet, wird er entsprechend verändert. Sobald dieses Irgendwas angeklickt wird, wird ein alert() ausgegeben - und sinnvollerweise das Texteingabefeld fokussiert.
MfG,
EKKi--
sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:| -
Angenommen ich habe ein input type=text, welches auf der linken Seite ein Hintergrundbild hat (35px breit).
Ich nehme an du willst an der Stelle wo sich das Hintergrundbild befindet und man klicken können soll, keinen Text hinschreiben oder?
Ich würde dir daher vorschlagen per CSS die Inputbox so zu gestalten (z.B. Rahmen nur top, right und bottom) dass man ein Bild nahtlos andocken kann, welches die entsprechende Logik (Klickhandler etc.) enthält.
--
for your security, this text has been encrypted by ROT13 twice.