nicht angemeldet
Farbe eines Links dynamisch ändern
Hallo Leute!
Innerhalb einer Navigation möchte ich die Farbe des gerade aktiven Links dynamisch ändern und greife über die ID des Anchors (innerhalb onClick) auf dessen Objekteigenschaften zu.
Anschließend ändere ich die Farbe dieses Links z.B. mit
obj.style.color = "#ffffff";
Wird nun auf einen anderen Link geclickt, setzte ich die Farbe wieder auf den alten Wert zurück, usw. Das funktioniert eigentlich auch.
Das Problem dabei ist, dass bei einmal angeclickten Links der Hover-Effekt (CSS) für die Farbe nicht mehr funktioniert... Das gilt jedenfalls für den IE6.
Warum ist das so, was läuft da falsch? Please help!
Gruß,
Danny
-
HI !
Versuch mal den hier:
<style type="text/css">
<!--
a:link { text-decoration: none}
a:hover { color: F75E62; text-decoration: none}
a:active { color: F75E62; text-decoration: none}
a:visited { text-decoration: none}
-->
</style>Hoffe geholfen zu haben :)
alfons
-
HI !
Versuch mal den hier:
<style type="text/css">
<!--
a:link { text-decoration: none}
a:hover { color: F75E62; text-decoration: none}
a:active { color: F75E62; text-decoration: none}
a:visited { text-decoration: none}
-->
</style>Hoffe geholfen zu haben :)
alfons
Hi, Alfons,
Tip am Rande:
Falsche Reihenfolge, sö wär´s richtig:
a:link
a:visited
a:hover
a:activeEine falsche Reihenfolge führt dazu, daß einzelne Anweisungen unter bestimmten Umständen nicht mehr ausgeführt werden.
Gruß
Kurt
-
-
Moin
Warum ist das so, was läuft da falsch? Please help!
<schuss_ins_blaue>Ich vermute mal, daß Du mit dieser Funktion die CSS-Angabe ganz einfach überschreibst. Schließlich gelten bei CSS die Angaben, die am "nächsten" am jeweiligen Element stehen.</schuss_ins_blaue>
Für konkretere Antworten müßtest Du dann doch mal das script posten.Thomas J.
-
Hi Thomas,
ja, das denke ich auch.
obj.style.color=new; ändert demnach nicht nur die sichtbare Farbe, sondern evtl. auch das CSS-Atribut a:hover
Bye
-
Moin!
ja, das denke ich auch.
obj.style.color=new; ändert demnach nicht nur die sichtbare Farbe, sondern evtl. auch das CSS-Atribut a:hover
Genau so ist es. :link, :visited, :hover, :active und :focus sind ja alles Farben EINES Links. Der hat die nicht alle gleichzeitig, sondern nacheinander.
Wenn du jetzt mit Javascript dem Link eine neue Farbe gibst: Für welche der fünf Zustände soll die gelten? Da du das nicht mit angeben kannst, gilt die Farbe eben für alle Zustände. :)
Wenn du selektiv nur einen Link in einem Zustand ändern willst, mußt du im CSS rumarbeiten und entweder dem Link eine spezielle Klasse zuweisen, die die gewünschte Farbe definiert, oder die CSS-Regel ändern.
- Sven Rautenberg
-
-
-
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="styles/bottom.css">
<script language="JavaScript" type="text/javascript" src="scripts/ultrasniff.js"></script> <!-- Include complex Browser Sniff -->
<script language="JavaScript" type="text/javascript" src="scripts/dhtml.js"></script> <!-- Include complex DHTML-Functions -->
<script language="JavaScript"><!-- ALL FOLLOWING CODE BY DANNY REHS, (C) -->
/*
// arg e.g.:
homeN = new Array();
homeN[0]=["Home","homeB","homeS"];
homeN[1]=["Willkommen","content/home/welcome.html"];
homeN[2]=["Über IG","content/home/about.html"];
homeN[3]=["Sitemap","content/home/sitemap.html"];
homeN[4]=["Impressum","content/home/impressum.html"];
// actI = actual array[i]
*/activeLinkC = "#ffffe0"; oldLinkC = "#e0e0ff";
oldMarkO = null;function writeNavPath(arg, actI) // IE4+ // may run in NS4+ ? // but not in Opera
{
var basis = arg[0][0];
var nav = '<table cellpadding=0 cellspacing=0 border=0 style="filter:dropshadow(color=#000000, offx=2, offy=2)"><tr>';
nav += '<td><b>' +basis +'</b> >> </td>';
for(var ai=1; ai<arg.length; ai++)
{
var text = arg[ai][0]; var link = arg[ai][1];
nav += '<td><a id='+ai+' href="'+link+'" target="main" onFocus="this.blur()" onClick="markLink(this.id)">'+text+'</a></font></td>';
if(ai < arg.length-1) nav += '<td> ·· </td>';
}
nav += '</tr></table>';navPathO = getLayer("navPathDivI"); // dhml.js
writeToLayer(navPathO, nav); // dhtml.js // this sucks in Opera!
markLink(actI);
}function markLink(id)
{
if(oldMarkO != null) setLinkColor(oldMarkO, oldLinkC);
linkO = getLayer(id); // dhtml.js
setLinkColor(linkO, activeLinkC); oldMarkO = linkO;
}function setLinkColor(linkO, linkC) // auslagern!
{
if(ie4up || ns6up) linkO.style.color = linkC;
}</script>
</head><body marginheight=0 marginwidth=0>
<table height=100%><tr>
<td align=left valign=top nowrap>
<div id="navPathDivI" style="position:absolute"></div></td>
</tr></table><!-- published 5.3.2002, 17:20 :: updated 6.3.2002, 09:50 -->
</body>
</html>/*** bottom.css ***/
/* Body .Default: */
body {
font-family:Verdana,Helvetica,sans-serif; font-size:10px;
color:#e0e0ff; background-color:#343058;
scrollbar-3d-light-color:#140024; scrollbar-arrow-color:#9988aa; scrollbar-darkshadow-color:#140024; scrollbar-face-color:#140024; scrollbar-highlight-color:#9988aa; scrollbar-shadow-color:#9988aa; scrollbar-track-color:#201030;
margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px;
}/* Tabelle .Default: */
td {
font-family:Verdana,Helvetica,sans-serif; font-size:10px;
color:#e0e0ff;
margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px;
}/* Link .Default: */
a { font-family:Tahoma,Helvetica,sans-serif; font-size:11px; }
a:link { color:#e0e0ff; text-decoration:none; font-weight:bold; }
a:visited { color:#e0e0ff; text-decoration:none; font-weight:bold; }
a:hover { color:#ffffe0; text-decoration:none; font-weight:bold; }
a:active { color:#ffffff; text-decoration:underline; font-weight:bold; }
a:focus { color:#8080ff; text-decoration:underline; font-weight:bold; }/* Link .Navigation Pfad: */
a.navPath { font-size:10px; font-family:Tahoma,Helvetica,sans-serif; }
a.navPath:link { font-size:10px; font-weight:bold; color:#e0e0ff; text-decoration:none; }
a.navPath:visited { font-size:10px; font-weight:bold; color:#e0e0ff; text-decoration:none; }
a.navPath:hover { font-size:10px; font-weight:bold; color:#ffffe0; text-decoration:none; }
a.navPath:active { font-size:10px; font-weight:bold; color:#ffffff; text-decoration:underline; }
a.navPath:focus { font-size:10px; font-weight:bold; color:#8080ff; text-decoration:underline; }-
Ich hab's! ;-)
Die Style-Farben des Hover wurden überschrieben. Vor dem Neusetzen merke ich mir jetzt die Eigenschaften. (wen interessiert's ... ?)
function setLinkColor(linkO, linkC)
{
if(ie4up || ns6up)
{
oldLinkC = linkO.style.color; // Sichert die Obj-Farben!
linkO.style.color = linkC;
}
}Hack the planet!
-