mouseover und mouseout

[juppi]

hallo,

wenn ich mit der Maus über ein <img>-Element fahre, dann ändere ich mit der mouseover-Methode das Bild und wenn ich dann das Bild wieder verlasse, dann setze ich das Bild mit der mouseout-Methode zurück, so wie es anfänglich "aussah", z.b.:

<img id="bild" src="bild.jpg" onmouseover="src='bild_on.jpg'" onmouseout="src='bild.jpg'" alt="" />

das ist mir zuaufwendig, da ich über 200 <img>-Elemente habe und jedesmal sowas zuschreiben, da wir man irre.

Gibt es mit JavaScript eine Möglichkeit sowas besser und übersichtlicher hinzubekommen?

Zum Beispiel, denke ich an einer Funktion, die das ganze steuert...

<script type="text/javascript">  
/* <![CDATA[ */  
  
function mauscontrol (bild1, bild2) {  
 if (mouseover) {  
  document.getElementById('bild').src ='images/'+ bild1 +'.gif'  
 } else if (mouseout) {  
  document.getElementById('bild').src ='images/'+ bild2 +'.gif'  
 }  
}  
  
/* ]]> */  
</script>

<immg id="bild" src="bild1" onmouseover="mauscontrol('bild1', 'bild2')" alt="" />

Das ist zwar nicht die "Lösung" aber sowas in die Richtung suche ich. Wäre super wenn jemand mir weiterhelfen würde.

Schönen Abend
juppi

[Multi]

Du kannst per Javascript jeden img einen Eventhandler hinzufügen. Geht einfach per for-schleife und sind nur ein paar Zeilen Code.

[juppi]

Hallo,

Du kannst per Javascript jeden img einen Eventhandler hinzufügen. Geht einfach per for-schleife und sind nur ein paar Zeilen Code.

"nur" ein Eventhandler ist auch nicht das Problem. Dann kann ich es auch gleich in den <img>-Tag schreiben.

Meine <img>-Tags sehen so aus:

<img id="bild" src="..." onmouseover="..." onmouseour="..." alt="" />
<img id="bild" src="..." onmouseover="..." onmouseour="..." alt="" />
<img id="bild" src="..." onmouseover="..." onmouseour="..." alt="" />
<img id="bild" src="..." onmouseover="..." onmouseour="..." alt="" />

Kurz gesagt, alle ID's der <img>-Tags sind gleich. Das muss (wegen CSS) so bleiben. Ich suche nach einer "elegenaten" Funktion, die das handelt...

viele grüße
juppi

[Multi]

Kurz gesagt, alle ID's der <img>-Tags sind gleich.

Du scheinst noch nicht zu wissen, dass eine ID eindeutig sein muss, also nur einmal im Dokument vorkommen darf.

Das muss (wegen CSS) so bleiben.

Wer hat dir den Blödsinn erzählt? Du solltest dir nochmal durchlesen, wie eine ID auszusehen hat und was Klassen sind.

Ansonsten lies nochmal meinen Beitrag, da schreibe ich, du sollst den Eventhandler durchs Javascript dynamisch hinzufügen und nicht selbst in den Quelltext schreiben.

[Gunnar Bittersmann]

@@Multi:

nuqneH

Du kannst per Javascript jeden img einen Eventhandler hinzufügen.

Du kannst es aber auch sein lassen.

Sinnvoller ist wohl _ein_ Eventhandler für ein gemeinsames Vorfahrenelement ('body' könnte sich anbieten). Wenn das Event bei diesem ankommt, wird geprüft, wo es ursprünglich ausgelöst wurde: ob bei einem 'img'-Element und wenn ja, bei welchem.

Nennt sich event delegation. Näheres bei molily.

Qapla'

[Felix Riesterer]

Lieber juppi,

wie schon erwähnt Du brauchst ein Script, welches alle Deine <img>-Elemente der Reihe nach prüft, um ihnen die passenden Eventhandler zu verpassen. Dazu bietet es sich an, dass Du dem jeweiligen <img>-Element irgendwie mit HTML-Mitteln die Hovergrafik zuordnest, oder aber Du erfindest eine Art Dateinamenskonvention.

Man könnte das sehr selten verwendete "longdescr"-Attribut missbrauchen(!), um die Hovergrafik zuzuordnen:

