kostenloser Webspace werbefrei: lima-city


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

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    m-homepage

    m-homepage hat kostenlosen Webspace.

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

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

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

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

    -momentan keine Fragen-
  9. e*****n

    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.



    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

    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

    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! :wink:
  13. Autor dieses Themas

    m-homepage

    m-homepage hat kostenlosen Webspace.

    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?

Über lima-city

Login zum Webhosting ohne Werbung!