Link-Farbe ändern beim anklicken

[Chriss]

Hi zusammen,

ich habe eine Webseite, bei der ich 3 Bilder mittels eines Scripts wechseln kann wenn ich den entsprechenden Link anklicke.
Das ganze sieht so aus:

<img src="bild1.jpg" id="test" alt="Startbild">
<a href="#" class="current" onclick="document.getElementById('test').src='bild1.jpg'">1</a>
<a href="#" onclick="document.getElementById('test').src='bild2.jpg'">2</a>
<a href="#" onclick="document.getElementById('test').src='bild3.jpg'">3</a>

Es funktioniert auch prima, aber ich möchte gern, dass der jeweils aktuelle Link (Zahl) farbig wird. Da es aber immer die selbe Seite ist, hab ich das mit "class="current" nicht hingekriegt. Kann ich in dem vorhandenen Script noch was ergänzen, damit das klappt? Danke schon mal!

FG, Chriss

[Manuel B.]

Ich grüsse den Cosmos,

Kann ich in dem vorhandenen Script noch was ergänzen, damit das klappt?

Du weisst beim onclick einfach noch ein style.color = {neue Farbe} zu.
Wenn du beim Klick auf ne andere Ziffer die Farbe wieder "zurücksetzen" willst, weisst du beim Klick den anderen links eben eine andere Farbe zu.

Möge das "Self" mit euch sein

[Chriss]

Grüße zurück vom Universum,

Danke erstmal. Wenn ich dich richtig verstehe sollte das ganze dann so aussehen (s.u.)? Funktioniert aber nicht, die Zahlen lassen sich nicht mehr anklicken. Oder hab ich was falsch interpretiert, hab leider nicht so viel Ahnung von js.

<img src="bild1.jpg" id="test" alt="Startbild">
<a href="#" class="current" onclick="document.getElementById('test').src='bild1.jpg'.style.color = {#FF8040}">1</a>
<a href="#" onclick="document.getElementById('test').src='bild2.jpg'.style.color = {#FF8040}">2</a>
<a href="#" onclick="document.getElementById('test').src='bild3.jpg'.style.color = {#FF8040}">3</a>

Und wie war das mit dem zurücksetzen? Wäre klasse, wenn du mir das vielleicht gleich an meinem Beispiel erläuterst;) Danke!

FG, Chriss

[JürgenB]

Hallo Chriss,

<a href="#" class="current" onclick="document.getElementById('test').src='bild1.jpg'.style.color = {#FF8040}">1</a>

das sieht nach Phantasie-Code aus. Schau dir mal http://de.selfhtml.org/javascript/objekte/style.htm an.

Noch zwei Anmerkungen:

• Wenn du per Event mehr als einen Befehl ausführen willst, kannst du die Befehle entweder durch ";" trennen, oder du lagerst sie in eine Funktion aus.

• Wenn du eine Schaltfläche benötigst, die nur einen Event auslösen soll, z.B. "onclick", ist ein Link (<a ...>) nicht unbedingt die beste Wahl. Ich nehme hier auch ganz gerne einen "<button type='button' ...". Aussehen wird dann per CSS geregelt.

Gruß, Jürgen

[qay]

meine Empfehlung:

eine Funktion im head-Bereich deiner Seite (oder externe JavaScript-Datei)

function bildwechsel(nr) {  
 var wo=document.getElementById('test');  
 if (wo) wo.src='bild'+nr+'jpg;  
 for (var i=1; i<4; i++) {  
  wo=document.getElementById('link'+i);  
  if (wo) wo.className=(i==nr)?"current":"nichtcurrent";  
 }  
 return false;  
}

<img src="bild1.jpg" id="test" alt="Startbild">

die Links sehen dann so aus:

<a href="#" id="link1" class="current" onclick="bildwechsel(1)">1</a>
<a href="#" id="link2" class="nichtcurrent" onclick="bildwechsel(2)">2</a>
<a href="#" id="link3" class="nichtcurrent" onclick="bildwechsel(3)>3</a>

