CSS Grafiken Hovern

Kashan · 3. März 2011

Hallo ich möchte das Logo meiner website Hovern lassen. Allerdings klappt das nicht.

Schaut selbst: http://126877.webhosting40.1blu.de/tud2tips/index.html

CSS:

Code:

body{
background-color:black;
}
.logo{
background-image:url("logo.png");
display:block;

}
.logo:hover{
background-image:url("logo_on.png");
display:block;
}
.logo:active{
background-image:url("logo_on.png");
display:block;
}
.logo:focus{
background-image:url("logo_on.png");
display:block;
}
.menu{
color:white;
}

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>TDU2 Tipps</title>
<link rel="stylesheet" type="text/css" href="formate.css"> 
<link rel="icon" href="favicon.ico" type="image/vnd.microsoft.icon">
</head>
<body>

<table border="1" class="menu">
	<tr>
		<td><a href="index.html"><div class="logo" ></div></a></td>
	</tr>
	<tr>
		<td>1</td>
	</tr>
</table>

</body>
</html>

Ich habe schon viele foren und seiten durchforstet wo es auch so umgesetzt wurde, ich versteh nicht warum es nicht geht

NoXPhasma · 3. März 2011

1. Wenn du einem leeren DIV ein Bild als Hintergrund angibst, musst du diesem auch eine Größe zuweisen.

2. Kannst du in den Pseudoklassen das Display Weg lassen, da sich deren Wert nicht ändert.

Kashan · 3. März 2011

Habs rausgefunden, danke!

NullPointer · 3. März 2011

Das height= und width= muß auch in das CSS für .logo, nicht in das HTML - <div>s kennen diese Attribute nicht, das tun nur <img>s (und vllt. noch 1-2 andere).

Mr. Snoot · 3. März 2011

Es ist auch sinnvoll, beide Bilder in eine Datei zu packen und diese beim Hovern zu verschieben. Dadurch verhindert man, dass das zweite Bild beim Hovern erst nachgeladen werden muss und ggf. kurz flackert.

Der erstellst also ein logo.png mit doppelter Breite (oder Höhe) und setzt darin das logo und logo_on nebeneinander (bzw. übereinander). Im CSS schreibst du dann:

PHP:

.logo{
  background:url("logo.png") 0 0;
}

.logo:hover{
  background-position:50% 0;
}

(musst mal testen mit den Koordinaten zum Verschieben; weiß ich auswendig nicht genau)

fsx94 · 3. März 2011

Hast zwar rausgefunden, aber:
Haste das auch mit span gelöst oder hast du etwas eleganteres gefunden?
Mit span kann man ja sogar vielleicht die Tabelle an der Stelle weglassen

GreenKaktus · 3. März 2011

Das wär dann ungefähr so:

HTML:

<div id="logo">
<a href="index.html"><span class="logospan"></span></a>
</div>

CSS

Code:

span.logospan{
background-image:url("logo.png");
display:block;
width: 123px;
height: 120;

}
span.logospan:hover{
background-image:url("logo_on.png");
}

(.logospan reicht auch)

Mit dem div kannste das dann hinschieben

Suche

CSS Grafiken Hovern

Kashan

Cadet 2nd Year

NoXPhasma

Lieutenant

Kashan

Cadet 2nd Year

NullPointer

Lt. Commander

Mr. Snoot

Gast

fsx94

Ensign

GreenKaktus

Newbie

Ähnliche Themen