Infofenster, das bei Bildmouseover aufklappt, Problemsuche

Status
Nicht offen für weitere Antworten.

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:

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>
 
Hi,

vielleicht kommt dieser Quellcode deinen Vorstellungen näher?

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

<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;
        position:relative;
}

.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:active { border:none; }
a.blubb:active .bla {
        visibility: visible;
        width: 15em;
        left:0;
        top:70px; /* evtl. korrigieren, da mir die Bildhöhe nicht bekannt ist */
}
-->
</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>
 
Vielen Dank für die schnelle Hilfe. Leider tut sich bei mir jetzt gar nichts mehr. Habe den Quelltext testweise einfach mal komplett ausgetauscht und mir die Seite im Browser angesehen, nur klappt da jetzt gar nichts mehr auf. Liegt das an meinem Schrottpc der sowieso alles anders macht als normal oder was ist jetzt los? :confused:

Auf die Gefahr hin, mich jetzt total lächerlich zu machen: was hat es mit diesem

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

auf sich. Also ich hab schon kapiert dass es wohl eigentlich immer dabeistehen sollte, ich lass es allerdings immer weg, weil sonst bei meinen Seiten regelmäßig alles den Bach runtergeht und nix funktioniert. Nicht gerade ein gutes Zeichen, was?
 
Dann klick mal auf die Grafiken ;)

Autsch, Dummheit tut weh. Da hab ich jetzt gar nicht mehr dran gedacht, ich fahr mein Gehirn mal eben hoch :rolleyes:
Eins hab ich jetzt aber doch noch. Im IE ist alles wunderbar, im FF klappt das Fenster wieder zu, wenn man die Taste loslässt. Und da ist so ein unschöner gepunkteter Markierungsrand drumrum, der leider auch bleibt, wenn man loslässt und sich dann sogar noch in die Länge zieht.
 
Code:
.blubb {
        margin: 5px;
        position:relative;
        outline:none; /* deaktiviert gepunkteten Linkrahmen im FF */
}


a.blubb:active .bla, a.blubb:focus .bla {
        visibility: visible;
        width: 15em;
        left:0;
        top:70px;
}
 
Status
Nicht offen für weitere Antworten.
Zurück