onmouseover und onmouseout

georg33 · 5 September 2009

Hallo,

ich habe eine kleine Frage. Wie wird mit onmouseout die Ausgangslage definiert? Wenn zB. mit onmouseover der Rahmen rot markiert wird, soll mit onmouseout alles wieder rückgängig gemacht werden.

Gruß Georg

Speedy19102000 · 5 September 2009

Moin!

Dürfte das sein, was Du suchst! Klick

MfG

mermshaus · 5 September 2009

Edit: Hupsala, Moment. Habe die falsche Datei aktualisiert. Das funktioniert so noch nicht. Peinlich. ;)
Edit 2: Here we go. Jetzt sollte es gehen.
Edit 3: Code noch einmal aktualisiert, da der IE die Prototype-Methode nicht unterstützte.

Ich würde es über das Hinzufügen und Entfernen von CSS-Klassen regeln. Von der Idee her so (nur im Firefox getestet, Verbesserungen willkommen -- in jQuery und Co. ist sowas sicher bereits integriert):

HTML:

<style type="text/css">

.default {
    width: 300px;
    height: 200px;
    background: #f00;
    border: 3px solid #00f;
    }

.over {
    background: #00f;
    border: 5px dashed #0f0;
    width: 500px;
    height: 300px;
    }

</style>

<script type="text/javascript">
// <![CDATA[
function StringUtils() {}

StringUtils.trim = function(str, chars)
{
    return StringUtils.ltrim(StringUtils.rtrim(str, chars), chars);
}

StringUtils.ltrim = function(str, chars)
{
    chars = chars || "\\s";
    return str.replace(new RegExp("^[" + chars + "]+", "g"), "");
}

StringUtils.rtrim = function(str, chars)
{
    chars = chars || "\\s";
    return str.replace(new RegExp("[" + chars + "]+$", "g"), "");
}

function CssHelper() {}

CssHelper.hasClass = function(node, cl)
{
    var ret = false;
    var classes = StringUtils.trim(node.className).split(' ');
    for (var i = 0; i < classes.length; i++) {
        if (cl == classes[i]) {
            ret = true;
        }
    }

    return ret;
}

CssHelper.addClass = function(node, cl)
{
    if (!CssHelper.hasClass(node, cl)) {
        node.className += ' ' + cl;
    }
}

CssHelper.removeClass = function(node, cl)
{
    var classes = StringUtils.trim(node.className).split(' ');
    var newClasses = '';
    for (j = 0; j < classes.length; j++) {
        if (cl != classes[j]) {
            newClasses += classes[j] + ' ';
        }
    }
    node.className = newClasses;
}

window.onload = function()
{
    var test = document.getElementById('test');

    test.onmouseover = function()
    {
        CssHelper.addClass(this, 'over');
    }

    test.onmouseout = function()
    {
        CssHelper.removeClass(this, 'over');
    }
}
// ]]>
</script>

<div id="test" class="default"></div>

Bernhard · 5 September 2009

Hallo mermshaus,

ich hätt's mit CSS gemacht...;-)

Da ich Deinen Code nicht ansatzweise verstehe: kannst Du den kurz erläutern?

Wäre damit eventuell mein Problem lösbar? (http://www.html.de/javascript-ajax-und-dhtml/23442-onmouseover-mit-auswirkung-auf-mehrere-links.html)

Grüße
Bernhard

mermshaus schrieb:

Ich würde es über das Hinzufügen und Entfernen von CSS-Klassen regeln. Von der Idee her so (nur im Firefox getestet, Verbesserungen willkommen -- in jQuery und Co. ist sowas sicher bereits integriert):

HTML:

<style type="text/css">

.default {
    width: 300px;
    height: 200px;
    background: #f00;
    border: 3px solid #00f;
    }

.over {
    background: #00f;
    border: 5px dashed #0f0;
    width: 500px;
    height: 300px;
    }

</style>

<script type="text/javascript">
// <![CDATA[
function StringUtils() {}

StringUtils.trim = function(str, chars)
{
    return StringUtils.ltrim(StringUtils.rtrim(str, chars), chars);
}

StringUtils.ltrim = function(str, chars)
{
    chars = chars || "\\s";
    return str.replace(new RegExp("^[" + chars + "]+", "g"), "");
}

StringUtils.rtrim = function(str, chars)
{
    chars = chars || "\\s";
    return str.replace(new RegExp("[" + chars + "]+$", "g"), "");
}

HTMLElement.prototype.hasClass = function(cl)
{
    var ret = false;
    var classes = StringUtils.trim(this.className).split(' ');
    for (var i = 0; i < classes.length; i++) {
        if (cl == classes[i]) {
            ret = true;
        }
    }

    return ret;
}

HTMLElement.prototype.addClass = function(cl)
{
    if (!this.hasClass(cl)) {
        this.className += ' ' + cl;
    }
}

HTMLElement.prototype.removeClass = function(cl)
{
    var classes = StringUtils.trim(this.className).split(' ');
    var newClasses = '';
    for (j = 0; j < classes.length; j++) {
        if (cl != classes[j]) {
            newClasses += classes[j] + ' ';
        }
    }
    this.className = newClasses;
}

window.onload = function()
{
    var test = document.getElementById('test');

    test.onmouseover = function()
    {
        this.addClass('over');
    }

    test.onmouseout = function()
    {
        this.removeClass('over');
    }
}
// ]]>
</script>

<div id="test" class="default"></div>

georg33 · 5 September 2009

@Speedy: Nein, ich habe doch eindeutig geschrieben onmouseover und onmouseout. Die Funktion musss mit JavaScript erfüllt werden. Es ist ein Eingabefeld.

<input type="text" maxlength="240" name="eingabe" size="50" onmouseover="this.style.borderColor='#000000'" onmouseout="this.style.borderColor='#ffffff'" onselect="this.style.color='#000000'" />

Anstatt onmouseout="this.style.borderColor='#ffffff'" möchte ich die Ausgangslage (Wie vor onmouseover)... onmouseout="....'"?

@Bernhard: Ich möchte keine Classdefinition einfügen und anschließend wieder entfernen.

mermshaus · 5 September 2009

Nimm die Lösung mit den CSS-Klassen (habe meinen ersten Post noch einmal editiert) oder setz die veränderten Werte manuell wieder auf den Ausgangswert zurück.

Es scheint nicht möglich zu sein, im IE die Styles eines Elements per JavaScript zu kopieren und wieder zu setzen. Die beste Lösung, die ich gefunden habe, funktioniert nicht richtig:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>

<style type="text/css">
/* <![CDATA[ */
#test {
    width: 300px;
    height: 200px;
    background: #f00;
    border: 3px solid #00f;
    }
/* ]]> */
</style>

<script type="text/javascript">
// <![CDATA[
function CssHelper() {};

CssHelper.backupStyles = function(node)
{
    node.styleDummy = document.createElement('div');

    for (var k in node.style) {
        try {
            eval("node.styleDummy.style." + k + " = node.style." + k + ";");
        } catch(e) {
            // For IE's "font" property
        }
    }
}

CssHelper.restoreStyles = function(node)
{
    // Nothing to restore
    if (node.styleDummy == null) return;

    for (var k in node.styleDummy.style) {
        try {
            eval("node.style." + k + " = node.styleDummy.style." + k + ";");
        } catch (e) {
            // Do nothing
        }
    }
}

window.onload = function()
{
    document.getElementById('test').onmouseover = function()
    {
        CssHelper.backupStyles(this);

        this.style.backgroundColor = '#fff';
        this.style.borderColor     = '#0f0';
    }

    document.getElementById('test').onmouseout = function()
    {
        CssHelper.restoreStyles(this);
    }
}
// ]]>
</script>
</head>

<body>
    <div id="test"></div>
</body>

</html>

georg33 · 6 September 2009

Leute ich habe das Problem, dass beim Fahren auf den Eingabefeld anstatt der Cursor die Hand angezeigt wird. Weiss jemand wie ich das Problem beheben kann?

Bernhard · 6 September 2009

georg33 schrieb:
Leute ich habe das Problem, dass beim Fahren auf den Eingabefeld anstatt der Cursor die Hand angezeigt wird. Weiss jemand wie ich das Problem beheben kann?

Hallo Georg,

vielleicht hilft Dir das: http://de.selfhtml.org/css/eigenschaften/anzeigefenster.htm#cursor

Grüße
Bernhard

struppi · 7 September 2009

georg33 schrieb:
@Speedy: Nein, ich habe doch eindeutig geschrieben onmouseover und onmouseout. Die Funktion musss mit JavaScript erfüllt werden. Es ist ein Eingabefeld.

<input type="text" maxlength="240" name="eingabe" size="50" onmouseover="this.style.borderColor='#000000'" onmouseout="this.style.borderColor='#ffffff'" onselect="this.style.color='#000000'" />

Anstatt onmouseout="this.style.borderColor='#ffffff'" möchte ich die Ausgangslage (Wie vor onmouseover)... onmouseout="....'"?

CSS fände ich schlauer:

Code:

.input {border-color:#fff;} 
.input:hover {border-color:#000;}

Aber wenn du's unbedingt mit JS machen willst:

sss mit JavaScript erfüllt werden. Es ist ein Eingabefeld.

Code:

<input onmouseover="this.style.borderColor='#000000'" 
onmouseout="this.style.borderColor=''"  />

[EDIT]: Das Forum verschluckt Code :-(

mermshaus · 7 September 2009

struppi schrieb:
Code:

.input {border-color:#fff;} .input:hover {border-color:#000;}

Irgendwie habe ich noch nicht verinnerlicht, dass man sowas verwenden kann, weil der IE >6 es tatsächlich unterstützt. Schon das zweite Mal in zwei Tagen. :|

Die Lösung ist natürlich optimal.

struppi · 7 September 2009

und man muss sich dann auch immer Fragen, ob es wirklich so wichtig ist, dass es der IE 6 kann.
Ob beim mouseovern der Rahmen rot wird oder nicht, dürfte für die Bedienung der Seite nur unwesentlich eine Rolle spielen, ansonsten ist es nur eine optische Spielerei.

onmouseover und onmouseout

georg33

Neues Mitglied

Speedy19102000

Mitglied

mermshaus

Senior HTML'ler

Bernhard

Neues Mitglied

georg33

Neues Mitglied

mermshaus

Senior HTML'ler

georg33

Neues Mitglied

Bernhard

Neues Mitglied

struppi

Guest

mermshaus

Senior HTML'ler

struppi

Guest

Neueste Beiträge