Onmouseover in area tag!!
Hienli
- html
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?!
[HTML]
<head>
<title></title>
</head>
<body>
<p><img style="width: 450px; height: 319px;" alt="NoReference" src="/de/leben/aktuariat/PublishingImages/original.png" usemap="#Reference" border="0" /> </p>
<p><img alt="" style="width: 450px; height: 193px;" name="austausch" src="/de/leben/aktuariat/PublishingImages/white.png" /></p>
<p><map id="Reference" name="Reference">
<area shape="rect" coords="286,3,447,77" name="eins" href="http://prod.intranet/de/leben/aktuariat/produktinfos/Seiten/default.aspx" />
<area shape="rect" coords="284,159,447,240" name="zwei" href="http://prod.intranet/de/leben/aktuariat/prozesse/Seiten/default.aspx" />
<area shape="rect" coords="3,161,144,237" name="drei" href="http://prod.intranet/de/leben/aktuariat/kennzahlen/Seiten/default.aspx" />
<area shape="rect" coords="285,84,449,156" name="vier" href="http://prod.intranet/de/leben/aktuariat/regelungen/Seiten/default.aspx" />
<area shape="rect" coords="3,243,144,318" name="fünf" href="http://prod.intranet/de/leben/aktuariat/fachwissen/Seiten/default.aspx" />
<area shape="rect" coords="1,82,144,154" name="sechs" href="http://prod.intranet/de/leben/aktuariat/partner/Seiten/default.aspx" />
<area shape="rect" coords="150,3,278,77" name="sieben" href="http://prod.intranet/de/leben/aktuariat/witz/Seiten/default.aspx" />
<area shape="rect" coords="149,163,151,165" /></map></p>
</body>
[/HTML]
WICHTIG!!
Ich habe unterhalt der Map noch eine weitere Area definiert:
<area shape="rect" coords="149,163,151,165" />
in der schlussendlich der entsprechende Text stehen soll.
Ich verstehe nur nicht, wie man dieses Ziel angibt!!
Am einfachsten ist es wohl mit einem Bild, das man hinterlegt, oder?!
Gruss,
hienli
p.s. Bitte falls möglich Code schreiben und nicht auf externe Seiten verlinken, solche habe ich genug.. Ich brauche ein visuelles Beispiel.. DANKE!!
Geht das überhaupt?!
Ja
...
<area shape="rect" coords="1,82,144,154" name="sechs" href=" ... " onmouseover="document.getElementById("blbla").firstChild.data='Schwafel';" />
...
<p id="blabla">Platzhaltertext</p>
WICHTIG!!
Ich habe unterhalt der Map noch eine weitere Area definiert:
<area shape="rect" coords="149,163,151,165" />
in der schlussendlich der entsprechende Text stehen soll.
Das ist Quatsch! area ist inhaltslos, also steht da auch kein Text drin!
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 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
innerhalb <p></p> darf kein <div> stehen
innerhalb <p></p> darf kein <div> stehen
"Dürfen" tut es schon, denn es funktioniert einwandfrei.
Aber man könnte <p></p> weglassen, da hast du Recht.
Gruss,
Hienli
[latex]Mae govannen![/latex]
innerhalb <p></p> darf kein <div> stehen
"Dürfen" tut es schon, denn es funktioniert einwandfrei.
Falsch (siehe: Kindelemente).
Cü,
Kai
[latex]Mae govannen![/latex]
innerhalb <p></p> darf kein <div> stehen
"Dürfen" tut es schon, denn es funktioniert einwandfrei.
Falsch (siehe: Kindelemente).
Cü,
Kai
Hallo Kai,
Das habe ich schon auch gesehen.
Ich benutze den IE6, dort wird ein <div></div> innerhalb eines <p></p> angezeigt und funktioniert.
Kann sein, dass es in einem neueren Browser oder in Firefox nicht geht.
Gruss,
Hienli
Hallo Hienli,
Ich benutze den IE6, dort wird ein <div></div> innerhalb eines <p></p> angezeigt und funktioniert.
das "funktioniert" nur deshalb, weil die Browser über viele Fehler großzügig hinwegsehen, aber eben nicht immer. Mit 100 durch eine Ortschaft fahren funktioniert auch, wenn die anderen aufpassen.
Gruß, Jürgen
Hallo Hienli,
Ich benutze den IE6, dort wird ein <div></div> innerhalb eines <p></p> angezeigt und funktioniert.
das "funktioniert" nur deshalb, weil die Browser über viele Fehler großzügig hinwegsehen, aber eben nicht immer. Mit 100 durch eine Ortschaft fahren funktioniert auch, wenn die anderen aufpassen.
Gruß, Jürgen
Hallo Jürgen,
Du hast natürlich Recht, aber ich sehe nur keinen Grund meinen Code zu ändern, solange er "funktioniert". Sobald es nicht mehr geht, umschliesse ich den "div" einfach mit einem neuen "div" und ersetze so das <p>..
Gruss und ein schönes Wochenende!
Hienli
Hi,
Ich benutze den IE6, dort wird ein <div></div> innerhalb eines <p></p> angezeigt und funktioniert.
das "funktioniert" nur deshalb, weil die Browser über viele Fehler großzügig hinwegsehen, aber eben nicht immer.
ich sehe nur keinen Grund meinen Code zu ändern, solange er "funktioniert".
stellst du auch dein Fahrrad im Hausflur ab, solange es "funktioniert", sich also niemand beschwert, obwohl die Hausordnung das verbietet?
Sobald es nicht mehr geht, umschliesse ich den "div" einfach mit einem neuen "div" und ersetze so das <p>..
Dann ändere es doch lieber sofort, solange sich der Fehler noch nicht auswirkt, wenn du schon um die Möglichkeit weißt. Es ist nun mal ein Regelverstoß, dessen mögliche Folgen man bestenfalls (wenn überhaupt) im Augenblick absehen kann, nicht aber für die Zukunft.
Ciao,
Martin