<img src="bild.jpg" longdescr="hovergrafik:bild_.jpg" alt="" />

Das würde aber sehr viel Extra-Code im HTML verursachen. Besser fände ich eine selbst festgelegte Konvention, dass jede Hovergrafik das Präfix "hover_" bekommt: <img src="bild.jpg" alt="" /> würde beim Hovern dann zu <img src="hover_bild.jpg" alt="" />.

So. Jetzt brauchst Du nur noch eine Schleife, die Dir alle <img>-Elemente findet (oder Du nimmst gleich document.images) und mit Deinen passenden Eventhandlern ausrüstet.

Dabei solltest Du aber bedenken, dass vielleicht nicht restlos alle <img>-Elemente Deiner Seite einen solchen Hover-Effekt bekommen sollten. Die auszuschließenden Elemente könnten eine passende Klasse zugewiesen bekommen, oder besser nicht die auszuschließenden, sondern die zu hovernden.

<img src="bild.jpg" alt="" class="has-hover-effect" />

In JavaScript kannst Du das so prüfen:

for (var i=0; i < document.images.length; i++) {  
    if (document.images[i].className  
        && document.images[i].className.match(/\bhas-hover-effect\b/)  
    ) {  
        document.images[i].mouseover = function () {  
            this.src = this.src.replace(/(\/)+$/ "hover_$1");  
        };  
        document.images[i].mouseout = function () {  
            this.src = this.src.replace(/hover_(\/)+$/ "$1");  
        };  
    }  
}

Selbstverständlich habe ich obigen Code nicht getestet, aber Du kannst es ja ausprobieren und aus meinen möglichen Fehlern lernen. ;-)

Liebe Grüße,

Felix Riesterer.

[Gunnar Bittersmann]

@@Felix Riesterer:

nuqneH

wie schon erwähnt Du brauchst ein Script, welches alle Deine <img>-Elemente der Reihe nach prüft, um ihnen die passenden Eventhandler zu verpassen.

Nein. Wie schon erwähnt, braucht man das eben nicht.

Qapla'

[Felix Riesterer]

Lieber Gunnar,

Nein. Wie schon erwähnt, braucht man das eben nicht.

das kommt darauf an, wie tief man die Materie versteht. Anhand der Fragestellung und des Beispielcodes siehst Du ja, dass juppi molilys Ansatz kaum umsetzen können wird. Er wird sicherlich meinen Code auch nicht sofort von selbst in einem neuen Projekt umsetzen können, aber mit seinem jetzigen Wissensstand meines Erachtens besser verstehen.

Liebe Grüße,

Felix Riesterer.

[Matti Maekitalo]

Tach auch.

Man könnte das sehr selten verwendete "longdescr"-Attribut missbrauchen(!), um die Hovergrafik zuzuordnen:

<img src="bild.jpg" longdescr="hovergrafik:bild_.jpg" alt="" />

Mit HTML5 ist es erlaubt, eigene Attribute zu definieren. Diese müssen den Präfix "-data-" tragen. Ich denke, ein solches Attrbut zu verwenden ist deutlich besser, als andere Attribute zu mißbrauchen.
Weiterhin hat es den Vorteil, dass man die Eventhandler einfach allen Elementen zufügen kann, welche dieses Attribut tragen.

Bis die Tage,
Matti

[Felix Riesterer]

Lieber Matti,

Mit HTML5 ist es erlaubt, eigene Attribute zu definieren. [...]
Weiterhin hat es den Vorteil, dass man die Eventhandler einfach allen Elementen zufügen kann, welche dieses Attribut tragen.

und was spricht gegen die Verwendung einer bestimmten Klasse anstatt eines selbstdefinierten Attributes? Ist das nicht wesentlich semantischer?

Liebe Grüße,

Felix Riesterer.

[Matti Maekitalo]

Tach auch.

Mit HTML5 ist es erlaubt, eigene Attribute zu definieren. [...]
Weiterhin hat es den Vorteil, dass man die Eventhandler einfach allen Elementen zufügen kann, welche dieses Attribut tragen.

und was spricht gegen die Verwendung einer bestimmten Klasse anstatt eines selbstdefinierten Attributes? Ist das nicht wesentlich semantischer?

