kostenloser Webspace werbefrei: lima-city


Rollover ohne Javascript(Bildwechsel)

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    all-web

    all-web hat kostenlosen Webspace.

    Moin ihr :D
    Ich suche einen Bildwechsel OHNE Javascript.
    Früher hatte ich Bild-Rollover-Wechsel so gemacht:

    <a href="index.php" onmouseover="home.src='images/homeh.jpg';" onmouseout="home.src='images/home.jpg';"><img src="images/home.jpg" width="57" height="39" border="0" alt="Startseite" name="home"></a>


    Jetzt aber will ich dass nciht mehr.
    Mit Hintergrund wechseln bei Rollover etc. ist mit CSS für mich kein Problem.
    Aber wie will ich dass machen, dass sich ein Bild ändert?

    Gréèze
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

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

  3. dreckspfennig

    dreckspfennig hat kostenlosen Webspace.

    Nun wie du schon gesagt hast, cih denke CSS ist die beste Lösung, eine möglichkeit wäre, dass du als Hintergrund-Bild das bild nimmt, und denn text durchsichtig machst.
    Dass ist aber genausowenig profesionell... ich hoffe du findest besser hilfe :D
  4. sandrock-jonas

    Kostenloser Webspace von sandrock-jonas

    sandrock-jonas hat kostenlosen Webspace.

    Nun wie du schon gesagt hast, cih denke CSS ist die beste Lösung, eine möglichkeit wäre, dass du als Hintergrund-Bild das bild nimmt, und denn text durchsichtig machst.
    Dass ist aber genausowenig profesionell... ich hoffe du findest besser hilfe :D


    Ich denke doch, dass es mit CSS professioneller ist als mit JavaScript:

    <style type="text/css">
    a {
    background-image:url(images/home.jpg);
    }
    a:hover {
    background-image:url(images/homeh.jpg);
    }
    </style>

    und der Link:

    <a href='index.php'><img src='images/spacer.gif' width='57' height='39' border='0' alt='Startseite'></a>

    spacer.gif ist eine transparente GIF-Grafik (z.B. 2x2px)
  5. Autor dieses Themas

    all-web

    all-web hat kostenlosen Webspace.

    Ach dass ist mir doch 100% klar dass es so geht :P aber nur dann muss ich ja 6 elemente definieren und mit spacer zu arbeiten ist genauso schlecht...
    Aber danke für die Hilfe
  6. Autor dieses Themas

    all-web

    all-web hat kostenlosen Webspace.

    Nun ich habs jetzt so gemacht:
    Ich weiss dadurch gibt es ein riseiges stylsheet, aber mir ist nciht besseres eingefallen:

    .home {
    width: 57px;
    heigt: 39px;
    background-image:url('images/home.jpg');
    background-repeat: none;
    
    }
    .home:hover {
    width: 57px;
    heigt: 39px;
    background-image:url(images/homeh.jpg);
    }
    .infos {
    width: 66px;
    heigt: 39px;
    background-image:url('images/infos.jpg');
    background-repeat: none;
    
    }
    .infos:hover {
    width: 66px;
    heigt: 39px;
    background-image:url(images/infosh.jpg);
    }
    .referenzen {
    width: 116px;
    heigt: 39px;
    background-image:url('images/referenzen.jpg');
    background-repeat: none;
    
    }
    .referenzen:hover {
    width: 116px;
    heigt: 39px;
    background-image:url(images/referenzenh.jpg);
    }
    .projekte {
    width: 102px;
    heigt: 39px;
    background-image:url('images/projekte.jpg');
    background-repeat: none;
    
    }
    .projekte:hover {
    width: 102px;
    heigt: 39px;
    background-image:url(images/projekteh.jpg);
    }
    .kontakt {
    width: 95px;
    heigt: 39px;
    background-image:url('images/kontakt.jpg');
    background-repeat: none;
    
    }
    .kontakt:hover {
    width: 95px;
    heigt: 39px;
    background-image:url(images/kontakth.jpg);
    }
    .weiteres {
    width: 93px;
    heigt: 39px;
    background-image:url('images/weiteres.jpg');
    background-repeat: none;
    
    }
    .weiteres:hover {
    width: 93px;
    heigt: 39px;
    background-image:url(images/weiteresh.jpg);
    }


    Danke für eure Antowrten!
  7. 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!