nicht angemeldet
Hallo zusammen,
Ich bin echt am verzweifeln!!
Ich habe eine Map hinterlegt und Area`s darüber definiert.
Wenn man auf eine Area klickt, gelangt man auf den entsprechend hinterlegten Link.
Was ich aber nicht schaffe ist, mir unterhalb dieser Map einen Text (KEIN TOOLTIP!!) anzeigen zu lassen, sobald ich mit der Maus über diese Area fahre! Geht das überhaupt?!Opa Horst meint Der Text wäre in einem Bereich = <span>
Mit ID='text1' und dem Style Display :none zu verfassen.
Der image-Tag wäre zu ergänzen mit mouseover und mouseout - Funktionen :
<img ...
onmouseover="document.getElementById('text1').style.display='none';"
onmouseout="document.getElementById('text1').style.display='inline';"><span id='text1'> DER TEXT </span>
(hoffentlich klappts)
Opa Horst
Hallo,
Vielen Danke erstmal für eure Hilfen!
Ich habe mir eure Ratschläge zu Herzen genommen und folgenden Code erhalten:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="de">
<head>
<script type="text/javascript">
function infoMe(infoindex){
var target = document.getElementById("infodiv");
var infos = new Array();
infos[0]="Hier finden sie gültige interne und historische Zinsen im Einzel- und Kollektivleben, Swap- und Geldmarktsätze, sowie Obligationenrenditen";
infos[1]="blablabla";
infos[2]="blablabla";
infos[3]="blablabla";
infos[4]="blablabla";
infos[5]="blablabla";
infos[6]="blablabla";
infos[7]="... info";
infos[8]="... info";
var positions = new Array();
positions[0] = "530px-300px";
positions[1] = "530px-300px";
positions[2] = "530px-300px";
positions[3] = "530px-300px";
positions[4] = "530px-300px";
positions[5] = "530px-300px";
positions[6] = "530px-300px";
positions[7] = "10px-20px";
positions[8] = "10px-20px";
target.innerHTML = infos[infoindex];
target.style.top = positions[infoindex].substring(0, positions[infoindex].indexOf("-") );
target.style.left = positions[infoindex].substring(positions[infoindex].indexOf("-")+1, positions[infoindex].length );
target.style.display = "block";
}
function hideMe(){
var target = document.getElementById("infodiv");
target.innerHTML ="";
target.style.display = "none";
}
</script>
</head>
<body>
<p style="position:relative;z-index:0;">
<div id="infodiv" style="disply:none; position:absolute; z-index:1; background:#ffffff; padding:5px;"></div>
<img style="WIDTH: 450px; HEIGHT: 319px" alt="NoReference" title="NoReference" hspace="12" vspace="6" src="http://prod.intranet/de/leben/aktuariat/PublishingImages/original.png" usemap=#Reference border=0>
</p>
<p>
<map id=Reference name=Reference>
<area shape=RECT coords=286,3,447,77 href="http://prod.intranet/de/leben/aktuariat/produktinfos/Seiten/default.aspx" onmouseover="infoMe('0');" onmouseout="hideMe();" >
<area shape=RECT coords=284,159,447,240 href="http://prod.intranet/de/leben/aktuariat/prozesse/Seiten/default.aspx" onmouseover="infoMe('1');" onmouseout="hideMe();">
<area shape=RECT coords=3,161,144,237 href="http://prod.intranet/de/leben/aktuariat/kennzahlen/Seiten/default.aspx" onmouseover="infoMe('2');" onmouseout="hideMe();">
<area shape=RECT coords=285,84,449,156 href="http://prod.intranet/de/leben/aktuariat/regelungen/Seiten/default.aspx" onmouseover="infoMe('3');" onmouseout="hideMe();">
<area shape=RECT coords=3,243,144,318 href="http://prod.intranet/de/leben/aktuariat/fachwissen/Seiten/default.aspx" onmouseover="infoMe('4');" onmouseout="hideMe();">
<area shape=RECT coords=1,82,144,154 href="http://prod.intranet/de/leben/aktuariat/partner/Seiten/default.aspx" onmouseover="infoMe('5');" onmouseout="hideMe();">
<area shape=RECT coords=150,3,278,77 href="http://prod.intranet/de/leben/aktuariat/witz/Seiten/default.aspx" onmouseover="infoMe('6');" onmouseout="hideMe();">
<area shape=RECT coords=149,163,151,165 href="" onmouseover="infoMe('7');" onmouseout="hideMe();">
<area shape=RECT coords=3,322,449,513 onmouseover="infoMe('8');" onmouseout="hideMe();">
</map>
</p>
</body>
</html>
Nun hat sich aber ein neues Problem aufgetan, und zwar, dass die Info nicht am gewünschten Ort zu stehen kommt.
Ich habe sie über positions[0] = "530px-300px"; nach rechts verschoben, aber es drückt mir nur den Text zusammen (und somit nach unten). Das möchte ich aber nicht.
Hat das damit zu tun, dass ich auf die width:450px des Bildes referenziere?!
Wäre super wenn ihr einen Tip hättet.
Grüsse,
hienli
JürgenB
Der Martin