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

mehrere Mouse over Grafiklinks funktionieren nicht....

I

ikarus_delpaso

Neues Mitglied
Hallo liebe HTML Gemeinde,

Ich moechte mir gerade eine Homepage basteln....meine idee war folgende:
ich habe 10 Bilder in einer Bilderreihe nebeneinander, die alle mit einem Mouseover Effekt ausgestattet sind, bei dem das Bild, ueber dem der mauszeiger gerade ist, durch ein weisses Bild ausgetauscht wird (bild1.jpg ist weiss), und zusötzlich eine Textbox erscheint, indem irgebndwelche informationen stehen.
Das funktioniert auch soweit ganz gut, solange ich nur ein Bild benutze. Wenn ich in der untenstehenden Tabelle 10 zehnmal den "punkt1" nebeneinandersetze funktioniert es einwandfrei...dann bekomm ich zehnmal das definierte bild von "punkt1" angezeigt, mit jeweils dem text den ich in dem link definiere...

Wenn ich aber zehn Punkte (zb punkt1 bis punkt10) deklariere, zeigt er mir trotzdem nur Punkt1 an....der rest bleibt einfach weiss...dann geht gar nicht mehr...

Ich suche seit Stunden den Fehler und ifnde ihn nicht...kann mir jemand helfen?

Das wäre echt wahnsinn...ist ziemlich wichtig :)

Liebe Grüße

Simon


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script type="text/javascript" language="JavaScript">
<!--
var offsetx=20
var offsety=0

function InfoBoxAusblenden() {
document.getElementById('InfoBox').style.visibility = "hidden";
}

function InfoBoxAnzeigen(e,Inhalte,offsetX,offsetY)
{
if (offsetX) {offsetx=offsetX;} else {offsetx=20;}
if (offsetY) {offsety=offsetY;} else {offsety=0;}
var PositionX = 0;
var PositionY = 0;
if (!e) var e = window.event;
if (e.pageX || e.pageY)
{
PositionX = e.pageX;
PositionY = e.pageY;
}
else if (e.clientX || e.clientY)
{
PositionX = e.clientX + document.body.scrollLeft;
PositionY = e.clientY + document.body.scrollTop;
}
document.getElementById("BoxInhalte").innerHTML = Inhalte;
document.getElementById('InfoBox').style.left = "400px";
document.getElementById('InfoBox').style.top = "300px";
document.getElementById('InfoBox').style.visibility = "visible";
}
// -->




</script>

<style type="text/css">
<!--


#menue {
position:absolute;
width: 1000px;
height: 200px;
text-align: center;
top:200px;
left:200%;
border: 1px;

}
#InfoBox {
visibility:hidden;
position:absolute;



width:300px;
height:300px;
background-color:#FDFEFF;
border:2px solid #000000;
}


/* weitere Box in der Info-Box für padding */
#BoxInnen {
padding:15px;
}


/* Formatierung Texte in der Info-Box */

#BoxInhalte {
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:11px;
color:#5F5F5F;
line-height:130%;
}

-->


<!--




#punkt1 {
width:70;
height:70px;

}

#punkt1 ul, #punkt1 li {
list-style-type: none;
margin-left:0px;
padding: 0px;

}


#punkt1 li a:link, #punkt1 li a:visited, #punkt1 li a:active {display:block;
background: url("flug1.jpg") no-repeat;
border-left: solid 1px #000;
border-bottom: solid 0px #000;
border-right: solid 1px #000;
background-position: 0% 50%;

color:#000;text-decoration:none;
font: bold 13px comic sans ms, verdana, sans-serif;
height:70px;
line-height: 100px;
padding-left:30px;
margin-bottom: 1px;
margin-top: 1px;

}

#punkt1 li a:hover { background: url("bild1.jpg") no-repeat;
color:#800000;
text-decoration:none;background-position: 0% 50%;

}

-->


<!--



#punkt2 {
width:70;
height:70px;

}

#punkt2 ul, #punkt2 li {
list-style-type: none;
margin-left:0px;
padding: 0px;

}


#punkt2 li a:link, #punkt2 li a:visited, #punkt2 li a:active {display:block;
background: url("flug2.jpg") no-repeat;
border-left: solid 1px #000;
border-bottom: solid 0px #000;
border-right: solid 1px #000;
background-position: 0% 50%;

color:#000;text-decoration:none;
font: bold 13px comic sans ms, verdana, sans-serif; a
height:70px;
line-height: 100px;
padding-left:30px;
margin-bottom: 1px;
margin-top: 1px;

}

#punkt2 li a:hover { background: url("bild1.jpg") no-repeat;
color:#800000;
text-decoration:none;background-position: 0% 50%;

}



</style>


</head>


<body bgcolor="#ffffff">

<div id="InfoBox" style="z-index:1; visibility:hidden;">
<div id="BoxInnen">Die Arbeit<span id="BoxInhalte"></span></div>
</div>

<table border="1" cellspacing="0" cellpadding="0">
<tr height="150">
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td width="100"></td>
<td>
<div id="punkt1">

<li><a onmouseover="InfoBoxAnzeigen(event,'<br><b>Die Arbeit Einwohnschn</b>eise',20,-30);" onmouseout="InfoBoxAusblenden();" href="javascript:void(0)"></a></li>

</div>
</td>

<td>
<div id="punkt2">

<li><a onmouseover="InfoBoxAnzeigen(event,'<br><b>Die Arbeit </b>eise',20,-30);" onmouseout="InfoBoxAusblenden();" href="javascript:void(0)"></a></li>

</div>
</td>
</tr>
</table>
</body>
</html>
 
Dein HTML-Code ist fehlerhaft:
Du verwendest Listenpunkte ohne eine Liste zu definieren.
Du verwendest eine Tabelle ohne tabellarische Inhalte zu haben.

Und:
Du verwendest JavaScript für den MouseOver-Effekt, postest deine Frage aber zu CSS. Die Antwort auf deine eigentliche Frage wäre somit eher im JavaScript-Bereich des Forums zu finden.

Das was Du willst, lässt sich auch mit kleinerem Aufwand umsetzen. Da Du hier bei CSS gepostet hast, würde ich dir eine reine CSS-Lösung empfehlen. Die sähe dann z.B. so aus:

HTML
HTML: 
<ul id="bilder">
<li><a href="linkziel.html" id="bild1"><span></span></a></li>
<li><a href="linkziel.html" id="bild2"><span></span></a></li>
</ul>

CSS
Code: 
#bilder a:link, #bilder a:visited, #bilder a:active {
 display:block;
 background-repeat: no-repeat;
 border-left: solid 1px #000;
 border-bottom: solid 0px #000;
 border-right: solid 1px #000;
 background-position: 0% 50%;
 color:#000;text-decoration:none;
 font: bold 13px comic sans ms, verdana, sans-serif; a
 height:70px;
 line-height: 100px;
 padding-left:30px;
 margin-bottom: 1px;
 margin-top: 1px;
 position: relative;
 z-index: 1;
}
#bilder a:link span, #bilder a:visited span, #bilder a:active span {
 background-color: #fff;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 display: none;
 z-index: 2;
}
#bilder #bild1 {
 background-image: url("flug1.jpg);
}
#bilder #bild2 {
 background-image: url("flug2.jpg);
}
#bilder a:hover { background-image: none; }
#bilder a:hover span {
 display: block;
}

Wenn Du eine JavaScript-Antwort suchst, poste deine Frage etwas genauer formuliert im JavaScript-Bereich.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben