MooTools MouseOver Bild-Navigation erweitern

rflx · 15. September 2009

Hallo zusammen,

mache gerade eine Bildnavigation in MooTools mit folgende MouseOver Funktion:

Code:

window.addEvent('domready', function() {
$$('img.mo').each(function(img) {
	var src = img.getProperty('src');
	var extension = src.substring(src.lastIndexOf('.'),src.length)
	img.addEvent('mouseenter', function() { img.setProperty('src',src.replace(extension,'-mo' + extension)); });
	img.addEvent('mouseleave', function() { img.setProperty('src',src); });
});
});

Nun meine Frage: Wie kann ich für die Bilder einen "Active"-Status hinzufügen?
Also wenn der Menüpunkt Aktiv ist sollte auch folgendes Bild geladen werden:

Code:

img.setProperty('src',src.replace(extension,'-mo' + extension));

Danke

rflx

Quaese · 15. September 2009

Hi,

ich gehe einfach mal davon aus, dass das Element den aktiven Zustand erreichen soll, nachdem es einen Mausklick erhalten hat und diesen solange behält, bis ein anderes Element geklickt wurde.

Du müsstest das aktuell geklickte Element in einer Variablen speichern, anhand der du den Zustand rückgängig machen kannst bzw. entscheiden kannst, welcher Zustand nach einem mouseleave-Event wieder hergestellt werden soll.

Ein Beispiel mit Hintergrundfarbe:

Code:

<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script src="mootools-1.2.3-core-nc.js" type="text/javascript"></script>
<script type="text/javascript">
  <!--
window.addEvent('domready', function() {
  $$('div.testClass').each(function(elem, index){
    // Indexvariable initialisieren
    intIndex = -1;

    // Click-Event (macht Element aktiv)
    elem.addEvent('click', function(evt){
      this.setStyles({
        'background-color': '#0f0'
      });
      // Falls bereits ein Element aktiv gemacht wurde
      if(intIndex != -1)
      	$$('div.testClass')[intIndex].setStyles({
          'background-color': '#fff'
        });

      // Index des gerade aktivieren Elements speichern
      intIndex = index;

      this.fireEvent('mouseenter');
    });

    // Mouseover-Event
    elem.addEvent('mouseenter', function(evt){
      this.setStyles({
      	'background-color': '#f00'
      });
    });

    // Mouseout-Event
    elem.addEvent('mouseleave', function(evt){
      this.setStyles({
        'background-color': ((intIndex==index)? '#0f0' : '#fff')
      });
    });
  });
});
 //-->
</script>
</head>
<body>
<div class="testClass">Inhalt 1</div>
<div class="testClass">Inhalt 2</div>
</body>
</html>

Ciao
Quaese

MooTools MouseOver Bild-Navigation erweitern

rflx

Erfahrenes Mitglied

Quaese

Moderator

Neue Beiträge