Spezieller Hovereffekt, aber wie umsetzen?

Poncho

Hallo zusammen!
Bin auf diese Homepage gestoßen:
http://www.mylittlefabric.com

Wenn man dort über die Menüpunkte fährt, fährt eine Grafik raus.

Wie kann ich das für meine Homepage umsetzen?

Mein Menü besteht aus einer Grafik die durch die Mapping-Funktion unterteilt und verlinkt wird. Derzeit ist nur ein Link gesetzt (Home):

HTML

<img style="width: 900px; height: 24px;" alt=""
 src="img/header.gif" usemap="#FPMap0">

Lässt sich dieser Effekt bei mir umsetzen in Verbindung mit CSS?

Hier meine Layout.css

Code

#main { width:900px; margin:50px auto; text-align:left;border:none;
    -moz-border-radius-topleft: 8px; -webkit-border-top-left-radius: 8px; -khtml-border-top-left-radius: 8px; border-top-left-radius: 8px;
    -moz-border-radius-topright: 8px; -webkit-border-top-right-radius: 8px; -khtml-border-top-right-radius: 8px; border-top-right-radius: 8px;
    -moz-border-radius-bottomleft: 8px; -webkit-border-bottom-left-radius: 8px; -khtml-border-bottom-left-radius: 8px; border-bottom-left-radius: 8px;
    -moz-border-radius-bottomright: 8px; -webkit-border-bottom-right-radius: 8px; -khtml-border-bottom-right-radius: 8px; border-bottom-right-radius: 8px; background:#fff;
}
#header {height:150px;}
#content {height:600px;}

Und hier die Style.css

Code

* {margin:0; padding:0; font-size:100%;}
a img {border:0;}
body{background:url(../img/fondo1.gif) top repeat}
#header{overflow:hidden;}
#header .logo{padding:10px 0 0 310px;}
#content{overflow:hidden;}
#content .imageleft{padding:0;}
#content .imageright{padding:0;}
#content .buttonleft{padding-top:17px;}
#content .buttonright{padding-top:17px;}

Vielen Dank für eure Hilfe!

threadi

Das ist eine CSS3-basierte Animation die bei deinem "Menü" so nicht möglich wäre. Du hast nämlich kein Menü sondern, wie Du selbst sagst, eine ImageMap. Das wird von keiner Suchmaschine als Menü wahrgenommen, auch ist es schwerer bis gar nicht stylebar. Du solltest dein Menü zu einem echten Menü - also einer Aufzählungsliste - umbauen, per CSS gestalten und dann kannst Du auch so eine CSS3-Animation einbauen.

Poncho

Vielen Dank für deine Antwort!
Schade, dass es nicht umsetzbar ist.
Ich habe das als Grafik gemacht, da als Menü eine Schriftart verwendet werden soll, die auf dem "normalen" Rechner nicht dargestellt würde.

threadi

Moderne Browser lassen auch das Nachladen von beliebigen Schriftarten zu um bestimmte Inhalte mit diesen zu rendern. Schau dich mal nach der CSS-Eigenschaft font-face um.

Wichtig: die Schriftart muss dies rechtlich auch erlauben.

Tags