CSS - hover Effect bei Text Links

[wave]

Hallo!
Ich möchte auf meiner website die Textlinks mit einem hover Effect definieren, so wie es zum Beispiel auf folgender Seite der Fall ist: http://www.schwarzes-muenchen.de
mit underline usw ist das kein Problem..
aber wie definier ich in meiner Css Datei den Effect, das die Schrift diesen langsamen Übergang zu einer anderen Farbe bekommt, wenn man mit der Maus auf dem Link bleibt??
wer kann mir da bitte helfen?
vielen Dank!

[Jupp]

Also bei mir verändert sich da nix an der Farbe (FF), aber sowas ist eine Sache für JS, das geht mit purem CSS nicht.

[321]

<script language="Javascript" src="themes/subBlack/style/fade.js"></script>

resp. http://www.schwarzes-muenchen.de/the.../style/fade.js
Was aber nur der IE ausführt.

[wave]

hm.. wenn ich jetzt noch wüßte, in welchen Ordner und welche Datei ich das einfügen müßte..??

[MichaelM]

Hallo, die Datei sieht folgendermaßen aus:

/************* 
**** <config> 
**/ 
startColor = "#FFFFFF"; // MouseOut link color 
endColor = "#767676"; // MouseOver link color 

stepIn = 20; // delay when fading in 
stepOut = 20; // delay when fading out 

/* 
** set to true or false; true will 
** cause all links to fade automatically 
***/ 
autoFade = true; 
/* 
** set to true or false; true will cause all CSS 
** classes with "fade" in them to fade onmouseover 
***/ 
sloppyClass = true; 
/** 
**** </config> 
**************/ 
/************* 
**** <install> 
** 
** 
**** </install> 
**************/ 

hexa = new makearray(16); 
for(var i = 0; i < 10; i++) 
hexa[i] = i; 
hexa[10]="a"; hexa[11]="b"; hexa[12]="c"; 
hexa[13]="d"; hexa[14]="e"; hexa[15]="f"; 

document.onmouseover = domouseover; 
document.onmouseout = domouseout; 

startColor = dehexize(startColor.toLowerCase()); 
endColor = dehexize(endColor.toLowerCase()); 

var fadeId = new Array(); 

function dehexize(Color){ 
var colorArr = new makearray(3); 
for (i=1; i<7; i++){ 
for (j=0; j<16; j++){ 
if (Color.charAt(i) == hexa[j]){ 
if (i%2 !=0) 
colorArr[Math.floor((i-1)/2)]=eval(j)*16; 
else 
colorArr[Math.floor((i-1)/2)]+=eval(j); 
} 
} 
} 
return colorArr; 
} 

function domouseover() { 
if(document.all){ 
var srcElement = event.srcElement; 
if ((srcElement.tagName == "A" && autoFade) || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1)) 
fade(startColor,endColor,srcElement.uniqueID,stepIn); 
} 
} 

function domouseout() { 
if (document.all){ 
var srcElement = event.srcElement; 
if ((srcElement.tagName == "A" && autoFade) || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1)) 
fade(endColor,startColor,srcElement.uniqueID,stepOut); 
} 
} 

function makearray(n) { 
this.length = n; 
for(var i = 1; i <= n; i++) 
this[i] = 0; 
return this; 
} 

function hex(i) { 
if (i < 0) 
return "00"; 
else if (i > 255) 
return "ff"; 
else 
return "" + hexa[Math.floor(i/16)] + hexa[i%16];} 

function setColor(r, g, b, element) { 
var hr = hex(r); var hg = hex(g); var hb = hex(b); 
element.style.color = "#"+hr+hg+hb; 
} 

function fade(s,e, element,step){ 
var sr = s[0]; var sg = s[1]; var sb = s[2]; 
var er = e[0]; var eg = e[1]; var eb = e[2]; 

if (fadeId[0] != null && fade[0] != element){ 
setColor(sr,sg,sb,eval(fadeId[0])); 
var i = 1; 
while(i < fadeId.length){ 
clearTimeout(fadeId[i]); 
i++; 
} 
} 

for(var i = 0; i <= step; i++) { 
fadeId[i+1] = setTimeout("setColor(Math.floor(" +sr+ " *(( " +step+ " - " +i+ " )/ " +step+ " ) + " +er+ " * (" +i+ "/" + 
step+ ")),Math.floor(" +sg+ " * (( " +step+ " - " +i+ " )/ " +step+ " ) + " +eg+ " * (" +i+ "/" +step+ 
")),Math.floor(" +sb+ " * ((" +step+ "-" +i+ ")/" +step+ ") + " +eb+ " * (" +i+ "/" +step+ ")),"+element+");",i*step); 
} 
fadeId[0] = element; 
}