In der Funktion wird erst das Bild gewechselt und dann allen 3 Links die Klasse nichtcurrent zugewiesen, außer dem aktuellem (die funktion vergleicht dazu die Nummern), der bekommt current.
Was die Klassen beinhalten legst du im CSS fest.

Evtl böte es sich an, statt der <a ...>Nr</a> besser ein <span ...>nr</span> oder ein anderes Element zu nutzen, denn echte Links sind das gar nicht und mit span funktionierts genau so.

[Chriss]

Hi, danke erstmal.

ich habe jetzt deinen Code einfach so in eine externe JavaScript-Datei geschrieben, und im head-Bereich auf die Datei verwiesen: <script type="text/javascript" src="../js/bildwechsel.js"></script>

Im body-Bereich siehts jetzt so aus:
<img src="bild1.jpg" id="test" alt="Startbild">

<a href="#" id="link1" class="current" onclick="bildwechsel(1)">1</a>
<a href="#" id="link2" class="nichtcurrent" onclick="bildwechsel(2)">2</a>
<a href="#" id="link3" class="nichtcurrent" onclick="bildwechsel(3)>3</a>

Die beiden Klassen 'current' und 'nichtcurrent' habe ich in der css definiert. Hoffe soweit stimmt das, aber WO und WIE definiere ich die Links (id's) für die einzelnen Bilder? Wie gesagt, kenn mich leider noch nicht so dolle aus.

[Manuel B.]

Ich grüsse den Cosmos,

<a href="#" class="current" onclick="document.getElementById('test').src='bild1.jpg'.style.color = {#FF8040}">1</a>

Ich dachte, du willst die Farbe des Textes ändern, wieso veränderst du dann den Style des Bildes?

Möge das "Self" mit euch sein

[Chriss]

hi zusammen»» Ich grüsse den Cosmos,

<a href="#" class="current" onclick="document.getElementById('test').src='bild1.jpg'.style.color = {#FF8040}">1</a>

Ich dachte, du willst die Farbe des Textes ändern, wieso veränderst du dann den Style des Bildes?

Ja, das wollte ich auch! Kannst du mir das an meinem Beispiel zeigen, wie das richtig aussehen muß?! Danke.

[Jonathan]

Hallo Chriss,

Ja, das wollte ich auch! Kannst du mir das an meinem Beispiel zeigen, wie das richtig aussehen muß?! Danke.

Ungetestet:

<a href="#" class="current" onclick="document.getElementById('test').src='bild1.jpg';this.style.color='#FF8040';">1</a>

Da man aber auch die farbe des vorherigen Links zurücksetzen muss, wenn man nicht will, dass macher alle Links markiert sind, bietet sich der Einsatz einer separaten Funktion an. Sonst muss man viel zu viel Code is onclick reinquetschen und auch noch einiges doppelt schreiben.

Jonathan

[Chriss]

Hallo Jonathan,

Danke, das klappt ganz gut, aber wie du schon gesagt hast, hinterher sind alle Zahlen farbig. Ich müßte dann die anderen Zahlen zurücksetzen. Ich weiß ja nicht, wie viel Code das dann wird.. soviele Bilder hab ich ja nicht. Wie könnte ich das machen?

"qay" hat mir ja schon ein Beispiel für eine Funktion gegeben. Klappt aber noch nicht so richtig. Irgendwie fehlen mir noch die Verweise auf die Bilder!

[Jonathan]

Hallo Chriss,

"qay" hat mir ja schon ein Beispiel für eine Funktion gegeben. Klappt aber noch nicht so richtig. Irgendwie fehlen mir noch die Verweise auf die Bilder!

qays Funktion ist ziemlich umständlich und da sind auch noch ein paar Fehler drin. Ich würds einfach so machen:

HTML:

<div>  
<a href="bild1.jpg" id="link1" class="current" onclick="return bildwechsel(this);">1</a>  
<a href="bild2.jpg" id="link2" onclick="return bildwechsel(this);">2</a>  
<a href="bild3.jpg" id="link3" onclick="return bildwechsel(this);">3</a>  
</div>  
  
<img id="test" src="bild1.jpg">

Javascript:

function bildwechsel(link)  
{  
  var bild=document.getElementById('test');  
  bild.src = link.href; //bild zuweisen  
  var allelinks = link.parentNode.childNodes;  
  for (var i=0;i<allelinks.length;i++)  
    allelinks[i].className=''; //alle Klassen zurücksetzen  
  link.className='current'; //geklicktem Link Klasse zuweisen  
  return false; //false zurückgeben, damit Linkziel nicht gefolgt wird.  
}

Wichtig ist hierbei nur, dass die Links alle in einem Element sind (in dem Fall <div>) und dass dort keine anderen Elemente drin sind. Ansonsten enthält "allelinks" nämlich auch die anderen Elemente und es werden unter Umständen auch erwünschte class-Attribute zurückgesetzt.

Man kann das ganze noch optimieren, aber ich denke, so ist es noch halbwegs verständlich.

Jonathan

[Chriss]

He danke dir, das klappt super!
Hab jetzt nur noch ein kleines Problem, wo ich nicht weiß, ob es vielleicht am Script liegt, weil du sagst, die class-Atribute würden vielleicht zurückgesetzt.
Ich geb dir mal den Link zu der Seite. Vielleicht kannst du ja mal gucken.. Der Text unter dem Bild müßte eigentlich DANEBEN stehen, so wie auf den anderen Seiten. Den hat es erst nach unten gerückt, als ich das Script eingefügt hab..

http://home.arcor.de/emailrsct/projekte/bergi.html

[Jonathan]

Hallo Chriss,

Ich geb dir mal den Link zu der Seite. Vielleicht kannst du ja mal gucken.. Der Text unter dem Bild müßte eigentlich DANEBEN stehen, so wie auf den anderen Seiten. Den hat es erst nach unten gerückt, als ich das Script eingefügt hab..

Du solltest das <div id="words"> wahrscheinlich vor dem sider-div zumachen.

Jonathan

[Chriss]

Ich bins doch nochmal. Bissl zu früh gefreut. Beim Internetexplorer öffnet sich beim klicken NUR das nächste Bild, die restliche Seite ist verschwunden.. Was macht denn da der IE wieder -kriegt man das auch noch irgendwie hin?

[Jonathan]

Hallo Chriss,

Ich bins doch nochmal. Bissl zu früh gefreut. Beim Internetexplorer öffnet sich beim klicken NUR das nächste Bild, die restliche Seite ist verschwunden.. Was macht denn da der IE wieder -kriegt man das auch noch irgendwie hin?

Keine Ahnung, was der IE da macht. Anscheinend erfindet er irgendwelche Kindelemente und weigert sich bei denen die Klasse zu setzen. So geht es bei mir mit IE6:

  
function bildwechsel(link)  
{  
  var bild=document.getElementById('test');  
  bild.src = link.href;  
  var allelinks = link.parentNode.childNodes;  
  for (var i=0;i<allelinks.length;i++)  
  {  
    if (allelinks[i].className)  
      allelinks[i].className='';  
  }  
  link.className='current';  
  return false;  
}

Jonathan

[Chriss]

Klappt wunderbar! Danke nochmal für deine umfassende Hilfe! Hoffe jetzt sind alle Probleme gelöst.. ansonsten meld ich mich nochmal ;)
Chriss

[Chriss]

He Jonathan.. hat sich schon erledigt, hatte aus Versehen ein </div> gelöscht :)
Also wie gesagt, klappt alles prima, ich danke dir!
Schön Feiertag noch,

FG, Chriss

[knopsi]

Es funzt doch viel einfacher mit CSS oder MUSS es JS sein?

[Siechfred]

Es funzt doch viel einfacher mit CSS oder MUSS es JS sein?

Bitte lies die Frage genau: Es geht darum, beim Klick auf einen Link eine Grafik auszutauschen, die Bestandteil eines anderen HTML-Elementes ist. Das geht mit den derzeitigen Mitteln von CSS nicht, oder?

Siechfred