Es kommt drauf an. Im Beispielcode von dir, den ich zitiert habe, hast du ein anderes Attribut benutzt, um dort Daten zu speichern. Das ist zumindest nicht semantisch korrekt (du benutzt selber das Wort mißbrauchen). In einem eigenen Attribut passen diese Daten wunderbar hinein.

Für Fälle, in denen man keine Daten ablegen muß, sondern nur Elemente in einer bestimmten Form auszeichnet, ist die Klassenlösung gut und bewährt.
Wenn du Daten ohne eigenes Attribut abspeichern willst, habe ich bisher einige Krücken gesehen:
 - Speicherung in anderen (fremden) Attributen, etwa auch das id-Attribut, wenn man es anderweeitig nicht benötigt und die Daten einen validen Namen ergeben
 - Vergabe einer ID und dann zentrale Speicherung der Daten in irgendwelchen JS-Arrays über die Zuordnung der IDs

Ob es semantischer ist, mag ich nicht beurteilen. Immerhin sagt ein selbstgewählter Klassenname genausowenig über die Struktur eines Dokuments aus wie ein selbst gewählter Attributname. Intuitiv würde ich die Faustregel nutzen und eigene Aatribute verwenden, wenn ich Daten direkt am Knoten speichern will (hier: den Namen der hovergrafik etwa), zum Auszeichnen wie gehabt CSS Klassen nehmen.

Bis die Tage,
Matti

[Gunnar Bittersmann]

@@Matti Maekitalo:

nuqneH

zum Auszeichnen wie gehabt CSS Klassen nehmen.

Jibtet nicht. Auch nicht mit Bindestrich.

Qapla'

[Matti Maekitalo]

Tach auch.

@@Matti Maekitalo:

zum Auszeichnen wie gehabt CSS Klassen nehmen.
Jibtet nicht.

Du hast Recht.

Bis die Tage,
Matti

[JürgenB]

Hallo Felix,

und was spricht gegen die Verwendung einer bestimmten Klasse anstatt eines selbstdefinierten Attributes? Ist das nicht wesentlich semantischer?

ich steuere ein Javascript so:

<div id="map" class="gpxview:Beispiel1.gpx:Satellit" style="width:500px;height:300px"></div>

bzw. so:

<button type="button" class="gpxview:map:lade:Beispiel2.gpx:Hybrid">2. Karte laden</button>

Findest du so etwas semantisch?

Gruß, Jürgen

[Felix Riesterer]

Lieber JürgenB,

<div id="map" class="gpxview:Beispiel1.gpx:Satellit" style="width:500px;height:300px"></div>
bzw. so:
<button type="button" class="gpxview:map:lade:Beispiel2.gpx:Hybrid">2. Karte laden</button>

Findest du so etwas semantisch?

nein. Das <div> und der <button> sind Elemente, die ohne JavaScript keine Bedeutung haben. Daher hat es keinen Sinn, sie "semantisch" auszeichnen zu wollen, da sie im Idealfall überhaupt erst über JavaScript ihren Weg in das Dokument finden.

Liebe Grüße,

Felix Riesterer.

[JürgenB]

Hallo Felix,

nein. Das <div> und der <button> sind Elemente, die ohne JavaScript keine Bedeutung haben. Daher hat es keinen Sinn, sie "semantisch" auszeichnen zu wollen, da sie im Idealfall überhaupt erst über JavaScript ihren Weg in das Dokument finden.

um Elemente erst "über JavaScript ihren Weg in das Dokument finden" zu lassen, benötigst du aber im HTML Aufhänger, und genau diese Funktion hat das DIV, das ja auch noch mit "Ersatzinhalt" gefüllt sein kann.

Gruß, Jürgen

[Felix Riesterer]

Lieber JürgenB,

benötigst du aber im HTML Aufhänger, und genau diese Funktion hat das DIV, das ja auch noch mit "Ersatzinhalt" gefüllt sein kann.

dazu hat es eine ID...

Liebe Grüße,

Felix Riesterer.

[JürgenB]

Hallo Felix,

dazu hat es eine ID...

und wenn es auch mehrere Elemente sein dürfen? Mein Script, zu dem der obige HTML-Schnippsel gehört, wird ausschließlich über die Angaben im class-Attribut des DIVs gesteuert und es dürfen davon mehrere vorkommen. Hier warte ich schon auf die Erweiterungen, die HTML5 mitbringt.

Gruß, Jürgen