kostenloser Webspace werbefrei: lima-city


Link mit wechselnden Grafiken

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    pudel999

    pudel999 hat kostenlosen Webspace.

    Hi,
    So ich bin noch ziemlich neu in der ganzen hp Welt aber habe da nen kleines Problem....

    Ich versuche über CSS das Image des Links zu wechseln sobald ich mit der Maus drüber fahre...

    das Problem besteht jetzt aber darin das die Grafik nicht ausgetauscht wird so wie ich es möchte sondern unten in die <div> Box eingefügt wird... hier der betreffende Ausschnitt aus dem Quellcode:

    #navi a:Link {background-image: url(../bilder/Start.jpg);} <---- CSS datei
    #navi a:hover { background: url(../bilder/Start2.jpg);}

    <div id="navi"> <!-- Navigationsleiste --> <--- Html Quellcode
    <a href="index.html" target="_parent">
    <img id="start" src="../bilder/start.jpg" border="0" height="50" width="200" alt="..." />
    </a>
    </div>

    is garantiert bestimmt nur son dummer Anfänger Fehler... hoffe auf hilfe
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

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

  3. So geht es richtig. Ein Hintergrund ist - wie der Name schon sagt - ganz hinten. Ist davor ein sichtbares Bild, sieht man natürlich dieses und nicht den Hintergrund.

    Sagen wir, du hast ein Stück Papier (das Div) auf einer Wand (dem Dokument) kleben. Dieses Stück Papier ist so groß wie ein Foto. Im Normalzustand ist das Papier durchsichtig und du hältst das Foto davor. Fährt man nun mit dem Cursor darüber, zauberst du, und das Stück Papier ist mit einem anderen Foto bedruckt. Was hat es gebracht? Nichts. Man sieht immer noch das erste Foto. Damit man das neue Foto sieht, musst du noch mal zaubern und das Foto unsichtbar machen.
  4. Autor dieses Themas

    pudel999

    pudel999 hat kostenlosen Webspace.

    danke hat mir sehr gut geholfen...

    das Problem war einfach das "visibility: hidden;"...

    Also wie gesagt danke... Weiß net ob es jetzt von Relevanz ist aber hier noch mal meine Lösung falls irgendwer das gleiche Probs hat

    Html Quellqode

    <div id="navi"> <!-- Navigationsleiste -->

    <div id="start"><!-- Startlink -->
    <a href="index.html" target="_parent">
    <img class="verstecktesbild" src="../bilder/start.jpg" alt="test"/>
    </a>
    </div>

    </div>
    ----------------------------------------------------------------------------------------------------------------------------
    CSS Datei

    .verstecktesbild {
    visibility: hidden;
    display: block;
    }
    #start {
    background-image: url(../bilder/Start.jpg);
    height: 50px;
    width: 200px;
    }
    #start:hover, #start:focus, #start:active{
    background-image: url(../bilder/start2.jpg);
    background-repeat: no-repeat;
    width: 200px;
    height: 50px;
    }
  5. pudel999 schrieb:
    Hi,
    So ich bin noch ziemlich neu in der ganzen hp Welt aber habe da nen kleines Problem....

    Ich versuche über CSS das Image des Links zu wechseln sobald ich mit der Maus drüber fahre...

    das Problem besteht jetzt aber darin das die Grafik nicht ausgetauscht wird so wie ich es möchte sondern unten in die <div> Box eingefügt wird...


    Also du willst einen sog. "hover" haben.. Die richtigen Navigationen allerdings bestehen nicht aus 2 Bildern, sondern aus einem Bild mit 2 Seiten! Etwas kompliziert ich weiß... Das Ding ist folgendes, du kannst mit einem CSS Code z.B. dein Bild nur von Pixel 1 - 45 anzeigen lassen, wenn du mit der Maus drüber fährst dann aber von 46 - 90 anzeigen lassen.. Du hast also 1 Bild, was du einfach teilst und den oberen Teil immer anzeigen lässt und den unteren Teil dann nur bei maus drüber (hover)...

    Ich hab hier mal drei Beispiele für dich.. Du siehst, wie sich die Grafik verändert, wenn du drüber fährst, der css Code dazu sieht so aus:

    a.home {   /// Der Button 
    background:url(../pictures/home.jpg) no-repeat 0px 0px;   /// Pfad zu meinem Bild und die anzeige ->
    (0px 0px).. Es wird nichts weg geschnitten, das unten wird aber durch padding nicht angezeigt... 
    display: block;   /// Vergessen, was des heißt ^^ 
    width: 100px;      /// Breite 
    height: 20px;      /// Höhe
    padding: 15px 20px 5px 45px;  /// Die Größe (es wird nur das obere angezeigt) 
    color:#FFFFFF;  //// Farbe des textes 
    text-decoration: none;   //// Text decoration > Keine 
    }
    
    
    a.home:hover {  /// Wenn maus drüber
    color:#FFFFFF;   /// Textfarbe 
    padding: 20px 90px 40px 55px;   /// Größe 
    background:url(../pictures/home.jpg) no-repeat 0px -50px; /// Das Bild und es wird oben >
    alles weggeschnitten (-50px), also ist nur unten sichtbar 
    }


    Ich hab auch noch mal alles Kommentiert, um es vielleicht verständlicher zu machen...

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