• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Verweis-Sensitive Grafiken in CSS

Manethos

Neues Mitglied
Hallo Leute,

Ich hab 'n dickes Problem.
Und zwar sollen wir im Informatikunterricht eine Seite zu besonderen Orten oder was auch immer gestallten. Auf meiner Startseite Sind 3 Dicke Buttons mit verschiedenen "Restauranttypen" Also einmal Asiatisch, Italienisch und Deutsch.
Wenn man über ein Button 'hovered', färbt sich dieser um und Zwei weitere Buttons, für das jeweils beste Restaurant, erscheinen.
Der Button im Hover&Button- und Normalen Modus ist eigentlich nur eine Grafik die sich beim 'hovern' verschiebt. (Unten hab ich ein Screenie hinzugefügt)

Code:
a.AsiaButton 		{
   display:block;
   width:300px;
   height:450px;
   background:transparent url(../Grafiken/Hover/AsiaHover.png) no-repeat top left ;
					}

a.AsiaButton:hover {
   display:block;
   width:300px;
   height:450px;
   background:transparent url(../Grafiken/Hover/AsiaHover.png) no-repeat bottom left;
					}

Mein Problem ist jetzt das ich die Buttons nicht verlinkt bekomme!
Theoretisch müsste man ja mit Maps und Area Tags arbeiten aber ich habe die Garfik ja komplett ins CSS gelegt und hab deswegen kein img Tag. Ich will die Grafik auch nicht Trennen bzw. die kleinen Buttons als einzelne Grafik laden.


HTML:
<html>

<head> 

<title>Restaurant Gehimtipps</title>
<link href="CSS/layout.css" rel="stylesheet" type="text/css">
<link href="CSS/Hover.css" rel="stylesheet" 	type="text/css">
<link href="CSS/Hover.css" rel="stylesheet" 	type="text/css">

</head>

<body>
<center><img src="Grafiken/Headline.png" alt="Restaurant-Geheimtipps"></center>

<br /><br /><br /><br />

<table width="1039" border="0" align="center">
  <tr>
  <th width="400"><a class="AsiaButton"></a></th>
  <th width="400"><a class="ItaButton"></a></th>
  <th width="400"><a class="DeuButton"></a></th>
  </tr>
</table>
</body>
</html>

Meine Frage also wie definiere ich solche "Link Boxen" damit die 2 unteren Buttons auch benutzbar sind?


Hier noch der Screenie:
 
Zurück
Oben