kostenloser Webspace werbefrei: lima-city

Links, die sich, wenn man drüberfährt, verändern?

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   m-homepage

   m-homepage hat kostenlosen Webspace.

   9:54, 1.11.2009

   Hallo!
   
   Ich habe ein Problem und zwar möchte ich die Navi Links auf meiner Homepage so haben:
   Wenn man drüberfährt ändert sich die Grafik.
   
   Wie kann ich das machen? Habe nämlich leider nur was mit Farben und Text gefunden, aber ich möchte es als Grafik.
   
   Danke im Vorraus,
   Ma

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. nikic

   

   nikic hat kostenlosen Webspace.

   10:26, 1.11.2009

   Code?
   
   Mit CSS: a:hover { background-image: url(...); }
   Aber halt alles Kontextabhängig, ob das so gut ist. Daher: Könntest du deinen aktuellen Code geben?
4. Autor dieses Themas

   m-homepage

   m-homepage hat kostenlosen Webspace.

   10:30, 1.11.2009

   Ich sag nur:
   
   m-homepage.lima-city.de >> Strg+U und schon hast du ihn. Aber wenn du den Navi Code meinst:
   
   

   <div id="menue">
   <font size=1><a href="http://m-homepage.lima-city.de/"><img src="willkommenban.png" border="0px"><br>
   <a href="http://m-homepage.lima-city.de/linkme.html/linkme.html"><img src="linkban.png" border="0px"></font>
   </div>

   
   
   Beitrag zuletzt geändert: 1.11.2009 10:32:10 von m-homepage

5. tom-moeller

   

   tom-moeller hat kostenlosen Webspace.

   11:46, 1.11.2009

   m-homepage schrieb:
   Ich sag nur:
   
   m-homepage.lima-city.de >> Strg+U und schon hast du ihn. Aber wenn du den Navi Code meinst:
   
   

   
   
   Wenn, dann brauchen wir den CSS-Code. Zwar könnten wir uns die Mühe machen auch den aus Deinem Quelltext rauszusuchen, aber Du kannst uns, wenn Du eine Frage hast schon gerne entgegenkommen.
6. Autor dieses Themas

   m-homepage

   m-homepage hat kostenlosen Webspace.

   11:48, 1.11.2009

   Das ist kein CSS. Es ist HTML und der Code der Navi ist schon oben. Oder was brauchst du noch?
   
   PS: Jaja! Ich komme euch so gut wie möglich entgegen.

7. tom-moeller

   

   tom-moeller hat kostenlosen Webspace.

   11:53, 1.11.2009

   m-homepage schrieb:
   Das ist kein CSS. Es ist HTML und der Code der Navi ist schon oben. Oder was brauchst du noch?
   
   PS: Jaja! Ich komme euch so gut wie möglich entgegen.
   

   
   
   Ohne CSS kein Hovereffekt:
   
   Schau Dir http://www.css4you.de/active.html an und ersetze die Farben gegen Deine Hintergrundbilder, so wie "nikic" beschreiben hat.
   
   Gruß
8. Autor dieses Themas

   m-homepage

   m-homepage hat kostenlosen Webspace.

   11:57, 1.11.2009

   Okay danke eucg beiden. Falls nich fragen auftauchen, werde ich es in dem Beitrag hier posten.
   
   -momentan keine Fragen-

9. e*****n

   12:04, 1.11.2009

   Ein Tip noch zu a:hover/CSS:
   
   Wenn Du den Hintergrund mit background:url lädst und verschiedene Bilder verwendest, dann hast Du immer eine Pause fürs Nachladen der Bilder.
   
   Einfacher ist es, EIN Bild zu haben und das zu verschieben:
   http://www.webkrauts.de/2007/10/20/hovereffekte-mit-css-sprites/
   
10. Autor dieses Themas

    m-homepage

    m-homepage hat kostenlosen Webspace.

    12:09, 1.11.2009

    
    
    Wenn Du den Hintergrund mit background:url lädst und verschiedene Bilder verwendest, dann hast Du immer eine Pause fürs Nachladen der Bilder.
    
    

    
    
    Stört das so sehr?

11. e*****n

    12:12, 1.11.2009

    Naja. Mich schon :-)
    
    Es wirkt -- sagen wir mal so -- professioneller, wenn nicht jedes Fitzelchen neu geladen werden muss.
    Du lädst das Hintergrundbild sowieso, wenn es ein bisschen größer ist, dann merkst Du das überhaupt nicht. Wenn aber ein weiteres Bild geladen werden muss, dann wird ein neuer Request zum Server gestellt...
    
    

12. t****o

    12:17, 1.11.2009

    Also so geht das:
    

    <style typ="text/css">
    div.menufeld {
    position:relative;
    background:url(erstesbild.png) no-repeat;
    width:100px;
    height:100px;
    }
    
    div.menufeld:hover {
    background:url(zweitesbild.png) no-repeat;
    }
    </style>

    
    Die Werte bei width und heigt musst du natürlich noch anpassen. So sieht dann dein Menü aus:
    

    <div class="menufeld"><a href="test.html">test</a></div>
    <div class="menufeld"><a href="test2.html">test2</a></div>

    
    usw.
    
    Als nächstes könntest Du das ganze mit einer Liste machen, aber ich denke mir, das dass erstmal einfacher ist.
    
    PS: Kümmer dich mal um deinen Quelltext, der ist ja vom Aufbau her eine Katastrophe!
13. Autor dieses Themas

    m-homepage

    m-homepage hat kostenlosen Webspace.

    12:34, 1.11.2009

    Danke für den Code, ich guck mir das mal an
    
    PS: Pff, also ich hab schon schlimmeres gesehen...

14. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?