Frage *Klick* Mouseover stoppen *Klick* Wieder starten
- Ersteller TimoW
- Erstellt am
Mit Inline JS schon mal gar nicht. Dafür gibt es erstens jQuery und zweitens Eventhandler.
Herangehensweise: Du bindest drei Events an das Image: mouseenter, mouseleave und click. Die ersten beiden Events tauschen wie gehabt die Bilder und click entfernt beide Events. Die Methode dafür heißt off().
http://api.jquery.com/off
Herangehensweise: Du bindest drei Events an das Image: mouseenter, mouseleave und click. Die ersten beiden Events tauschen wie gehabt die Bilder und click entfernt beide Events. Die Methode dafür heißt off().
http://api.jquery.com/off
NetAktiv
Senior HTML'ler
Hallo Tronjer,
jQuery mag ja wirklich toll sein, aber zum Lernen und Verständnis bringen trägt es meines Erachtens nicht bei und es bei jeder kleinen Aufgabe als Lösung anzubieten ist meines Erachtens auch nicht zielführend. Mit wenigen Zeilen Code geht das ganz ohne jQuery und der Timo versteht auch, was gemacht wird.
Mit dem Beispielcode muss er nur noch zwei Bilder bild0.jpg und bild1.jpg kopieren und schon kann er selbst weiter üben.
jQuery mag ja wirklich toll sein, aber zum Lernen und Verständnis bringen trägt es meines Erachtens nicht bei und es bei jeder kleinen Aufgabe als Lösung anzubieten ist meines Erachtens auch nicht zielführend. Mit wenigen Zeilen Code geht das ganz ohne jQuery und der Timo versteht auch, was gemacht wird.
Mit dem Beispielcode muss er nur noch zwei Bilder bild0.jpg und bild1.jpg kopieren und schon kann er selbst weiter üben.
HTML:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<script type="text/javascript">
var oArrImages = new Array ();
oArrImages[0] = new Image();
oArrImages[1] = new Image();
oArrImages[0].src = 'bild0.jpg';
oArrImages[1].src = 'bild1.jpg';
function SwitchImage(oImg) {
var sNew = (oImg.src == oArrImages[0].src) ? oArrImages[1].src : oArrImages[0].src;
oImg.src = sNew;
}
</script>
<title>Bild Test</title>
</head>
<body>
<img onclick="SwitchImage(this);" src="bild0.jpg" alt="bild" id="bild1"/>
<br/>
Klicken zum ändern.
<hr/>
<img onmouseover="SwitchImage(this);" onmouseout="SwitchImage(this);" src="bild1.jpg" alt="bild" id="bild2"/>
<br/>
Mouseover zum ändern.
</body>
</html>Du erfüllst mit deine paar Zeilen ja auch nicht die Anforderungen...
Oder wo entfernst du genau die mouseover- und mouseoutevents wenn er klickt?
JQuery ist eigtl immer sinnvoll.
Oder wo entfernst du genau die mouseover- und mouseoutevents wenn er klickt?
JQuery ist eigtl immer sinnvoll.
Der Code ist ein exemplarisches Beispiel für veraltetes JavaScript. Zum Erzeugen eines Arrays benötigt man kein 'new' keyword, dafür reicht ein simples:
var arr = ['foo.jpg', 'bar.jpg'];
events schreibt man nicht in HTML-Tags, sondern bindet diese mit Eventlistenern.
NetAktiv
Senior HTML'ler
Ohhh, das hatte ich überlesen
Das mag sein, ich habe mir das in vergangenen Zeiten selbst beigebracht und dann mehrere Jahre nichts gemacht.
ob ich nun arr = new Array() oder arr = [] ist nur eine Frage der Anzahl der Zeichen und Lesbarkeit. arr = ['foo.jpg', 'bar.jpg'] mag angehen bei bis 5 Elementen, aber bei mehr sehe ich doch lieber, welches Element an welcher Position steht, ziehe also die Index-Schreibweise immer vor. Ich persönlich ziehe auch die Events an den Elementen vor, das mag nicht zeitgemäß sein, aber falsch ist es auch nicht. Mein Vater sagte in vergleichbaren Fällen immer:
Das ist alles Geschmackssache, sagte der Affe, und biss herzhaft in die Kernseife :).
Ich glaube es ist nicht ganz klar was ich meinte Also, ich habe ein Bild. Wenn man über dieses Bild mit der Maus fährt, dann erscheint dahinter ein anderes Bild. Das funktioniert und sieht so aus:Ohhh, das hatte ich überlesen
Code:
<img src="Bild1.png" alt="" height="200" width="250"
onMouseOver="src='Bild2.png'"
onMouseOut="src='Bild1.png'"/>Und wenn man dann WIEDER auf das Bild klickt soll der Mouseover-Effekt wieder wie vorher funktionieren.
Ich hoffe das ist verständlicher ausgedrückt.
Und mal so kurz nebenbei, ich habe keine Ahnung was JQery ist. Bin noch Schüler und unser Lehrer hat es bisher noch nicht durchgenommen.
Wäre echt nett, wenn das jemand trotzdem (auf niedrigerem Niveau) erklären könnte.
LG
-Timo
NetAktiv
Senior HTML'ler
Mein Beispiel zeigt doch das Prinzip, musst nur noch eine Zeile hinzufügen, um den Event Listener zu deaktivieren siehe https://developer.mozilla.org/de/docs/Web/API/EventTarget/removeEventListener
Aber dein erneuter Code zeigt, dass du nichts probiert, geschweige verstanden hast
Aber dein erneuter Code zeigt, dass du nichts probiert, geschweige verstanden hast
Es hat halb funktioniert. Wenn man auf das Bild drückt ändert es zum zweiten. Aber der Mouseover-Effekt ist ja nicht mit drin. Ich habe auch versucht ihn mit einzubinden. Aber wenn man dann mit der Maus rüber fährt und klickt, switcht es zum anderen Bild, märkt es sich aber nicht. Liegt das daran, dass ich den "RemoveEventListener" noch nicht mit eingebunden habe, oder woran sonst?
S
Sempervivum
Guest
Vielleicht ist dieses einfacher und verständlicher:
Code:
<img src="bilder/1.jpg" alt="" height="200" width="250" onmouseover="showImg(this, 'bilder/2.jpg');" onmouseout='showImg(this, "bilder/1.jpg");' onclick='fixImg(this);'>
<script type="text/javascript">
function showImg(ele, im) {
if (ele.getAttribute("data-clicked") != "true") ele.src = im;
}
function fixImg(ele) {
if (ele.getAttribute("data-clicked") == "true") {
ele.setAttribute("data-clicked", "false");
} else {
ele.setAttribute("data-clicked", "true");
}
}
</script>
Zuletzt bearbeitet von einem Moderator:
Einfach sicherlich, aber trotzdem keine gute Lösung. Weil hier lediglich ein Status auf true/false gesetzt wird, anstatt zu prüfen, ob am Objekt Events hängen.
So wäre es besser:
HTML:
<figure>
<img src="img1.jpg" alt="image">
</figure>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
(function() {
var images = ['img1.jpg','img2.jpg'],
bindElements = function() {
$('img').on({
'mouseover': function() {
$(this).attr('src', images[1]);
},
'mouseout': function() {
$(this).attr('src', images[0]);
}
});
};
$('figure').on('click', function() {
if (typeof $._data(document.querySelector('img'),'events') != 'undefined') {
$('img').off();
} else {
bindElements();
}
});
bindElements();
}());
</script>
S
Sempervivum
Guest
Dass man für einen simplen Bilderwechsel ein Array und jQuery braucht, will sich mir nicht erschließen. Ebenso wenig die Vorteile, wenn man das Vorhandensein von Listenern abfragt statt eine Statuskennung.
NetAktiv
Senior HTML'ler
Das Array habe ich nur verwendet, weil ich mal vor grauer Vorzeit hörte, dass dies dafür sorgt, dass die Bilder auch schon geladen sind, wenn man das Script aufruft und dann nicht erst nachgeladen werden. Dass ich jQuery für ein einfaches Beispiel auch für einen Overkill halte, habe ich ja deutlich gemacht. Meine erste Lösung war auch, sich den Status zu merken, aber da es im JavaScript keine statischen Variablen gibt und ich globale vermeiden wollte, habe ich das sein lassen. Auf die Idee, den Status beim Bild zu merken, bin ich nicht gekommen (damals gab es auch diese Attribute glaube noch nicht), die finde ich gut. Den Event zu entfernen mag zwar sauber sein, aber ob er in der Praxis relevant ist, bezweifle ich. Die gesparten Ressourcen sind sicher vernachlässigbar.
NetAktiv
Senior HTML'ler
Hst du denn auch verstanden, WAS und WARUM und WIE da funktioniert?
Nicht komplett. Also durch das Klicken wird nun die Funktion 'fixImg' abgerufen. Ich kann es halbwegs nachvollziehen. Kannst du mir vielleicht nur die Begriffe 'ele' und 'im' erklären?
Der Workaround per Zustandsvariable mag angehen, sofern es sich um ein kurzes Script handelt, das im Body der zugehörigen HTML-Datei existiert und von einem selber erstellt wurde. in der Praxis stehen solche Snippets aber häufig in einem größeren Kontext, externen Dateien und werden von Dritten erweitert. Die Variable lässt sich schwer debuggen und schon gar nicht testen
JavaScript ist eine objektorientierte Sprache und sollte auch objektorientiert gedacht werden. Mittels der Methode $._data() kann man prüfen, ob und welche Events auf einem HTML-Element liegen.
Nebenbei bemerkt ließe sich das Problem des TE bei Verwendung von background-images wesentlich einfacher lösen:
ungetestet:
JavaScript ist eine objektorientierte Sprache und sollte auch objektorientiert gedacht werden. Mittels der Methode $._data() kann man prüfen, ob und welche Events auf einem HTML-Element liegen.
Code:
$.each($._data(document.querySelector('img'),'events'), function(key, value) {
console.debug('event: ', key);
});Nebenbei bemerkt ließe sich das Problem des TE bei Verwendung von background-images wesentlich einfacher lösen:
ungetestet:
Code:
p {background-image: url('image1.jpg')}
p.myclass:hover {background-image: url('image2.jpg')}
<p class="myclass"></p>
$('p').on('click', function() {
$(this).toggleClass('myclass');
});
S
Sempervivum
Guest
Das trifft zu. Allerdings ist hier nicht das Array das entscheidende, sondern dass das Bild in einem Image-Objekt vorgeladen wird.
I. w. S. ein objektorientiertes Vorgehen, nämlich die Eigenschaften beim Objekt zu speichern. Dies ermöglicht es, das Skript unverändert auf mehrere Bilder anzuwenden.
@Tronjer: Eine Zustandsvariable ist kein Workaround sondern eine ganz normale und legitime Praxis. Für mich nicht überzeugend das Ganze. Plausibel wird es nur, wenn man in Betracht zieht, dass nicht-technische Motive eine Rolle spielen.
S
Sempervivum
Guest
Hallo TimoW
Hattet ihr noch keine Funktionen? ele ist ein Element. Wirfst Du einen Blick auf den Aufruf der Funktion im HTML, siehst Du, dass dieser Parameter mit "this" versorgt wird; "this" ist das Element bei dem der Listener notiert wird bzw. das was gehovert bzw. geklickt wird, in diesem Fall das img-Element. Wird die Funktion ausgeführt, wird ele durch dieses Element ersetzt.´im ist die Adresse des anzuzeigenden Bildes; sie wird entweder mit "Bild1.jpg" oder "Bild2.jpg" versorgt.
