Hallo,
auf http://www.arbeitsagentur.de seht ihr oben einen roten Balken mit
verlinkten Wörtern.
Ich wüsste gerne wie man sowas macht und würde mich über eure Hilfe freuen.
Gruß
Links
-
Dominique -
6. September 2007 um 15:15
-
-
das machst du mit bildern, in dem du einem Bildern mittels CSS oder Javascript sagst "änder" dich.
Es handelt sich dabei um Normale viereckige Käschen, in dem die eine Hälfte einfach die Hintergrundfarbe der Leiste enthält und so die optische Täuschung entstehtDer Javascriptbefehl ist onmousover und der gegenbefehl onmousout
In CSS brauchst du nur a:hover.Google am besten etwas danach.
-
wohooo, mein arbeitgeber
-
<offtopic>
*grinz*
achso is das driver .. ich zahl mich monatlich fr dich dumm und dusselig und du hängst von meinem geld die ganze zeit im netz ?
</offtopic> -
hier ne javascript-lösung... ganz ohne bilder....
der code ist recht alt und müsste für diverse positionierungen überarbeitet werden,
aber dir geht´s ja darum zu erfahren, wie sowas geht, nicht wie sowas perfekt aussieht
(is lang her, daß ich des gemacht hab....)HTML
Alles anzeigen<html> <head> <title></title> <meta name="description" content=""> <meta name="keywords" content=""> <style type="text/css"> .reiter {background-color: "#CCCCCC";} .reitar a {font-family:arial,sans-serif; font-size:11px; font-weight:bold; position:relative; left:10px; top: 15px; color:"#0000FF"} .reiter a:visited { color: "#021073";} .reiter a:hover{font-family:arial, sans-serif;background-color: "#0000FF";font-size:13px;color:"#80FFFF";} #Reiter1{background-color:"#CCCCCC";} .karte {background-color:"#CCFFCC";} .karte p {font-family:arial, sans-serif; font-size: 12px; margin-top:20px; margin-right:25px; margin-bottom: 10px; margin-left:20px;} .karte h1 {font-family:arial, sans-serif; font-size: 16px; margin-top:20px; margin-right:25px; margin-bottom: 10px; margin-left:20px;} #Karte1{background-color:"#CCCCCC";} </style> <script type="text/javascript"> var aktuellerReiter = "Reiter1"; var aktuelleKarte = "Karte1"; function einschalten(neuerReiter, neueKarte) {if(aktuellerReiter!= neuerReiter){ var dieserReiter = document.getElementById(neuerReiter); dieserReiter.style.backgroundColor = "#CCCCCC"; var alterReiter = document.getElementById(aktuellerReiter); alterReiter.style.backgroundColor = "#CCCCCC"; aktuellerReiter = neuerReiter; var dieseKarte = document.getElementById(neueKarte); dieseKarte.style.visibility = "visible"; dieseKarte.style.backgroundColor = "#CCCCCF"; var alteKarte = document.getElementById(aktuelleKarte); alteKarte.style.visibility = "hidden"; aktuelleKarte = neueKarte; }} </script> </head> <body bgcolor="#000000"> <div id="Reiter1" class="reiter" style="position:absolute; left:20px; top:40px; width:90px; height:30px; z-index:1;">[url='javascript:einschalten('Reiter1', 'Karte1');']CounterStrike[/url] </div> <div id="Reiter2" class="reiter" style="position:absolute; left:110px; top:40px; width:45px; height:30px; z-index:1;">[url='javascript:einschalten('Reiter2', 'Karte2');']Doom[/url] </div> <div id="Reiter3" class="reiter" style="position:absolute; left:154px; top:40px; width:135px; height:30px; z-index:1;">[url='javascript:einschalten('Reiter3', 'Karte3');']Impossible Creatures[/url] </div> <div id="Reiter4" class="reiter" style="position:absolute; left:287px; top:40px; width:94px; height:30px; z-index:1;">[url='javascript:einschalten('Reiter4', 'Karte4');']Need 4 Speed[/url] </div> <div id="Reiter5" class="reiter" style="position:absolute; left:380px; top:40px; width:50px; height:30px; z-index:1;">[url='javascript:einschalten('Reiter5', 'Karte5');']Sacred[/url] </div> <div id="Reiter6" class="reiter" style="position:absolute; left:428px; top:40px; width:64px; height:30px; z-index:1;">[url='javascript:einschalten('Reiter6', 'Karte6');']WarCraft[/url] </div> <div id="Reiter7" class="reiter" style="position:absolute; left:492px; top:40px; width:86px; height:30px; z-index:1;">[url='javascript:einschalten('Reiter7', 'Karte7');']Clan-Bereich[/url] </div> <div id="Karte1" class="karte" style="position:absolute; left:20px; top:70px; width:650px; height:300px; z-index:1; visibility: visible; overflow:auto;"> <h1>CounterStrike</h1> Patches, Mods und Maps</p> [url='#']LINK X[/url]</p> </div> <div id="Karte2" class="karte" style="position:absolute; left:20px; top:70px; width:650px; height:300px; z-index:1; visibility: hidden; overflow:auto;"> <h1>DOOM</h1> Patches, Mods und Maps</p> [url='#']LINK X[/url]</p> </div> <div id="Karte3" class="karte" style="position:absolute; left:20px; top:70px; width:650px; height:300px; z-index:1; visibility: hidden; overflow:auto;"> <h1>Impossible Creatures</h1> Patches, Mods und Maps</p> [url='#']LINK X[/url]</p> </div> <div id="Karte4" class="karte" style="position:absolute; left:20px; top:70px; width:650px; height:300px; z-index:1; visibility: hidden; overflow:auto;"> <h1>Need for Speed</h1> Patches, Mods und Maps</p> [url='#']LINK X[/url]</p> </div> <div id="Karte5" class="karte" style="position:absolute; left:20px; top:70px; width:650px; height:300px; z-index:1; visibility: hidden; overflow:auto;"> <h1>Sacred</h1> Patches, Mods und Maps</p> [url='#']LINK X[/url]</p> </div> <div id="Karte6" class="karte" style="position:absolute; left:20px; top:70px; width:650px; height:300px; z-index:1; visibility: hidden; overflow:auto;"> <h1>WarCraft</h1> Patches, Mods und Maps</p> [url='#']LINK X[/url]</p> </div> <div id="Karte7" class="karte" style="position:absolute; left:20px; top:70px; width:650px; height:300px; z-index:1; visibility: hidden; overflow:auto;"> <h1>Clan-Bereich</h1> Links zu Clan-Sites und die Möglichkeit für Clans, ihre War-Dates zu posten...</p> [url='#']War-Dates[/url]</p> </div> </body> </html> -
Hallo, danke für eure Hilfe.
@ synaptic, ich habe das so irgendwie leider nicht hinbekommen.
Ich habe dann mal weiter im I-Net geschaut und habe auf http://de.selfhtml.org/javascript/beispiele/buttons.htm ein schönes Beispiel gefunden.
So ganz bekomme ich es aber damit auch nicht hin- würde mir jmd. dabei helfen, bzw. mir das mal zusammen basteln ?
Also es soll so aussehen wie ich das hier gemacht habe : http://img209.imageshack.us/img209/2295/linkleistemm9.gif
Nur eben verlinkt (aber die habe ich noch nicht)
schön wäre wenn sich der Bereich wo z.B. "Anfahrt" steht heller verfärben würde. Aber muss nicht.Ich weiss ja nicht ob sowas viel Arbeit macht aber es würde mir schon mal sehr helfen wenn ich so etwas hätte.
Gruß
-
wenn du das mit dem Beispielcode so hinbekommst, dass du damit die ganze Leiste mit nem Hover ersetzt , helf ich dir bei den einzelnen Menüpunkten
-
<style type="text/css"><!--
a:link{color:#000;}
a:visited{color:#ff0;}
a:hover{color:#f00;}
a:active{color:#f00;}
--></style>
</head><body>
Link
</body>also so schon mal nicht - aber ich habe noch nie was mit css gemacht und wenn man auf den Link klickt kommt wenigstens schon mal die Leiste.
Ich hätte nur gerne das sich der Bereich dann so verfärbt wenn man mit dem Mauszeiger drüber geht
http://img214.imageshack.us/img214/3343/leiste1nm9.jpgGruß
-
Das lässt sich mit CSS a: hover machen.
Der Trick ist diese kleine Grafik: http://www.arbeitsagentur.de/static/images/…1_highlight.gif, die diagonal rot-weiß farbgeteilt ist.
Ich habe jetzt keine Zeit zum testen. Probier mal in der CSS folgendes aus (CSS-Code ist der Originalseite entnommen):CSSa:hover {text-decoration:none; padding: 0 15px; background:url("../images/ecke_b1_highlight.gif") 0 -4px no-repeat; background-color:#FFF; color:#E2001A !important;}
Für die Navi-Leiste nimmst du dann rote Hintergrundfarbe. -
Ich bekomme das so leider nicht hin. :-/
Das wird hier warscheinlich nicht gerne gesehen aber könnte mir das jmd. so machen wie ich oben beschrieben habe ? Also auch das sich das dann verfärbt wenn man mit der Maus drüber geht.
Ich habe mit CSS bisher noch nichts gemacht.Gruß
-
Und wir helfen dir gerne dabei es zu lernen, aber wenn du das von jemanden haben willst -> Jobforum und gegenleistung anbieten (vorzugsweise keine Werbung sondern finanzieller Art)
-
ja, danke auch