• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage *Klick* Mouseover stoppen *Klick* Wieder starten

T

TimoW

Mitglied
Hallo nochmal

wollte fragen, wie man programmiert, dass, wenn man auf ein Bild mit Mouseover-Effekt klickt, dass der Mouseover-Effekt stoppt und somit nur das Bild angezeigt wird, welches erscheint, wenn man mit der Maus über das Bild fährt. (Hier wäre das
"Zwei1.png")
bildschirmfoto-2016-01-07-um-202159.png
 
Werbung:
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
 
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.

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>
 
Werbung:
NetAktiv schrieb:
Mit dem Beispielcode muss er nur noch zwei Bilder bild0.jpg und bild1.jpg kopieren und schon kann er selbst weiter üben.
Zum Vergrößern anklicken....

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.
 
thecain schrieb:
Oder wo entfernst du genau die mouseover- und mouseoutevents wenn er klickt?
Zum Vergrößern anklicken....
Ohhh, das hatte ich überlesen :mad:
Tronjer schrieb:
Der Code ist ein exemplarisches Beispiel für veraltetes JavaScript
Zum Vergrößern anklicken....
Das mag sein, ich habe mir das in vergangenen Zeiten selbst beigebracht und dann mehrere Jahre nichts gemacht.
Tronjer schrieb:
... dafür reicht ein simples: var arr = ['foo.jpg', 'bar.jpg'];
Zum Vergrößern anklicken....
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 :).
 
Werbung:
NetAktiv schrieb:
Ohhh, das hatte ich überlesen :mad:
Zum Vergrößern anklicken....
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:
Code: 
  <img src="Bild1.png" alt="" height="200" width="250"
  onMouseOver="src='Bild2.png'"
  onMouseOut="src='Bild1.png'"/>
So. NUN soll aber, sobald man auf das Bild klickt, das ZWEITE Bild stehen bleiben, also sobald man geklickt hat funktioniert der Mouseover-Effekt nicht mehr und man sieht nur noch das zweite Bild.
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 schrieb:
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
Zum Vergrößern anklicken....
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?
 
Werbung:
Der mouseover war drin, beim unteren Bild, und wenn man raus geht, schaltet es zurück. Ist extra so gemacht, musst halt nur den mouseout event ganz weglassen und nach dem umschalten den event Listener deaktivieren oder immer nur auf das neue umschalten
 
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:
Sempervivum schrieb:
Vielleicht ist dieses einfacher und verständlicher
Zum Vergrößern anklicken....

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>
 
Werbung:
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.
 
Sempervivum schrieb:
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.
Zum Vergrößern anklicken....
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.
 
Sempervivum schrieb:
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>
Zum Vergrößern anklicken....
Vielen Dank! Funktioniert super!
LG
-Timo
 
Werbung:
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.
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');
});
 
Werbung:
dass die Bilder auch schon geladen sind, wenn man das Script aufruft und dann nicht erst nachgeladen werden.
Zum Vergrößern anklicken....
Das trifft zu. Allerdings ist hier nicht das Array das entscheidende, sondern dass das Bild in einem Image-Objekt vorgeladen wird.

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.
Zum Vergrößern anklicken....
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.
 
Hallo TimoW
Ich kann es halbwegs nachvollziehen. Kannst du mir vielleicht nur die Begriffe 'ele' und 'im' erklären?
Zum Vergrößern anklicken....
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.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben