Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 12

Thema: Links

  1. #1
    Dominique
    Gast

    Standard Links

    Hallo,

    auf 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ß
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    K.Y.L.T
    Gast

    Standard

    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 entsteht

    Der Javascriptbefehl ist onmousover und der gegenbefehl onmousout
    In CSS brauchst du nur a:hover.

    Google am besten etwas danach.

  3. #3
    Forum Guru Avatar von driver
    Registriert seit
    10.04.2006
    Alter
    34
    Beiträge
    20.729
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    wohooo, mein arbeitgeber
    >> die icq-schreiberlinge bitte dies hier beachten



    1679 entdeckte Gottfried Wilhelm Leibniz das Binärsystem, bei einem Gespräch mit seiner Mutter: "Ja..., Nein..., Nein..., Nein..., Ja..., Ja..., Nein..."

  4. #4
    Kaiserliche Hoheit
    Registriert seit
    04.03.2007
    Ort
    BäRLIN
    Alter
    31
    Beiträge
    1.857
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    <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>
    Jeder hat das Recht dumm zu sein. Einige mißbrauchen dieses Recht leider ständig!
    Weder meine ICQ-Nummer noch meine MSN-Adresse oder meine eMailadresse sind für Bestellungen, Sponsoringanfragen oder Support !

    ploppGROUP Internetservices - IT-Partner für Geschäfts-/Großkunden
    mit Rechenzentren in Berlin, Hannover und bald auch FFM

  5. #5
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard

    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....)

    Code:
    <html>
    
    
    <head>
      <title></title>
      <meta name="description" content="">
      <meta name="keywords" content="">
      <style type="text/css">
    .reiter &#123;background-color&#58; "#CCCCCC";&#125;
    .reitar a &#123;font-family&#58;arial,sans-serif; font-size&#58;11px; font-weight&#58;bold; position&#58;relative; left&#58;10px; top&#58; 15px; color&#58;"#0000FF"&#125;
    .reiter a&#58;visited &#123; color&#58; "#021073";&#125;
    .reiter a&#58;hover&#123;font-family&#58;arial, sans-serif;background-color&#58; "#0000FF";font-size&#58;13px;color&#58;"#80FFFF";&#125;
    #Reiter1&#123;background-color&#58;"#CCCCCC";&#125;
    
    .karte &#123;background-color&#58;"#CCFFCC";&#125;
    .karte p &#123;font-family&#58;arial, sans-serif; font-size&#58; 12px; margin-top&#58;20px; margin-right&#58;25px; margin-bottom&#58; 10px; margin-left&#58;20px;&#125;
    .karte h1 &#123;font-family&#58;arial, sans-serif; font-size&#58; 16px; margin-top&#58;20px; margin-right&#58;25px; margin-bottom&#58; 10px; margin-left&#58;20px;&#125;
    #Karte1&#123;background-color&#58;"#CCCCCC";&#125;  
      </style>
      <script type="text/javascript">
    var aktuellerReiter = "Reiter1";
    var aktuelleKarte = "Karte1";
    
    function einschalten&#40;neuerReiter, neueKarte&#41;
     &#123;if&#40;aktuellerReiter!= neuerReiter&#41;&#123;
    var dieserReiter = document.getElementById&#40;neuerReiter&#41;;
    dieserReiter.style.backgroundColor = "#CCCCCC"; 
    var alterReiter = document.getElementById&#40;aktuellerReiter&#41;;
    alterReiter.style.backgroundColor = "#CCCCCC";
    
    aktuellerReiter = neuerReiter;
    
    var dieseKarte = document.getElementById&#40;neueKarte&#41;;
    dieseKarte.style.visibility = "visible";
    dieseKarte.style.backgroundColor = "#CCCCCF";
    var alteKarte = document.getElementById&#40;aktuelleKarte&#41;;
    alteKarte.style.visibility = "hidden";
    
    aktuelleKarte = neueKarte;
    &#125;&#125;
    </script>
    </head>
    <body bgcolor="#000000">
    <div id="Reiter1" class="reiter" style="position&#58;absolute; left&#58;20px; top&#58;40px; width&#58;90px; height&#58;30px; z-index&#58;1;">CounterStrike
    </div>
    <div id="Reiter2" class="reiter" style="position&#58;absolute; left&#58;110px; top&#58;40px; width&#58;45px; height&#58;30px; z-index&#58;1;">Doom
    </div>
    <div id="Reiter3" class="reiter" style="position&#58;absolute; left&#58;154px; top&#58;40px; width&#58;135px; height&#58;30px; z-index&#58;1;">Impossible Creatures
    </div>
    <div id="Reiter4" class="reiter" style="position&#58;absolute; left&#58;287px; top&#58;40px; width&#58;94px; height&#58;30px; z-index&#58;1;">Need 4 Speed
    </div>
    <div id="Reiter5" class="reiter" style="position&#58;absolute; left&#58;380px; top&#58;40px; width&#58;50px; height&#58;30px; z-index&#58;1;">Sacred
    </div>
    <div id="Reiter6" class="reiter" style="position&#58;absolute; left&#58;428px; top&#58;40px; width&#58;64px; height&#58;30px; z-index&#58;1;">WarCraft
    </div>
    <div id="Reiter7" class="reiter" style="position&#58;absolute; left&#58;492px; top&#58;40px; width&#58;86px; height&#58;30px; z-index&#58;1;">Clan-Bereich
    </div>
    
    <div id="Karte1" class="karte" style="position&#58;absolute; left&#58;20px; top&#58;70px; width&#58;650px; height&#58;300px; z-index&#58;1; visibility&#58; visible; overflow&#58;auto;">
    <h1>CounterStrike</h1>
    
    
    Patches,  Mods  und Maps</p>
    
    
    LINK X</p>
    </div>
    <div id="Karte2" class="karte" style="position&#58;absolute; left&#58;20px; top&#58;70px; width&#58;650px; height&#58;300px; z-index&#58;1; visibility&#58; hidden; overflow&#58;auto;">
    <h1>DOOM</h1>
    
    
    Patches,  Mods  und Maps</p>
    
    
    LINK X</p>
    </div>
    <div id="Karte3" class="karte" style="position&#58;absolute; left&#58;20px; top&#58;70px; width&#58;650px; height&#58;300px; z-index&#58;1; visibility&#58; hidden; overflow&#58;auto;">
    <h1>Impossible Creatures</h1>
    
    
    Patches,  Mods  und Maps</p>
    
    
    LINK X</p>
    </div>
    
    <div id="Karte4" class="karte" style="position&#58;absolute; left&#58;20px; top&#58;70px; width&#58;650px; height&#58;300px; z-index&#58;1; visibility&#58; hidden; overflow&#58;auto;">
    <h1>Need for Speed</h1>
    
    
    Patches,  Mods  und Maps</p>
    
    
    LINK X</p>
    </div>
    <div id="Karte5" class="karte" style="position&#58;absolute; left&#58;20px; top&#58;70px; width&#58;650px; height&#58;300px; z-index&#58;1; visibility&#58; hidden; overflow&#58;auto;">
    <h1>Sacred</h1>
    
    
    Patches,  Mods  und Maps</p>
    
    
    LINK X</p>
    </div>
    <div id="Karte6" class="karte" style="position&#58;absolute; left&#58;20px; top&#58;70px; width&#58;650px; height&#58;300px; z-index&#58;1; visibility&#58; hidden; overflow&#58;auto;">
    <h1>WarCraft</h1>
    
    
    Patches,  Mods  und Maps</p>
    
    
    LINK X</p>
    </div>
    <div id="Karte7" class="karte" style="position&#58;absolute; left&#58;20px; top&#58;70px; width&#58;650px; height&#58;300px; z-index&#58;1; visibility&#58; hidden; overflow&#58;auto;">
    <h1>Clan-Bereich</h1>
    
    
    Links zu Clan-Sites und die Möglichkeit f&uuml;r Clans, ihre War-Dates zu posten...</p>
    
    
    War-Dates</p>
    </div>
    
    </body>
    </html>
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  6. #6
    Dominique
    Gast

    Standard Links

    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/2...kleistemm9.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ß

  7. #7
    König(in)
    Registriert seit
    06.06.2007
    Ort
    Bi
    Beiträge
    1.015
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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
    Sämtlicher Code erhebt keinen Anspruch auf syntaktische Korrektheit geschweige denn Ausführbarkeit und ist für die Implementation außerhalb der Beispiele nicht geeignet.

    Kein Support für kommerzielle Scripts | Kein kostenloser Support via ICQ

  8. #8
    Dominique
    Gast

    Standard Links

    <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.jpg

    Gruß

  9. #9
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Das lässt sich mit CSS a: hover machen.
    Der Trick ist diese kleine Grafik: http://www.arbeitsagentur.de/static/..._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):

    Code:
    a&#58;hover &#123;text-decoration&#58;none; padding&#58; 0 15px; background&#58;url&#40;"../images/ecke_b1_highlight.gif"&#41; 0 -4px no-repeat; background-color&#58;#FFF; color&#58;#E2001A !important;&#125;
    Für die Navi-Leiste nimmst du dann rote Hintergrundfarbe.

  10. #10
    Dominique
    Gast

    Standard Links

    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ß

Ähnliche Themen

  1. links im IE
    Von minimammut im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 6
    Letzter Beitrag: 24.01.2007, 15:47
  2. WM-Fun Links
    Von trutankdogg im Forum Promotion - SEO - Suchmaschine (Google & Co) – Mitarbeiter & Linkpartnersuche
    Antworten: 0
    Letzter Beitrag: 03.07.2006, 14:58
  3. links
    Von bleekk im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 5
    Letzter Beitrag: 05.01.2006, 18:08
  4. Links
    Von vision2003 im Forum HTML & CSS Forum
    Antworten: 10
    Letzter Beitrag: 19.05.2005, 14:33
  5. links
    Von jessy im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 20.01.2005, 22:53

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •