Kleines Java-Script gesucht (Links färben nach anklicken...)

Speck

So ein einfaches Java-Script such ich auch schon seit längerem. Es soll den zuletzt angewählten Link mit einer anderen Farbe hinterlegen. Wenn man zum Beispiel eine Hompeage mit Frame, in welchem Links sind (Hauptseite, Forum, Downloads, Impressum ...), hat. Dann wir oftmals der zuletz angewählte, also der dessen Inhalt es gerade anzeigt, mit einer anderen Farbe hinterlegt bzw. anders kenntlich gemacht.

-Würd mich sehr freuen, wenn jemand ein solches kennt.

Speck

hmmm wo könnt ich sowas finden?
Hab schon auf allen möglichen Script-Sammlungs-Seiten gesucht, doch leider immer ohne Erfolg!

DarkSyranus

Ich könnts dir machen, aber ich denk mein Kollege crAzywulf wird wieder schneller sein, also überlass ich ihm den Vortritt.
Wenn ers nit macht, mach ichs, dann benötige ich aber den Quelltext deiner Seite.

gelöschter User

Zitat von DarkSyranus

Ich könnts dir machen, aber ich denk mein Kollege crAzywulf wird wieder schneller sein, also überlass ich ihm den Vortritt.
Wenn ers nit macht, mach ichs, dann benötige ich aber den Quelltext deiner Seite.

1. Ich bin nicht immer online war zu der zeit am saufen
2. crAzywuLf
3. Kenn ich mich in Bereich JavaScript nicht aus

Also nicht direkt so schnell aufgeben
Soweit ich weiss wird das ganze mit CSS gemacht aber davon hab ich auch keine Ahnung -.-
Bin nicht so der Designer Typ dafür hab ich wernerdeluxe
Also hau rein DarkSyranus

Gruß crAzywuLf

DarkSyranus

ok, crAzywuLf , mach ich, worin denn?

cookie

das würde ich vermutlich schon hinbekommen --> site bitte..

DarkSyranus

also jetzt ich, oder du, oder jeder eins?

Speck

Also es ist nicht direkt wie beschrieben sondern kommt in der folgenden Aktien-Übersichts-Seite zum einsatz.
Momentan habe ich daran ein wenig rumprobiert...
Das obere Aktien-Diagramm wird mittels der darüberliegenden Links ausgesucht. Also immer das angewählte Diagramm soll rot hinterlegt sein (1-Monat, 1-Jahr usw.)
-Momentan ist es beim oberen so, dass es rot hinterlegt wird allerdings wenn ich dann das nächste anklicke ist dies auch rot hinterlegt...

Ich denke die geforderte Funktionsweise sollte klar sein.

HTML

<html>
<head>


<meta http-equiv="imagetoolbar" content="no">


<title>Aktien & Fonds</title>


<style type="text/css">
<!--
body,td,th {
font-family: Verdana, Arial;
font-size: 9px;
color: #000000;
}


a.verk { color: #000000; text-decoration: none; background-color: #DDDDDD; }
a.verk:hover { color: #FF0000; text-decoration: none; background-color: #DDDDDD; }
a.verk:focus { color: #FF0000; text-decoration: none; background-color: #DDDDDD; }
a.verk:visited { color: #000000; text-decoration: none; background-color: #FF0000; }
-->
</style>










</head>
<body text="#000000" bgcolor="#F0F0F0" link="#FF0000" alink="#AA0077" vlink="#FF0000">


<table border="0" cellpadding="0" cellspacing="5" width="97%">
<tr>
<td width="80%"></td>
<td><a class="verk" style="cursor:pointer" onClick="daimler.src='http://c.onvista.de/h_kl.html?PERIOD=1&ID_NOTATION=161766';this.style.backgroundColor='#FF0000';this.style.color='#FFFFFF';">1-Monat</a>
    <a class="verk" style="cursor:pointer" onClick="daimler.src='http://c.onvista.de/h_kl.html?PERIOD=2&ID_NOTATION=161766';this.style.backgroundColor='#FF0000';this.style.color='#FFFFFF';">3-Monate</a>
    <a class="verk" style="cursor:pointer" onClick="daimler.src='http://c.onvista.de/h_kl.html?PERIOD=3&ID_NOTATION=161766';this.style.backgroundColor='#FF0000';this.style.color='#FFFFFF';">6-Monate</a>
    <a class="verk" style="cursor:pointer" onClick="daimler.src='http://c.onvista.de/h_kl.html?PERIOD=4&ID_NOTATION=161766';this.style.backgroundColor='#FF0000';this.style.color='#FFFFFF';">1-Jahr</a>
    <a class="verk" style="cursor:pointer" onClick="daimler.src='http://c.onvista.de/h_kl.html?PERIOD=5&ID_NOTATION=161766';this.style.backgroundColor='#FF0000';this.style.color='#FFFFFF';">3-Jahre</a>
    <a class="verk" style="cursor:pointer" onClick="daimler.src='http://c.onvista.de/h_kl.html?PERIOD=6&ID_NOTATION=161766';this.style.backgroundColor='#FF0000';this.style.color='#FFFFFF';">5-Jahre</a>
    <a class="verk" style="cursor:pointer" onClick="daimler.src='http://c.onvista.de/h_kl.html?PERIOD=7&ID_NOTATION=161766';this.style.backgroundColor='#FF0000';this.style.color='#FFFFFF';">10-Jahre</a></td>
</tr>
<tr>
<td><h2>Aktie - B</h2>
<h3>Anteile: ??</h3>


<h2>Kurs: &rarr;?</h2></td>
<td rowspan="3">[img]http://chart4.onvista.de/i_kl.html?PREV_CLOSE=1&ID_NOTATION=161766[/img]</td>
</tr>
<tr>
<td><h4>WKN: 710000</h4></td>
</tr>
<tr>
<td>[url='http://aktien.onvista.de/snapshot.html?ID_OSI=82840&SEARCH_VALUE=710000']Ð Link [ONVISTA][/url]</td>
<td></td>
</tr>
</table>


<hr noshade size="1">






<table cellpadding="0" cellspacing="5" width="97%">
<tr>
<td width="80%"></td>
<td><a class="zelle1" style="cursor:pointer" onClick="total.src='http://c.onvista.de/h_kl.html?PERIOD=1&ID_NOTATION=20302';" onFocus="this.blur()">1-Monat</a>
    <a class="zelle2" style="cursor:pointer" onClick="total.src='http://c.onvista.de/h_kl.html?PERIOD=2&ID_NOTATION=20302';" onFocus="this.blur()">3-Monate</a>
    <a class="zelle3" style="cursor:pointer" onClick="total.src='http://c.onvista.de/h_kl.html?PERIOD=3&ID_NOTATION=20302';" onFocus="this.blur()">6-Monate</a>
    <a class="zelle4" style="cursor:pointer" onClick="total.src='http://c.onvista.de/h_kl.html?PERIOD=4&ID_NOTATION=20302';" onFocus="this.blur()">1-Jahr</a>
    <a class="zelle5" style="cursor:pointer" onClick="total.src='http://c.onvista.de/h_kl.html?PERIOD=5&ID_NOTATION=20302';" onFocus="this.blur()">3-Jahre</a>
    <a class="zelle6" style="cursor:pointer" onClick="total.src='http://c.onvista.de/h_kl.html?PERIOD=6&ID_NOTATION=20302';" onFocus="this.blur()">5-Jahre</a>
    <a class="zelle7" style="cursor:pointer" onClick="total.src='http://c.onvista.de/h_kl.html?PERIOD=7&ID_NOTATION=20302';" onFocus="this.blur()">10-Jahre</a></td>
</tr>
<tr>
<td><h2>Aktie - B</h2>
<h3>Anteile: ??</h3></td>
<td rowspan="3">[img]http://chart4.onvista.de/i_kl.html?PREV_CLOSE=1&ID_NOTATION=20303[/img]</td>
</tr>
<tr>
<td><h4>WKN: 850727</h4></td>
</tr>
<tr>
<td>[url='http://aktien.onvista.de/snapshot.html?ID_OSI=85436&SEARCH_VALUE=850727']Ð Link [ONVISTA][/url]</td>
<td></td>
</tr>
</table>


<hr noshade size="1">


<h6>usw...</h6>


</body>
</html>

Alles anzeigen

Speck

Ist das so nicht Verständlich oder seit ihr nur noch nicht dazu gekommen?

Speck

???

Mir würde es auch reichen, wenn ihr einfach nur den Quellcode von dem Java-Script geben könntet. Ich denke (und haffe) den kann ich schon einfügen...

Was ist denn das, erst bieten sich zwei an und dann ist nichts mehr. Ich will ja jetzt nich unverschämt sein, aber erst hungrig machen und dann nichts zu essen geben...

DarkSyranus

Ja, guckst du hier: https://www.forum-hilfe.de/viewtopic.php?t=18418&highlight=
Bissl weiter unten steht eins.

Speck

Super vielen dank dann erstmal.

Jetzt bräuchte ich allerdings noch eine kleine Hilfe:

Ich möchte, dass bei jedem Aufruf der Seite (also wenn ich sei öffne). Der erste Link bereits rot hinterlegt ist. Hab da ein wenig rumprobiert allerdings hab ich's leider nicht hinbekommen... (Habs mit onload"" versucht)
-Also über jedem Diagramm der Link: "1-Monat"

Und den input-Tag müsste man wohl auch noch schließen, oder?

Allerdings ist das Script so nicht ganz umsetzbar, also, dass man dann immer weiter zählt (link1, link2, ... link23, link24,... linkN)

Kann man das irgendwie mit einzelnen klassen oder was derartigem schöner lösen? (Ich glaub irgendwie mit dem namen "date" kann man da was erreichen...)

Weil sonst würde ja wenn ich im oberen Diagramm einen Link angeklickt hab, und anschließend im unteren einen anklick die obere farb-hinterlegung verschwinden!

HTML

<html>
<head>


<meta http-equiv="imagetoolbar" content="no">


<title>Aktien & Fonds</title>


<style type="text/css">
<!--
body,td,th {
font-family: Verdana, Arial;
font-size: 9px;
color: #000000;
}


a.verk { color: #000000; text-decoration: none; background-color: #DDDDDD; }
a.verk:hover { color: #FF0000; text-decoration: none; background-color: #DDDDDD; }
a.verk:focus { color: #FF0000; text-decoration: none; background-color: #DDDDDD; }
a.verk:visited { color: #000000; text-decoration: none; background-color: #FF0000; }
-->
</style>


<script type="text/javascript">
  function save(sav)
  {
    document.getElementsByName('date')[0].value = sav;
  }
  function CChange(name)
  {
    id = name;
    document.getElementById(id).style.color = "#FFFFFF"; /* farbe des letzten inks */
    document.getElementById(id).style.backgroundColor = "#FF0000"; /* Hintergrundfarbe des letzten inks */
    save(id);
  }
  function load(id)
  {
    vall = document.getElementsByName('date')[0].value;
    document.getElementById(vall).style.color = "#000000"; /* normale link-farbe */
    document.getElementById(vall).style.backgroundColor = "#DDDDDD"; /* normale link-Hintergrundfarbe */
    CChange(id);
  }
</script>






</head>
<body text="#000000" bgcolor="#F0F0F0" link="#FF0000" alink="#AA0077" vlink="#FF0000" onload="load(this.link1)">


<input type="hidden" name="date" value="link1">


<table border="0" cellpadding="0" cellspacing="5" width="97%">
<tr>
<td width="80%"></td>
<td><a style="cursor:pointer" onClick="daimler.src='http://c.onvista.de/h_kl.html?PERIOD=1&ID_NOTATION=161766';javascript:load(this.id)" id="link1">1-Monat</a>
    <a style="cursor:pointer" onClick="daimler.src='http://c.onvista.de/h_kl.html?PERIOD=2&ID_NOTATION=161766';javascript:load(this.id)" id="link2">3-Monate</a>
    <a style="cursor:pointer" onClick="daimler.src='http://c.onvista.de/h_kl.html?PERIOD=3&ID_NOTATION=161766';javascript:load(this.id)" id="link3">6-Monate</a>
    <a style="cursor:pointer" onClick="daimler.src='http://c.onvista.de/h_kl.html?PERIOD=4&ID_NOTATION=161766';javascript:load(this.id)" id="link4">1-Jahr</a>
    <a style="cursor:pointer" onClick="daimler.src='http://c.onvista.de/h_kl.html?PERIOD=5&ID_NOTATION=161766';javascript:load(this.id)" id="link5">3-Jahre</a>
    <a style="cursor:pointer" onClick="daimler.src='http://c.onvista.de/h_kl.html?PERIOD=6&ID_NOTATION=161766';javascript:load(this.id)" id="link6">5-Jahre</a>
    <a style="cursor:pointer" onClick="daimler.src='http://c.onvista.de/h_kl.html?PERIOD=7&ID_NOTATION=161766';javascript:load(this.id)" id="link7">10-Jahre</a></td>
</tr>
<tr>
<td><h2>Aktie - B</h2>
<h3>Anteile: ??</h3>


<h2>Kurs: &rarr;?</h2></td>
<td rowspan="3">[img]http://chart4.onvista.de/i_kl.html?PREV_CLOSE=1&ID_NOTATION=161766[/img]</td>
</tr>
<tr>
<td><h4>WKN: 710000</h4></td>
</tr>
<tr>
<td>[url='http://aktien.onvista.de/snapshot.html?ID_OSI=82840&SEARCH_VALUE=710000']Ð Link [ONVISTA][/url]</td>
<td></td>
</tr>
</table>


<hr noshade size="1">






<table cellpadding="0" cellspacing="5" width="97%">
<tr>
<td width="80%"></td>
<td><a class="zelle1" style="cursor:pointer" onClick="total.src='http://c.onvista.de/h_kl.html?PERIOD=1&ID_NOTATION=20302';" onFocus="this.blur()">1-Monat</a>
    <a class="zelle2" style="cursor:pointer" onClick="total.src='http://c.onvista.de/h_kl.html?PERIOD=2&ID_NOTATION=20302';" onFocus="this.blur()">3-Monate</a>
    <a class="zelle3" style="cursor:pointer" onClick="total.src='http://c.onvista.de/h_kl.html?PERIOD=3&ID_NOTATION=20302';" onFocus="this.blur()">6-Monate</a>
    <a class="zelle4" style="cursor:pointer" onClick="total.src='http://c.onvista.de/h_kl.html?PERIOD=4&ID_NOTATION=20302';" onFocus="this.blur()">1-Jahr</a>
    <a class="zelle5" style="cursor:pointer" onClick="total.src='http://c.onvista.de/h_kl.html?PERIOD=5&ID_NOTATION=20302';" onFocus="this.blur()">3-Jahre</a>
    <a class="zelle6" style="cursor:pointer" onClick="total.src='http://c.onvista.de/h_kl.html?PERIOD=6&ID_NOTATION=20302';" onFocus="this.blur()">5-Jahre</a>
    <a class="zelle7" style="cursor:pointer" onClick="total.src='http://c.onvista.de/h_kl.html?PERIOD=7&ID_NOTATION=20302';" onFocus="this.blur()">10-Jahre</a></td>
</tr>
<tr>
<td><h2>Aktie - B</h2>
<h3>Anteile: ??</h3></td>
<td rowspan="3">[img]http://chart4.onvista.de/i_kl.html?PREV_CLOSE=1&ID_NOTATION=20303[/img]</td>
</tr>
<tr>
<td><h4>WKN: 850727</h4></td>
</tr>
<tr>
<td>[url='http://aktien.onvista.de/snapshot.html?ID_OSI=85436&SEARCH_VALUE=850727']Ð Link [ONVISTA][/url]</td>
<td></td>
</tr>
</table>


<hr noshade size="1">


<h6>usw...</h6>


</body>
</html>

Alles anzeigen

DarkSyranus

1) Nein, das input muss nicht geschlossen werden, da das kein endtag hat
2)

Code

function red()
{
  document.getElementById('link1').style.color = "#FF0000"; 
}

Code

<body 0nload="javascript:red()">

3) ja man könnte das so umschreiben, das man mehrere
"linkklassen" hätte, aber ich weis nicht was das bringen soll.

4) Poste bitte im andren thread weiter

Speck

Das soll das bringen, dass ich wenn ich einen Link des oberen Diagramm angeklickt hab. Also im oberen Diagramm ist ein Link rot hinterlegt.

Wenn ich dann im unteren Diagramm auch einen anklick, wird die roter Hinterlegung des oberen Diagramm aufgehoben, wie kann ich das umgehen.

Hab's mal wie folgt versucht, funktioniert aber nicht!

Sorry wenn ich nochmal hier gepostet hab, aber ich denke das es einfach ist dieses Problem noch hier abzuhandeln. Denn im anderen Thread müsste ich die Problematik erst erklären und somit würde der Thread deutlich an Übersichtilichkeit verlieren...

HTML

<html>
<head>
<title>Unbenannt</title>
<script type="text/javascript">
  function save(sav)
  {
    document.getElementsByName('einz')[0].value = sav;
    document.getElementsByName('zwei')[0].value = sav;
  }
  function CChange(name)
  {
    id = name;
    document.getElementById(id).style.color = "#FF0000"; /* farbe des letzten inks */
    save(id);
  }
  function load(id)
  {
    vall = document.getElementsByName('einz')[0].value;
    vall = document.getElementsByName('zwei')[0].value;
    document.getElementById(vall).style.color = "#0000FF"; /* normale linkfarbe */
    CChange(id);
  }
</script>
</head>
<body>






<input type="hidden" name="einz" value="link1">
[url='#']bla[/url]






[url='#']bli[/url]






[url='#']blub[/url]


























<input type="hidden" name="zwei" value="link4">
[url='#']bla[/url]






[url='#']bli[/url]






[url='#']blub[/url]






</body>
</html>

Alles anzeigen

DarkSyranus

HTML

<html>
<head>
<title>Unbenannt</title>
<script type="text/javascript">
  function save(sav, class)
  {
    switch(class){
      case "lc1":
        document.getElementsByName('einz')[0].value = sav;
      break;
      case "lc2":
        document.getElementsByName('zwei')[0].value = sav;
      break;
      default:
      break;
    }
  }
  function CChange(id, class)
  {
    switch(class){
      case "lc1":
        document.getElementById(id).style.color = "#FF0000"; /* farbe des letzten inks */
      break;
      case "lc2":
        document.getElementById(id).style.color = "#FF0000"; /* farbe des letzten inks */
      break;
      default:
      break;
    }
    save(id, class);
  }
  function load(id, class)
  {
    switch(class){
      case "lc1":
        vall = document.getElementsByName('einz')[0].value;
      break;
      case "lc2":
        vall = document.getElementsByName('zwei')[0].value;
      break;
      default:
      break;
    }
    document.getElementById(vall).style.color = "#0000FF"; /* normale linkfarbe */
    CChange(id, class);
  }
</script>
</head>
<body>






<input type="hidden" name="einz" value="link1">
[url='#']bla[/url]






[url='#']bli[/url]






[url='#']blub[/url]


























<input type="hidden" name="zwei" value="link4">
[url='#']bla[/url]






[url='#']bli[/url]






[url='#']blub[/url]






</body>
</html>

Alles anzeigen

Bei mir geht das so.

Speck

Puh, danke aber das wird schon sehr sehr kompliziert. Denn die Seite die ich hier gepostet hab ist ja nur ein Ausschnitt des ganzen. Alles zusammen sind ca. 15 Diagramme. Ich denke da wird das Script mit dieser Lösung doch schon sehr unübersichtlich und umfangreich.

Gibts da nicht vielleicht ne einfachere Lösung?

irgendwie mit einz.link1 oder kann man das hierbei nicht anwenden?

BendOr

du kannst mit php den referrer (letzte seite) auslesen und damit denn a bissal rumprobieren aber sonst fällt mir auch nichts ein

Ich kann mir echt nicht vorstellen, dass sich dies nicht einfacher lösen lässt. Denn die oben genannte Lösung funktioniert z.B. im Phase5 nicht, da wird irgend ein Fehler angezeigt. Und diese Lösung sieht auch irgendwie nicht so aus, als wäre es die einfachste.
Ich brauch ja jetzt echt nicht du aller beste und kürzeste Lösung. Aber es sollte halt schon eine vernünftige sein. Also mit einigermaßenem Programmierstil usw.

Ich werde dann auch noch ein wenig rumprobieren...

Tags