ausklappbares Informationsfeld

bona · 01.02.2006, 21:16

hallo zusammen, hab ein kleines Problem..

ich möchte unter einem Bild den Link Information setzten.
und wenn man nun mit der maus über diesen Link fährt, soll gegen oben (sprich ÜBER das Bild) eine Informationsbox auftauchen.

ich weiss wie man mit javascript ein menu mithilfe von span klassen macht.
aber wenn ich es so machen würde, ginge die Infobox nicht über das bild sondern, es würde es einfach nach oben verschieben.

kann mir jemand helfen oder mir ein tipp geben, wo ich sowas nachlesen könnte?

gruss bona

PS:hab schon ein tut über ein css menu angeschaut, aber das funktioniert nicht so, wie ich wollte.

bona · 01.02.2006, 22:15

hmm, hab was gefunden, aber es ist immer noch nicht das richtige....

das was ich habe:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>TESTELITEST</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" language="JavaScript">
// welcher Browser
if (document.layers) {navigator.family = "nn4"}
if (document.all) {navigator.family = "ie4"}
if (window.navigator.userAgent.toLowerCase().match("gecko")) 
{navigator.family = "gecko"}

//PopUp-Texte (Reihenfolge der Links)
descarray = new Array(

"&nbsp;",
"Kann man hier eigentlich auch etwas mit php reintun?"
);
//Texte für die Info-Box bis hier


overdiv="0";

