yetanotheruser: Mouseover-Buttons und -Effekte mit CSS

Beitrag lesen

Hallo also ich bin erstmal nach dem vorgegangen was es hier bei selfhtml zu finden gab. In meiner css steht...

.ahome       {
    display:block;
    background-image:url(images/home_inactive.gif);
    width:58px; height:25px }

.ahome:hover {
    background-image:url(images/home_active.gif);
}

.ateam       {
    display:block;
    background-image:url(images/team_inactive.gif);
    width:58px; height:25px
    margin-top:-14px; }

.ateam:hover {
    background-image:url(images/team_active.gif);
}

.aschedule       {
    display:block;
    background-image:url(images/schedule_inactive.gif);
    width:71px; height:25px }

.aschedule:hover {
    background-image:url(images/schedule_active.gif);
}

in der html datei steht

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
  <p><ahome href="LINK HIER">&nbsp;</a></p>
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
  <p><ateam href="LINK HIER">&nbsp;</a></p>
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
  <p><aschedule href="LINK HIER">&nbsp;</a></p>

Um, also deinen CSS Angaben nach, sollte deine Html-Datei in etwa so aussehen:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; harset=UTF-8">
    <style type="text/css">
 .ahome       {
     display:block;
     background-image:url(images/home_inactive.gif);
     width:58px; height:25px }

.ahome:hover {
     background-image:url(images/home_active.gif);
 }

.ateam       {
     display:block;
     background-image:url(images/team_inactive.gif);
     width:58px; height:25px
     margin-top:-14px; }

.ateam:hover {
     background-image:url(images/team_active.gif);
 }

.aschedule       {
     display:block;
     background-image:url(images/schedule_inactive.gif);
     width:71px; height:25px }

.aschedule:hover {
     background-image:url(images/schedule_active.gif);
 }

</style>
  </head>
<body>
<a class="ahome" href="http://de.selfhtml.org/">&nbsp;</a>
<a class="ahome" href="http://de.selfhtml.org/">&nbsp;</a>
<a class="ahome" href="http://de.selfhtml.org/">&nbsp;</a>
</body>
</html>

Dat ist aber nur so nen grober Umriss, du solltest dich mal genauer mit dem Aufbau einer Html-Datei auseinandersetzen. Selfhtml bietet dir dafür alles, was du brauchst.

Gruß Ben