Wenn Du diesen Code als fade.js abgespeichert hast, bindest Du die Datei folgendermaßen in den HTML-Code ein:

<script language="Javascript" src="fade.js"></script>

achte dabei aber auf deine Verzeichnisstrukturangabe.

[wave]

hm danke!
aber die ganzen dateien sind in php geschrieben, und wenn ich <script language="Javascript" src="fade.js"></script> einfüge, dann verändert sich irgendwie alles!
was nun?

[paby]

also der beispiellink wird bei mir nicht geladen - scheinbar der server wech...
vielleicht meinst du etwas in der art: schau mal hier
http://www.paby.de/nof-stammtisch/au...tml/fader.html

ist ohne js-datei - mit tabelle - sw-bild im hintergrund der zelle - faderbild als objekt - script und erklärung liegt bei...

ich seh grad - der ff macht da nicht mit - grrr..

nice day - paby

[wave]

vielen dank!
aber ich mein das schon auf text links bezogen!
nur wie gesagt, ich hab php scripte und weiß leider nicht genau wo ich das dann einfügen kann!?????
HIIIILFEEEEE!

[Rinaldo]

Wenn Du uns mal Deine Seite zeigen könntest, dann könnte Dir vielleicht jemand sagen, wo Du den Code einfügen musst .

[wave]

ok.. stimmt.. das wär natürlich ne gute idee!
also hier mal die seite: http://www.wave-of-darkness.de/PORTAL/html/index.php

[321]

jo, aber da sieht man nur HTML-Code - der PHP-Code wäre aufschlussreicher!

Dort wo Du in PHP den <head> erzeugst, machst auch das
<script language="Javascript" src="fade.js"></script> vor </head> rein.

[wave]

ich seh schon, ich komm irgendwie nicht weiter!
wahrscheinlich bin ich zu blöd dazu..
ich häng mal den gesamten ordner von dieser seite mit, vielleicht kann mir dann jemand sagen, in welcher datei ich <script language="Javascript" src="fade.js"></script> einfügen muß, damit es funzt! (die imagesordner, blöcke und languageordner, sowie unwichtige dateien darin lass ich weg, sonst wird die datei zu groß)
hoffe es geht irgendwie..
verzweifel schon langsam!
danke!

[wave]

kann mir da wirklich keiner weiter helfen?

also ich geb euch mal hier den code von der header datei, vielleicht kann mir dann jemand genaueres sagen:

<?php
/**
* pragmaMx Content Management System
* Copyright (c) 2005 pragmaMx Dev Team - http://pragmaMx.org
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation; either version 2 of the License, or
* (at your option) any later version.
*
* $Source: /home/cvs/pragmamx/stable/header.php,v $
* $Revision: 1.10 $
* $Author: tora60 $
* $Date: 2005/12/06 08:09:31 $
*/

if (!defined("mxMainFileLoaded")) die ("You can't access this file directly...");

// / definiert, dass diese Datei bereits includet wurde
// / nicht verändern!
$GLOBALS["header"] = 1;
// nur für nuke-Module noch drin!
global $PHP_SELF, $pagetitle;
// / rechte Blöcke ausblenden oder nicht
if (!empty($GLOBALS['vkpBlocksRight'])) {
if ($GLOBALS['vkpBlocksRight'] == 1) {
$GLOBALS["index"] = 1;
} else if ($GLOBALS['vkpBlocksRight'] == 2) {
$GLOBALS["index"] = 0;
}
}

