Javascript in CSS Konvertieren?

[FlemFlem]

Moin Moin,

erstmal vorneweg: Ich bin sicherlich kein Pro, auch wenn wir uns hier im Pro-Bereich befinden. :-D


Ich werde einfach erstmal mein Problem schildern:

Ich hatte den Plan für die MySpace-Seite meiner Band ein paar Icons mit Links zu anderen Seiten bzw. Profilen zu erstellen, die die Farbe ändern sollten, wenn man mit der Maus über sie rüber fährt. Soweit so gut: Google war mein Freund, ich fand einen Artikel auf SelfHTML, der mir vorschlug, meine Planung mit der Hilfe von Javascript in die Tat umzusetzen. Nach 2 Stunden gefrickel und unzähligen verworfenen Quelltexten hatte ich dann doch eine Version zusammengeschrieben, die das erfüllte was ich haben wollte. Diese möchte ich Euch auch nicht vorenthalten:

<html>
<head>
<script
language="JavaScript">
<!--
button1_a= new Image();
button1_a.src = "http://img37.imageshack.us/img37/1127/facebooksw.png"
button1_b= new Image();
button1_b.src = "http://img830.imageshack.us/img830/281/facebookdf.png"
button2_a= new Image();
button2_a.src = "http://img253.imageshack.us/img253/3922/icontwittersw.png"
button2_b= new Image();
button2_b.src = "http://img812.imageshack.us/img812/9468/icontwittern.png"
button3_a= new Image();
button3_a.src = "http://img196.imageshack.us/img196/7563/lastfmsw.png"
button3_b= new Image();
button3_b.src = "http://img251.imageshack.us/img251/3286/lastfmuu.png"
button4_a= new Image();
button4_a.src = "http://img28.imageshack.us/img28/101/schlervzsw.png"
button4_b= new Image();
button4_b.src = "http://img716.imageshack.us/img716/4295/schlervz.png"



//-->
</script>
</head>

<body>

<a href="http://www.facebook.com/pages/Dystocia/124611757593891?ref=ts" onmouseover="austausch1.src='http://img830.imageshack.us/img830/281/facebookdf.png';"
onmouseout="austausch1.src='http://img37.imageshack.us/img37/1127/facebooksw.png'"><img src="http://img37.imageshack.us/img37/1127/facebooksw.png"
border="0" width="50" height="50"
name="austausch1"></a>

<a href="http://twitter.com/dystociamusic" onmouseover="austausch2.src='http://img812.imageshack.us/img812/9468/icontwittern.png';"
onmouseout="austausch2.src='http://img253.imageshack.us/img253/3922/icontwittersw.png'"><img src="http://img253.imageshack.us/img253/3922/icontwittersw.png"
border="0" width="50" height="50"
name="austausch2"></a>

<a href="http://lastfm.de/music/dystocia" onmouseover="austausch3.src='http://img251.imageshack.us/img251/3286/lastfmuu.png';"
onmouseout="austausch3.src='http://img196.imageshack.us/img196/7563/lastfmsw.png'"><img src="http://img196.imageshack.us/img196/7563/lastfmsw.png"
border="0" width="50" height="50"
name="austausch3"></a>

<a href="http://www.studivz.net/Groups/Overview/c529d30d3b0a5ca8" onmouseover="austausch4.src='http://img716.imageshack.us/img716/4295/schlervz.png';"
onmouseout="austausch4.src='http://img28.imageshack.us/img28/101/schlervzsw.png'"><img src="http://img28.imageshack.us/img28/101/schlervzsw.png"
border="0" width="50" height="50"
name="austausch4"></a>

</body>
</html>

Und so sieht's aus!

Soweit so gut. Ich also überglücklich füge den Text bei MySpace (wohl bemerkt: MySpace 2.0 ) ein und was passiert? Der schöne Effekt lässt auf sich warten - vergeblich.

Nachdem ich dann in einigen Foren gestöbert hatte, bin ich auf die Information gestoßen, dass MySpace Javascript gar nicht erlaubt sondern nur HTML und CSS.

Jetzt bin ich aber langsam mit meinem begrenztem Latein und meiner nicht ausgeprägten Geduld (bin ja noch in der Entwicklung und im Wachstum ) am Ende und am einfachsten würde für ich jetzt die Lösung "Javascript in CSS umwandeln" klingen. Da ist natürlich für mich die Frage offen, ob, und wenn ja, wie das möglich ist?

Schonmal danke im Vorraus! Ich hoffe mir kann jemand helfen!

LG

FlemFlem

 

[naich]

Wie stellst du dir das vor? Javascript ist ne Script-Sprache, css für das Design zuständig - da liegen Welten dazwischen.

Dein Problem geht sicherlich auch mit CSS zu lösen (a:hover usw.), aber das musst du dann schon selbst so einfädeln.

 

[gKar]

naich hat Recht: Man kann normalerweise Skripte nicht in Formatvorlagen umwandeln.
Aber für Hover-Effekte braucht man auch keine Skripte (das ist überholt), sondern man kann den Hover-Effekt tatsächlich einfach deklarativ per CSS festlegen: http://de.selfhtml.org/html/verweise/definieren.htm#gestalten

 

[FlemFlem]

ok. Dann werde ich mich in den Artikel mal reinlesen. Den hatte ich gar nicht gefunden. Dankeschön.

Gruß

 

[ThomsonIT]

Hallo FlemFlem,

ich weiß ja nicht wie aktuell das Problem bei Dir noch ist, der Thread ist ja schon ein paar Tage alt... Trotzdem habe ich mir das gerade kurz angesehen. In Deinem Fall wäre die schlichteste Lösung das hier:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>test</title>
        <style type="text/css">
            #facebook, #twitter, #lastfm, #studivz { display:block; height:50px; text-indent:-9999px; width:50px; }
            
            #facebook { background:url('facebooksw.png') top left no-repeat; }
            #facebook:hover { background:url('facebookdf.png') top left no-repeat; }
            
            #twitter { background:url('twittersw.png') top left no-repeat; }
            #twitter:hover { background:url('twitterdf.png') top left no-repeat; }
            
            #lastfm { background:url('lastfmsw.png') top left no-repeat; }
            #lastfm:hover { background:url('lastfmdf.png') top left no-repeat; }
            
            #studivz { background:url('studivzsw.png') top left no-repeat; }
            #studivz:hover { background:url('studivzdf.png') top left no-repeat; }
        </style>
    </head>
    <body>
        <a id="facebook" href="#" >Facebook</a>
        <a id="twitter" href="#" >Twitter</a>
        <a id="lastfm" href="#" >lastfm</a>
        <a id="studivz" href="#" >StudiVZ</a>
    </body>
</html>

Diese einfachste Variante kommt mit einem Bruchteil des Codes aus und kleiner kann man es fast nicht mehr schreiben. Der Vorteil dieser Methode ist, dass auch wenn ein User ohne Style-Erweiterungen und Javascript (Blinde oder Behinderte Menschen) die Seite aufruft, die Links korrekt angezeigt werden. Vielleicht hilft Dir das ja.

Ich würde Dir zusätzlich empfehlen, die verwendeten Grafiken immer in der größe zu speichern wie Du sie benötigst. In diesem Fall lagen die Grafiken bei Imageshack und waren sehr groß. Das führt beim aufrufen der Seite zu längeren Wartezeiten. Wenn die Buttons nur 50px groß sein sollen, müssen auch die Grafiken dafür nicht größer sein.

Gruß ThomsonIT

 

[MasterofDistres]

Wobei man da noch etwas verbessern könnte, nämlich die Benutzung von CSS-Sprites, sprich man packt die normale Grafik und die, die erscheinen soll, wenn man mit der Maus über den Link fährt, in eine gemeinsame Grafik und verschiebt dann per CSS die anzuzeigende Stelle, dazu muss aber vorher eine Breite und Höhe vorgegeben sein.

z.B. so:

#navigation .portfolio a:link,
#navigation .portfolio a:visited {
	background: url(images/navi-portfolio.png) no-repeat 0 0px }
#navigation .portfolio a:hover {
	background: url(images/navi-portfolio.png) no-repeat 0 -49px }

Dadurch muss beim Hover die Grafik nicht nachgeladen werden, was recht unschön sein kann, wenn zwischenzeitig nichts angezeigt wird während des Ladevorgangs.