Aktiven Sliderbutton einfärben

MelanieCibura · 11.05.2011

Hallo,

ich habe eine ganz einfache JavaScript-Galerie auf meiner unter Portfolio.

Die runden Buttons unter dem Slider haben alle die gleiche Farbe. Wenn man über einen Button geht, ändert sich der Button in die Farbe rot. Ich möchte aber, dass immer der aktuelle Button (der von dem Bild, bei dem man sich gerade befindet), auch rot ist.

Wie mache ich das?

Gruß, Melanie

cebito · 11.05.2011

AW: Aktiven Sliderbutton einfärben

Deine Buttons haben alle dieselbe ID - gaaaanz schlecht

Du könntest dir einfach ein passendes Sliderscript suchen, oder du übergibst beim Funktionsaufruf auch die ID (sofern sie sich unterscheidet) oder einfach "this". Dann musst du in der function alle zurücksetzen und dem aktiven Button den Hintergrund (oder eine in der css definierte class "active") mitgeben.

MelanieCibura · 11.05.2011

AW: Aktiven Sliderbutton einfärben

Oh Gott, mit JavaScript habe ich eigentlich überhaupt nichts am Hut.

Ist mein erstes Script, das ich programmiert habe.

Kannst du das vielleicht etwas genauer erklären? Wäre echt klasse.

Gruß, Melanie

cebito · 11.05.2011

AW: Aktiven Sliderbutton einfärben

Bezugnehmend auf das aktuell geklickte Element

HTML:

<!doctype html>
<html>

<head>
    <title>Titel</title>

    <meta charset="UTF-8" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
<script>
function wechsel(mich){
    mich.style.backgroundColor = "#f00";
}
</script>
</head>

<body>
<div style="width: 150px; height:50px; background: #00f;" onclick="wechsel(this);"></div>
</body>
</html>

in der function müsstest du natürlich noch vor der Hintergrundzuweisung alle wieder auf den Ursprung setzen...

MelanieCibura · 11.05.2011

AW: Aktiven Sliderbutton einfärben

Okay, soweit habe ich das glaube ich verstanden.

Doch ich glaube ich mich etwas falsch ausgedrückt. Ich habe statt einer Hintergrundfarbe immer Grafiken für den Button. Wie heißt dann der Befehl in der function statt dem backgroundColor?

Und wie setze ich vor der Hintergrundzuweisung alle wieder auf den Ursprung?

Danke für deine Hilfe

Gruß, Melanie

cebito · 11.05.2011

AW: Aktiven Sliderbutton einfärben

HTML:

mich.style.backgroundImage

MelanieCibura · 11.05.2011

AW: Aktiven Sliderbutton einfärben

Okay, ich werds morgen dann mal ausprobieren.

Danke für deine Geduld und Hilfe

Gruß, Melanie

sokie · 12.05.2011

AW: Aktiven Sliderbutton einfärben

Ich fürchte da wirst du aber insgesamt nochmal ran müssen (validieren!)
in der konkreten Frage musst dein Markup auch nochmal überarbeiten: die schon angesprochengleichen IDs - geht gar nicht,

HTML:

<a href="Javascript: slider(0);"><div id="button01" class="class_button"></div></a>
<a href="Javascript: slider(-903);"><div id="button01" class="class_button"></div></a>
<a href="Javascript: slider(-1806);"><div id="button01" class="class_button"></div></a>
<a href="Javascript: slider(-2709);"><div id="button01" class="class_button"></div></a>
<a href="Javascript: slider(-3612);"><div id="button01" class="class_button"></div></a>

und die <div> als blockelemente innerhalb eines <a> ist auch nicht valide (die einfache Lösung wäre auf alle <div> zu verzichten und die a Elemente selbst per display:block und float als container zu benutzen.