if (!empty($GLOBALS['vkpTracking'])) {
if (@file_exists("includes/trackhack.php")) {
include_once("includes/trackhack.php");
}
}
# ###############################################################
// / Referer aktualisieren
mxReferer();
// / Statistik aktualisieren
mxCounter();
// / Onlineliste aktualisieren
online();
// Syntax-Kompatibilitaet mit fehlerhaften nuke-Standard-themes herstellen:
if (!defined("left")) define("left", "left");
if (!defined("right")) define("right", "right");
if (!defined("center")) define("center", "center");
if (!defined("down")) define("down", "down");
# ###############################################################
# function head() {
define('MX_THEME', mxGetTheme());
define('MX_THEME_DIR', "themes/" . MX_THEME);
// das theme includen und die dort deklarierten Variablen in den globalen Scope importieren
$themevars = includetheme();
foreach ($themevars as $key => $value) {
global $$key;
$$key = $value;
}
// falls kein Seitentitel angegeben wurde, diesen aus dem Modulnamen generieren
if (empty($pagetitle) && defined('MX_MODULE')) {
$result = sql_query("SELECT custom_title FROM " . $GLOBALS['prefix'] . "_modules WHERE title='" . MX_MODULE . "' LIMIT 1");
list($pagetitle) = sql_fetch_row($result);
unset($result);
}
// wenn kein Seitentitel, oder die Startseite, nur den Seitenname als Seitentitel anzeigen.
$pagetitle = (empty($pagetitle) || !empty($GLOBALS['home'])) ? $GLOBALS['sitename'] : $GLOBALS['sitename'] . " - " . $pagetitle;
// sicherstellen, dass der Seitentitel keine Tags enthält und Sonderzeichen nicht zerstückelt werden
$pagetitle = htmlentities(mxHtmlEntityDecode(strip_tags($pagetitle)), ENT_QUOTES);
// alter Mist, nur noch zur Kompatibilität mit alten vkp-Themes vorhanden
$VKPTheme = (empty($VKPTheme)) ? false : true;
// Die HTML-Ausgabe beginnen
# echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">';
# echo '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> "http://www.w3.org/TR/html4/loose.dtd"';
echo '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">';
echo '
<html>
<head>
';
// die Metatags
include('includes/meta.php');
// der Seitentitel
echo '
<title>' . $pagetitle . '</title>
';
// versch. Javascripte
if (@file_exists('includes/javascript.php')) {
include("includes/javascript.php");
}
if (@file_exists('favicon.ico')) {
echo "<link rel=\"shortcut icon\" href=\"" . MX_BASE_URL . "favicon.ico\" type=\"image/x-icon\">\n";
} else if (@file_exists(MX_THEME_DIR . "/images/favicon.ico")) {
echo "<link rel=\"shortcut icon\" href=\"" . MX_BASE_URL . MX_THEME_DIR . "/images/favicon.ico\" type=\"image/x-icon\">\n";
}
if (@file_exists(MX_THEME_DIR . "/style/style.php")) { // / ist eine style.php vorhanden, ueberschreibt sie die style.css Werte
echo "<link rel=\"stylesheet\" href=\"" . MX_THEME_DIR . "/style/style.php\" type=\"text/css\">\n";
}
if (@file_exists(MX_THEME_DIR . "/style/style.css")) {
echo "<link rel=\"stylesheet\" href=\"" . MX_THEME_DIR . "/style/style.css\" type=\"text/css\">\n";
}
include("includes/my_header.php");
echo "\n</head>\n";
if (function_exists('VKPCreateBody') && $VKPTheme) {
VKPCreateBody();
}
if (!empty($GLOBALS['mxSiteService']) || !empty($GLOBALS['mxDebugService'])) {
mxSiteService();
}

themeheader();
printOverlibDiv();

if (!empty($GLOBALS["home"]) && !$VKPTheme) {
blocks('center');
}
# ###############################################################
function themecenterbox($title, $content, $block = array())
{
if (function_exists ("thememiddlebox")) {
// / In pragmaMx Themes existiert normalerweise diese Funktion und wird stattdessen verwendet
thememiddlebox($title, $content, $block);
} else {
OpenTable();
echo "<center><font class='option'><b>" . $title . "</b></font></center><br>\n" . $content . "\n";
CloseTable();
echo "<br>";
}
}
# ###############################################################
# kompatibilitaet zu < nuke-themes
if (!function_exists("OpenTableAl")) {
// / In pragmaMx Themes existiert normalerweise diese Funktion und wird stattdessen verwendet
function OpenTableAl()
{
global $bgcolor1, $zusatz1;
echo "<table $zusatz1 width=\"80%\" border=\"1\" cellspacing=\"1\" cellpadding=\"0\" bgcolor=\"#ff0000\" align=\"center\"><tr><td>\n";
echo "<table width=\"100%\" border=\"0\" cellspacing=\"1\" cellpadding=\"0\" bgcolor=\"$bgcolor1\"><tr><td>\n";
}
}
# ###############################################################
if (!function_exists("CloseTableAl")) {
// / In pragmaMx Themes existiert normalerweise diese Funktion und wird stattdessen verwendet
function CloseTableAl()
{
echo "</td></tr></table>\n</td></tr></table>\n";
}
}

?>