nicht angemeldet
Hallo und guten Abend,
heute beschäftigt mich ein schwieriges Problem mit der Umsetzung von onmouseover-Effekten per css.
Unsere Homepage hat als fixen Ausgangspunkt (und auch so festgelegt) eine Größe von 800px auf 600px.
Am unteren Rand werden die grafischen Links angezeigt, die sich beim onmouseover ändern sollen.
Die Grafik http://rapidshare.com/files/410646586/Inaktives_Menu.png verdeutlicht die Ausgangssituation.
So weit, so gut.
Auf der Seite http://bibliothek.ploehr.de/css/rollover wird die Technik, die ich auch verwenden möchte, anhand eines Beispiels verdeutlicht und erklärt.
Hierbei wird die onmouseover-Grafik über die Eigenschaft "background-position" so verschoben, dass der Eindruck entsteht, als wären die Grafiken ausgetauscht worden.
Allerdings wird hierbei davon ausgegangen, dass die Grafiken für die Effekte onmouseover und onmouseout gleich groß sind.
Ich allerdings möchte die onmouseover-Effekte mit underschiedlich großen Grafiken umsetzen.
Die Grafiken http://rapidshare.com/files/410646431/Aktives_Menu_1.png und http://rapidshare.com/files/410646525/Aktives_Menu_2.png verdeutlichen auszugsweise zwei onmouseover-Darstellungen.
Ich erachte es als problematisch, dass, wie bereits geschrieben, die onmouseout- und onmouseover-Grafiken pro Menüpunkt unterschiedlich hoch sind.
Zwei Beispiele:
Grafiklink "Neuigkeiten":
+-
43px | Neuigkeiten ("onmouseout")
+-
|
|
87px | Neuigkeiten ("onmouseover")
|
|
+-
Grafiklink "Spielplan":
+-
38px | Spielplan ("onmouseout")
+-
|
|
57px | Spielplan ("onmouseover")
|
|
+-
Was hierbei aber seltsam ist, ist, dass, wenn ich in CorelDRAW die gesamte Grafik, also die onmouseout- und die onmouseover-Grafik, markiere, die Gesamthöhe 128px ausgegeben wird, wenn ich aber die einzelnen Grafiken markiere, dann habe ich eben, hier beim Link "Neuigkeiten", 43px und 87px, was in der Summe aber 130px ergibt.
Wo sind die übrigen 2px abgeblieben?
Zurück zum Layout:
Jeder einzelne Menüpunkt wird über einen eigenen div-Bereich positioniert, so dass ich meine überlappende Ausrichtung hinbekomme und jede einzelne Liste muß demnach auch eine eigene Klasse bekommen, ebenso wie jede Grafik.
Grundlegendes Problem ist zunächst, dass es bei mir nicht funktioniert, möglicherweise sehe ich - vor lauter Fehlersuche - den Wald vor lauter Bäumen nicht mehr, ich sehe keine(n) Fehler.
"Funktioniert nicht" bedeutet, dass nichts verschoben wird, ich aber nicht ersehen kann, an welcher Stelle mein(e) Fehler liegt/liegen.
Könnt ihr mir hierbei behilflich sein?
Wäre super :-)
Hier der css-Code:
div.Tafel
{
position: absolute;
height: 600px;
width: 800px;
margin: -300px 0px 0px -400px;
top: 50%;
left: 50%;
background-image: url(Grafiken/Tafel.png);
background-repeat: no-repeat;
}
div.Container_Menuepunkt_Neuigkeiten
{
position: absolute;
bottom: 10px;
left: 10px;
}
ul.Menuepunkt_Neuigkeiten
{
width: 112px;
height: 43px;
margin: 0;
padding: 0;
}
ul.Menuepunkt_Neuigkeiten li
{
float: left;
margin: 0;
padding: 0;
}
ul.Menuepunkt_Neuigkeiten li a
{
display: block;
background: 0 0 no-repeat;
width: 112px;
height: 128px;
margin: 0;
padding: 0;
}
ul.Menuepunkt_Neuigkeiten li a.Textlink_Neuigkeiten
{
background-image: url(Grafiken/Textlink_Neuigkeiten.png);
}
ul.Menuepunkt_Neuigkeiten li aTextlink_Neuigkeiten:hover
{
background-position: 0 -43px;
}
Und hier der html-Code:
<div class="Tafel">
<div class="Container_Menuepunkt_Neuigkeiten">
<ul class="Menuepunkt_Neuigkeiten">
<li>
<a class="Textlink_Neuigkeiten" href="#"></a>
</li>
</ul>
</div>
</div>
Zudem bin ich mir nicht sicher, ob das so funktionieren kann, da ich ja unterschiedlich hohe Grafiken pro Link habe.
Ich bin über jede Hilfestellung dankbar, denn ich würde es schon sehr gerne hinbekommen.
An dieser Stelle wiedermal vielen lieben Dank für eure Unterstützung.
Viele Grüsse
Enrico