nicht angemeldet
hallo auge,
danke für deinen Tipp, hab ich aber schon ausprobiert, am besten ich kopiere den ganzen Quelltext mal hier her weil die verweise auf meine Seite wohl keiner ankiekt...
Willst du nun ein Hintergrundbild für die Links oder Bilder _anstatt_ der Linktexte?
Bilder ist korrekt, die sollen beim hover getauscht werden, wenn ich den Bildern ein attribut alt="bild" zuweise, dann brauch ich keinen Text, wenn das Bild nicht angezeigt wird steht halt das "alt" an der Stelle, die Links haben eine feste Höhe und Breite weil da ein display:block und andere zugewiesene Werten für zuständig sind...
Im ersten Fall bist du mit obigem Code auf der richtigen Spur. Man nehme für
a:link...Im zweiten Fall brauchst du für jeden Link eine ID und ein zusätzliches Element innerhalb des Links. Das...
wie gesagt schon versucht aber irgendwas mach ich mit den id´s für die Pseudoelemente falsch, könnte das eventuell an dem eingebundenen Javascript liegen? fehlt da irgendwas um Bilder ein und auszublenden... keine Ahnung... außerdem ist das Script nur für den IE zuständig...
wenn ich dem link <a id="name" href="#Beispiel"> so gestalte und in das css folgendes aufnehme:
a#Name
{
display:block;
background-image:url(_picz/log.gif);
width:44px; height:105px;
}
a#Name:hover
{
background-image:url(_picz/log_ho.gif);
}
dann geschieht absolut nix.... zumindest im Bereich der eingeblendeten Blöcke, für die statischen verweise funzt das einwandfrei wie man hier prima beobachten kann...
in dem Code sind aber nur die sachen, die fuktionieren... für den Bildwechsel im dynamischen bereich brauch ich einen Schubser in die richtige Richtung... ich checks einfach nicht...
gruß torsten
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>•</title>
<style type="text/css">
div#rightmenu
{
position:absolute; left:50%; top:10%;
width: 44px;
background-color: #fff;
}
ul#dynnav
{
margin: 0; padding: 0;
}
ul#dynnav a
{
display: block;
width: 44px;
border: 1px solid #900;
}
ul#dynnav span
{
display: block;
width: 44px;
border: 1px solid #900;
}
ul#dynnav li
{
list-style: none;
}
ul#dynnav li ul
{
position: absolute; top: 0; right: 44px;
}
li a#top
{
height: 91px;
background: #fff url(_picz/top.gif);
}
li a#top:hover
{
height: 91px;
background: #fff url(_picz/top_ho.gif);
}
li a#log
{
height: 105px;
background: #fff url(_picz/log.gif);
}
li a#log:hover
{
height: 105px;
background: #fff url(_picz/log_ho.gif);
}
li a#cont
{
height: 114px;
background: #fff url(_picz/cont.gif);
}
li a#cont:hover
{
height: 114px;
background: #fff url(_picz/cont_ho.gif);
}
ul#dynnav li ul span
{
width: 81px;
height: 44px;
background-color: #fff;
}
ul#dynnav li ul a
{
width: 81px;
height: 44px;
background-color: #fff;
}
/* dynamisches Ein-/Ausblenden */
ul#dynnav li ul
{
display: none;
}
ul#dynnav li:hover>ul
{
display: block;
}
ul#dynnav>li:hover>a
{
width: 44px;
}
/* dynamisches Ein-/Ausblenden der JavaScript-generierten Klasse im IE */
ul#dynnav li.hoverIE
{
margin-right:0; /* reservierten Platz freigeben */
margin-bottom:-19px; /* Fehlerkorrektur, ggfls. anpassen */
}
ul#dynnav li.hoverIE ul
{
display: block;
}
ul#dynnav li .hoverIE
{
width: 44px;
w\idth: 44px; /* (IE 6 in standards-compliant mode) */
}
</style>
<!--[if IE]>
<script type="text/javascript">
if(window.navigator.systemLanguage && !window.navigator.language) {
function hoverIE() {
var LI = document.getElementById("dynnav").firstChild;
do {
if (sucheUL(LI.firstChild)) {
LI.onmouseover=einblenden; LI.onmouseout=ausblenden;
}
LI = LI.nextSibling;
}
while(LI);
}
function sucheUL(UL) {
do {
if(UL) UL = UL.nextSibling;
if(UL && UL.nodeName == "UL") return UL;
}
while(UL);
return false;
}
function einblenden() {
var UL = sucheUL(this.firstChild);
UL.style.display = "block"; UL.style.backgroundColor = "#fff";
}
function ausblenden() {
sucheUL(this.firstChild).style.display = "none";
}
function einblenden() {
this.className="hoverIE"; this.firstChild.className="hoverIE";
}
function ausblenden() {
this.className=""; this.firstChild.className="";
}
window.onload=hoverIE;
}
</script>
<![endif]-->
</head>
<body>
<div id="rightmenu">
<ul id="dynnav">
<li><a id="top" href="#Beispiel"></a>
<ul>
<li><span></span></li>
<li><a href="#Beispiel"></a></li>
<li><a href="#Beispiel"></a></li>
<li><a href="#Beispiel"></a></li>
</ul>
</li>
<li><a id="log" href="#Beispiel"></a>
</li>
<li><a id="cont" href="#Beispiel"></a>
</li>
</ul>
<div></div>
</div>
</body>
</html>
Auge