[GastForen Programmierung/Entwicklung JavaScript Farbwechsel bei Hyperlinks

  • Suche
  • Hilfe
  • Lesezeichen
  • Benutzerliste
Themen
Beiträge
Moderatoren
Letzter Beitrag

Farbwechsel bei Hyperlinks

ruebe
Beiträge gesamt: 1113

3. Mai 2006, 20:40
Beitrag # 1 von 5
Bewertung:
(2786 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo,

hoffentlich ist das hier die richtige Kategorie für mein Problem. Ich möchte mithilfe von JavaScript einen Newsticker realisieren. Hierfür habe ich das folgende Skript genommen:
[code]
var list; // global list variable cache
var tickerObj; // global tickerObj cache
var hex = 210;

function fadeText(divId) {
if(tickerObj)
{
if(hex>0) {
hex-=5; // increase color darkness
tickerObj.style.color="rgb("+hex+","+hex+","+hex+")";
setTimeout("fadeText('" + divId + "')", fadeSpeed);
} else
hex=210; //reset hex value
}
}

function initialiseList(divId) {
tickerObj = document.getElementById(divId);
if(!tickerObj)
reportError("div element mit id fehlt \"" + divId + "\"");
list = tickerObj.childNodes;
if(list.length <= 0)
reportError("beim div element \"" + divId + "\" fehlen die absaetze");
for (var i=0; i<list.length; i++) {
var node = list[i];
if (node.nodeType == 3 && !/\S/.test(node.nodeValue))
tickerObj.removeChild(node);
}
run(divId, 0);
}

function run(divId, count) {
fadeText(divId);
list[count].style.display = "block";
if(count > 0)
list[count-1].style.display = "none";
else
list[list.length-1].style.display = "none";
count++;
if(count == list.length)
count = 0;
window.setTimeout("run('" + divId + "', " + count+ ")", interval*1000);
}
function reportError(error) {
alert("das script konnte nicht gestartet werden, fehler:\n\n" + error);
return false;
}

var interval = 7; // interval in seconds
var fadeSpeed = 40; // fade speed, the lower the speed the faster the fade. 40 is normal.
[/code]
[EDIT]^^^Irgendwie wird das JS hier nicht richtig dargestellt. Es liegt jedenfalls hier:
[url]http://rs-design.at/javascripts/news_mobile.js[/url]

Eingebaut schaut es dann wie folgt aus:
[url]http://rs-design.at/test.html[/url]

Soweit funktioniert das auch wie ich es gerne möchte, nur sobald ein Link eingebaut wird, funktioniert der Fader nimmer ;( Links haben halt immer irgend eine Farbe und soweit ich das JS verstehe (sorry, bin die absolute 0 was JS angeht), wird die Farbe immer etwas verdunkelt und damit der Anschein erweckt, dass der Text so sanft eingeblendet wird.

Sollte dies hier das falsche Forum sein, dann würde ich den Moderator bitten diesen Beitrag zu verschieben. Ist ja irgendwie auch ein CSS Problem IMHO?

(Dieser Beitrag wurde von oesi50 am 3. Mai 2006, 21:29 geändert)
X

Farbwechsel bei Hyperlinks

SabineP
Beiträge gesamt: 7586

3. Mai 2006, 21:20
Beitrag # 2 von 5
Beitrag ID: #226969
Bewertung:
(2776 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Rene,

ich weiß leider nicht, wie man das reparieren kann.

schau mal hier rein:
http://www.hilfdirselbst.ch/foren/News-Anzeige_wie_auf_apple_de_P219814.html#219814
Da gibts zwei Ticker mit Übergangseffekt.

>> Irgendwie wird das JS hier nicht richtig dargestellt.

Format des Beitrages "nur Text" wählen.

Beim Posten mit "Sonderzeichen" wird aus [i] kursiver Text.

Gruß Sabine


als Antwort auf: [#226966]

Farbwechsel bei Hyperlinks

ruebe
Beiträge gesamt: 1113

3. Mai 2006, 22:05
Beitrag # 3 von 5
Beitrag ID: #226977
Bewertung:
(2768 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Sabine,

vielen Dank für die schnelle Antwort!

Grundsätzlich funktioniert das JS ja, das Problem ist nur da wenn ich einen Link statt dem Text einsetze. Irgendwie scheint es aber keine Möglichkeit zu geben Textlinks keine Farbe zuzuweisen, oder doch?

Im JS steht, dass die Anfangsfarbe ein helles Grau sein soll (210) und dann jeweils um 5 erhöht wird. Nachdem der Link aber bereits eine Farbe hat geht das aber leider nicht. Komisch ist auch, dass man den Text eine Farbe zuweisen kann und es geht trotzdem. Mich macht sowas ganz kirre ;)

Ich werde, wenn sonst niemand einen Tipp für mich hat, ein anderes JS probieren.

Danke jedenfalls fürs anschauen.


als Antwort auf: [#226969]

Farbwechsel bei Hyperlinks

Markus Walker
Beiträge gesamt: 494

10. Mai 2006, 08:03
Beitrag # 4 von 5
Beitrag ID: #228074
Bewertung:
(2728 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo ruebe,

Ich habs nicht bis zum bitteren Ende analysiert, ich tippe aber ein Problem der Spezifität zwischen den Deklarationen des Browser-Style-Sheet und deinem Style-Sheet. Deswegen müsste die Farbe der Links über spezifischere Definitionen gesteuert werden.

Beispiel anhand von statischen Definitionen:
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>CSS specifity</title>
<style><!--
#link4 { color: orange }
.fancylinks:link { text-decoration: none; background-color: purple }
.fancylinks:visited { text-decoration: none; background-color: teal }
.fancylinks:active { text-decoration: none; background-color: yellow }
.fancylinks:hover { background-color: silver }
--></style>
</head>

<body bgcolor="#ffffff"><div style="color : #0F0">
<a href=#>link 1 in Darstellung des Browsers</a><br>
<a href=# style="color : #F00">link 2 übernimmt die Farbe vom Element-Style</a><br>
<a href=# style="display : block">link 3, wie link 1 in Darstellung des Browsers</a><br>
<p style="display : block">text 1 übernimmt die Darstellung vom div Element</p>
<p>text 2 übernimmt auch die Darstellung vom div Element</p>
<a href=# id="link4">link 4 übernimmt die Darstellung gemäss ID</a><br>
<a href=# class="fancylinks">fancy link übernimmt die Darstellung der class</a><br>
</div>
</body>
</html>


Hier wäre die Theorie dazu:
http://www.w3.org/TR/CSS21/cascade.html


HTH


als Antwort auf: [#226977]
(Dieser Beitrag wurde von Markus Walker am 12. Mai 2006, 07:25 geändert)

Farbwechsel bei Hyperlinks

ruebe
Beiträge gesamt: 1113

11. Mai 2006, 23:09
Beitrag # 5 von 5
Beitrag ID: #228660
Bewertung:
(2715 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Markus,

sorry dass ich mich erst jetzt melde, habe aber den Beitrag übersehen. Vielen Dank für die tolle Antwort!!! Ich werde das morgen gleich ausprobieren.


als Antwort auf: [#228074]
X