//kreiert Tabelle für die PopUp-Box
function popLayer(a){
if(!descarray[a]){descarray[a]="<font color=red>Dieses PopUp 
(#"+a+") ist nicht korrekt definiert - Beschreibung fehlt</font>";}
if (navigator.family == "gecko") {pad="0"; bord="0 bordercolor=black";}
else {pad="1"; bord="0";}
desc = "<table cellspacing=0 cellpadding=0 border=0 bgcolor=000000>
<tr><td>\n"
        +"<table cellspacing=0 cellpadding=0 border=0 width=100%><tr>
<td><font size=-1>\n"
        +descarray[a]
        +"\n</td></tr></table>\n"
        +"</td></tr></table>";
if(navigator.family =="nn4") {
        document.object1.document.write(desc);
        document.object1.document.close();
        document.object1.left=x+15;
        document.object1.top=y-5;
        }
else if(navigator.family =="ie4"){
        object1.innerHTML=desc;
        object1.style.pixelLeft=x+15;
        object1.style.pixelTop=y-5;
        }
else if(navigator.family =="gecko"){
        document.getElementById("object1").innerHTML=desc;
        document.getElementById("object1").style.left=x+15;
        document.getElementById("object1").style.top=y-5;
        }
}
//versteckt die PopUp-Box
function hideLayer(){
if (overdiv == "0") {
        if(navigator.family =="nn4") {eval(document.object1.top="-500");}
        else if(navigator.family =="ie4"){object1.innerHTML="";}
        else if(navigator.family =="gecko") 
           {document.getElementById("object1").style.top="-500";}
        }
}

//überwacht Maus-Position / plaziert die Box dementsprechend
var isNav = (navigator.appName.indexOf("Netscape") !=-1);
function handlerMM(e){
x = (isNav) ? e.pageX : event.clientX + document.body.scrollLeft;
y = (isNav) ? e.pageY : event.clientY + document.body.scrollTop;
}
if (isNav){document.captureEvents(Event.MOUSEMOVE);}
document.onmousemove = handlerMM;
</script>
</head>

<body>
<div id="object1" style="position:absolute; background-color:FFFFFF;color:
black;border-color:black;border-width:20;
visibility:show; left:25px; top:100px; z-index:+1" onmouseover="overdiv=1;"
onmouseout="overdiv=0; setTimeout('hideLayer()',1000)">
&nbsp;
</div>
<table bgcolor="#FFFFFF" border="0" width="640" cellpadding="0" cellspacing="0">
	<tr>
		<td align="left" valign="top">
			<img src="image.php.jpg">
		</td>
	</tr>
	<tr>
		<td colspan="2" bgcolor="#FFFFFF" align="right">
			<a href="#" onMouseOver="popLayer(1)" onMouseOut="hideLayer()">
                            Beschreibung einblenden /</a>
			<a href="#" onMouseOver="popLayer(0)" onMouseOut="hideLayer()">
                            ausblenden</a>
		</td>
	</tr>
</table>
</body>
</html>

Malleus · 02.02.2006, 22:35

Hallo,
hab' da gerade etwas gebastelt. Vielleicht ist's ja das, was Du suchst. Ich muß sagen, es war doch etwas anspruchsvoller als ich gedacht habe. Vertikal zentrieren der Infobox war nicht "so" einfach. Ich weiß, daß das nicht von Dir erwünscht war, aber ich fand's ganz okay.

Also hier ist der Test und hier ist der Code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<head>
<title>Malleus' Javascript FAQ: Center Text over Image</title>
<script type="text/javascript">
var INFOS=["Dies ist ein zentrierter Text<br>mit Zeilenumbruch","Dieses Bild(Screenshot) stammt aus der<br>Mandelbrotmenge.<br>Es wurde mit Javascript erzeugt!"];
function initPage()
{
	oMyImage = document.getElementById( "myImage" );
	oMyContent = document.getElementById( "myContent" );
	oMyInfoBox = document.getElementById( "myInfoBox" );
};

function showInfos(infoNr)
{
	oMyContent.innerHTML = INFOS[ infoNr ];
	oMyInfoBox.style.height = oMyImage.style.height;
	oMyInfoBox.style.width = oMyImage.style.width;
	oMyInfoBox.style.visibility = "visible";
};

function clearInfos()
{
	oMyInfoBox.style.visibility = "hidden";
}

</script>
<style type="text/css">

#myContent
{
	background-color : white;
	padding : 4px;
	white-space : nowrap;
}

</style>
</head>

<body onload="initPage()">
<table style="width:100%"><colgroup><col width="*"><col width="1"><col width="*"></colgroup>
<tr>
<td>&nbsp;</td>
<td><div id="myMainBox" style="position:relative;width:320px;height:256px">
	<img id="myImage" alt="mandelbrotmenge" style="position:absolute;width:320px;height:256px" src="pics/Mandel9.gif">
	<table id="myInfoBox" style="position:absolute;text-align:center;visibility:hidden">
	<colgroup><col width="*"><col width="1"><col width="*"></colgroup>
	<tr><td>&nbsp;</td><td><div id="myContent"></div></td><td>&nbsp;</td></tr>
	</table>
	</div>
</td>
<td>&nbsp;</td></tr>

<tr><td colSpan="3" align="center"><span style="cursor:default" onmouseover="showInfos(0)" onmouseout="clearInfos()">Infos(1)</span>&nbsp;-&nbsp;<span style="cursor:default" onmouseover="showInfos(1)" onmouseout="clearInfos()">Infos(2)</span></td></tr>

</table>



</body>
</html>

bona · 03.02.2006, 16:08

vielen dank für deine Mühe

hmm, aber so kann ich den Text, welcher in die Infobox reinkommt nicht mit php generieren oder??

das problem hatte ich bei dem code den ich gepostet hatte...

gruss bona

Cybergreek · 03.02.2006, 16:27

Warum kannst Du den Text nicht mit php generieren?!
Der steht ja im Endeffekt genauso im Quellcode wie jeder anderen von php generierte Text...

bona · 04.02.2006, 12:52

weiss nicht genau, man würde den PHP code im javascript teil reinschreiben, vieleicht geht es dann nicht....

bei mir gab es dann einfach alles aus (<?php echo "Dasheir sollte eigentlich nur ausgegeben ewrden."; ?>)

das <?php und so sah man auch auf dem bildschirm....

steffenk · 04.02.2006, 14:16

Die Datei muss auc xxx.php heissen, sonst werden die php-tags nicht interpretiert!

bona · 04.02.2006, 15:05

ach verdammt ja klar... ich idiot...
die original datei hab ich .php aber woltle es bloss mal testen, da hab ichs natürlich vergessen lol

bin ich vergesslich

thx