Rishu-chan
Grünschnabel
Also. Ich versuche für zwei Bilder bei Mouseover ein Infofenster aufklappen zu lassen, dass weitere Informationen beherbergen soll. Leider ist alles, was über einfaches HTML hinaus geht, ein Buch mit sieben Siegeln für mich und ich habe versucht, mithilfe der Codes dieser Seite mir was zusammenzubasteln. Es hat sogar einigermaßen funktioniert, nur leider scheitere ich jetzt daran, mein Ergebnis in IE und FF gleich aussehen zu lassen. Weder die Ausrichtung noch die Breite des Fensters lassen sich eindeutig für beide Browser definieren. Die Fenster sind im FF immer etwas breiter als im IE und während sie im FF unter der Flagge aufgehen, sind sie im IE rechts daneben. Wobei mich das nicht mal sonderlich stört, lediglich die Breite muss ich in den Griff kriegen. Angucken ist hier möglich. Wahrscheinlich habe ich aufgrund meiner nicht vorhandenen Fähigkeiten den Code total vermurkst, wäre also für ein wenig Hilfe sehr dankbar
Aber wo ich grad sowieso schon dabei bin: dass die Fenster bei Mouseover aufklappen, ist gut und schön, lieber wäre es mir aber mit einem Klick. Weiß nur leider nicht, wie ich das bewerkstelligen könnte.
Hier mal der Code:
Aber wo ich grad sowieso schon dabei bin: dass die Fenster bei Mouseover aufklappen, ist gut und schön, lieber wäre es mir aber mit einem Klick. Weiß nur leider nicht, wie ich das bewerkstelligen könnte.
Hier mal der Code:
Code:
<html>
<head>
<style type="text/css">
body, tr, td {font-style: normal; font-variant: normal; font-weight: normal; font-size: 11px; font-family: Trebuchet MS, Verdana; text-align: justify;}
.blubb {
margin: 5px;
}
.blubb {
float: left;
margin-left: 0;
}
.bla {
margin: 5px;
position: absolute;
background-color: #F5F5F5;
border: 2px solid #E75974;
font-family:Trebuchet MS, Helvetica, sans-serif;
visibility: hidden;
}
.bla {
display: block;
padding: 20px;
}
a.blubb, a.blubb:visited, a.blubb:hover {
text-decoration: none;
color: #E75974;
}
/* IE */
a.blubb:hover .bla {
visibility: visible;
width: 15em;
}
-->
</style>
</head>
<body>
<a class="blubb" href="#">
<span><img src="deutschland.gif" border=0></span>
<span class="bla">
Hier kommt der eine Text rein.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas nunc nulla, lobortis eu, eleifend eu, venenatis non, massa. Morbi sed wisi a sapien sollicitudin porttitor.
</span></a>
<a class="blubb" href="#">
<span><img src="usa.gif" border=0></span>
<span class="bla">
Und hier der andere.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas nunc nulla, lobortis eu, eleifend eu, venenatis non, massa. Morbi sed wisi a sapien sollicitudin porttitor.
</span></a>
</body>
</html>