Antworten zum Thema „[JavaScript] opacity bei onmouseover ändern“

[Sinane]

Huhu,

ich wollte ein kleines Javascript schreiben, das beim Überfahren eines Bildes mit der Maus (bzw. eines Links) dessen opacity-Wert ändert.

Code dazu:

<a href="?path=support&amp;mode=newticket" class="ts-ico" onmouseover="lightup('supportImg1');" onmouseout="lightoff('supportImg1');">
              <img name="supportImg1" src="images/supportcenter/new.png" alt="New Ticket" title="Neues Ticket erstellen" width="64" height="64" style="opacity: 0.5;" />
              <br /><b>Neues Ticket erstellen</b>
            </a>

function lightup(imgName)
    {
    document[imgName].style.opacity = '1.0';
    }
function lightoff(imgName)
    {
    document[imgName].style.opacity = '0.5';
    }

Aber das Ganze funktioniert nicht... Kann mir jemand sagen, wo da der Fehler liegt?


GRUß Sinane

 

[cebito]

AW: [JavaScript] opacity bei onmouseover ändern

Und warum? Du kannst das doch einfacher haben - per css-hover...

 

[Sinane]

AW: [JavaScript] opacity bei onmouseover ändern

Und wie bewerkstellige ich dann, dass der Text immer auf 1.0 bleibt und sich nur das Bild ändert?

 

[cebito]

AW: [JavaScript] opacity bei onmouseover ändern

Und wie bewerkstellige ich dann, dass der Text immer auf 1.0 bleibt und sich nur das Bild ändert?

Was genau willst du erreichen? Kannst du das mal genauer (am besten bebildert alle Zustände) erklären?

 

[Sinane]

AW: [JavaScript] opacity bei onmouseover ändern

Das kann man aus dem Code entnehmen... Beim Überfahren des LINKS mit der Maus soll sich der opacity-Wert des BILDES ändern, nicht der vom ganzen LINK, welcher außer dem BILD noch TEXT einschließt.

 

[SineTempore]

AW: [JavaScript] opacity bei onmouseover ändern

wie cebito schon sagte. geht mit css:

a img {
    opacity: 0.5;
}
a:hover img {
    opacity: 1;
}

 

[Sinane]

AW: [JavaScript] opacity bei onmouseover ändern

Ok, und wie bekomm ich es nun hin, dass es nur bei ausgewählten Bildern passiert (derer sind 3, der komplette Rest an verlinkten Bildern soll diesen Effekt nicht bekommen)?

//EDIT: Man bedenke, dass das Bild auch bei Berührung des Textes "aufleuchten" soll, der Text aber von opacity: 0.5 nicht betroffen sein darf!

 

[kleeaar]

AW: [JavaScript] opacity bei onmouseover ändern

dann gibst du deinem Link halt ne Klasse dann würde der code halt so aussehen

a.link img {
    opacity: 0.5;
}
a.link:hover img {
    opacity: 1;
}

bzw speziell eine id...

a#link1 img, a#link2 img, a#link3 img {
    opacity: 0.5;
}
a#link1:hover img {
    opacity: 1;
}
a#link2:hover img {
    opacity: 1;
}
a#link3:hover img {
    opacity: 1;
}

wenn deine Struktur so ist <a><img>Text</a> sollte es auch beim Überfahren des Textes Funktionieren...
Grüße

 

[Sinane]

AW: [JavaScript] opacity bei onmouseover ändern

Ich danke euch, das hat funktioniert

 

[uracil]

AW: [JavaScript] opacity bei onmouseover ändern

Wenn du das ganze mit Animation haben willst empfehle ich jQuery (Javascript)

$('a.link').fadeTo(0,0.5).hover(
    function () {
        $('img',this).fadeTo(500,1);
    },
    function () {
        $('img',this).fadeTo(500,0.5);
    });

dazu braucht der Link dann wieder die Klasse "link".
Die Dauer der Animation kannst du mit dem ersten Parameter der funktion fadeTo angeben. der zweite Parameter ist die opactiy.

Grüße!

 

[Sinane]

AW: [JavaScript] opacity bei onmouseover ändern

Wenn du das ganze mit Animation haben willst empfehle ich jQuery (Javascript)

$('a.link').fadeTo(0,0.5).hover(
    function () {
        $('img',this).fadeTo(500,1);
    },
    function () {
        $('img',this).fadeTo(500,0.5);
    });

dazu braucht der Link dann wieder die Klasse "link".
Die Dauer der Animation kannst du mit dem ersten Parameter der funktion fadeTo angeben. der zweite Parameter ist die opactiy.

Grüße!

Das funktioniert iwie nicht... (ja, ich habe jQuery eingebunden).