event-handler onmouseover

Unregistriert

Hallo zusammen..

Ich möchte, dass mir im Feld <AREA shape=RECT coords=3,322,449,513> ein vorgegebener Text angezeigt wird, sobald ich mit der Maus über eines der unten auch angegebenen Felder fahre. Wenn ich dann auf das entsprechende Feld klicke, springt es mir auf eine vorgegebene Seite. (Letzteres funktioniert auch schon!)
Wie aber kann ich "onmouseover" in meinen Code integrieren? Muss ich ihn von Grund auf erneuern?!

Vielen Dank für eure Hilfe!

Gruss,
Domi

HTML

<HEAD>
        <TITLE></TITLE>
    </HEAD>
    <BODY class="">
        <P><IMG style="WIDTH: 450px; HEIGHT: 516px" alt=NoReference src="/de/leben/aktuariat/PublishingImages/original_zusatz.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">
        <AREA shape=RECT coords=284,159,447,240 href="http://prod.intranet/de/leben/aktuariat/prozesse/Seiten/default.aspx">
        <AREA shape=RECT coords=3,161,144,237 href="http://prod.intranet/de/leben/aktuariat/kennzahlen/Seiten/default.aspx">
        <AREA shape=RECT coords=285,84,449,156 href="http://prod.intranet/de/leben/aktuariat/regelungen/Seiten/default.aspx">
        <AREA shape=RECT coords=3,243,144,318 href="http://prod.intranet/de/leben/aktuariat/fachwissen/Seiten/default.aspx">
        <AREA shape=RECT coords=1,82,144,154 href="http://prod.intranet/de/leben/aktuariat/partner/Seiten/default.aspx">
        <AREA shape=RECT coords=150,3,278,77 href="http://prod.intranet/de/leben/aktuariat/witz/Seiten/default.aspx">
        <AREA shape=RECT coords=149,163,151,165 href="" ??>
        <AREA shape=RECT coords=3,322,449,513></MAP></P>
    </BODY>

Alles anzeigen

Bandit

Aus SelfHTML:

Zitat

Damit beim Überfahren einer verweis-sensitiven Fläche mit der Maus ein kleines Info-Fenster ("Tooltip") erscheint, können Sie in jeweils das Universalattribut title="angezeigter Text" verwenden.

Unregistriert

Hallo Bandit,

Danke, dass du dich meiner angenommen hast.

Allerdings ist das Tooltip nicht genau das was ich suche!
Eher etwas der Form:

http://www.on-mouseover.de/mouseoverframe/index.html (Beispiel 1)

Ich bin aber ratlos, wie ich dies in meinem Code umsetzen kann.

Gruss,
Domi

Unregistriert

Hallo,

Danke, das gibt mir neue Ideen.
Ich komme der Sache immer näher.
Es ist ja auch sinnvoller, wenn ichs alleine rausbekommen!

Es ist nun aber so, dass ich areas definiert habe, die eine bestimmte Grösse und einen bestimmten Platz (definiert über den Namen) haben.
Kann ich "onmouseover" (so wie du es mir gezeigt hast) auch darin ausführen???
Du hast ja jetz <div> gebraucht.
Ich möchte eben, dass der Text (bei dir heisst er "Test") an einem bestimmten Ort, in einer bestimmten area auftaucht und nicht nur "oberhalb des Links".

Z.B. lautet eine Area, die auch als Link funktioniert:

Ich möchte nun, dass, wenn ich über diesen Link, diese Area fahre, dass mir in der Area
<AREA shape=RECT coords=3,322,449,513> der Text "Zusammenfassung Seite Prodinfos" ausgegeben wird!!!

Wie mache ich denn das?! Das ist ja nicht genau das gleiche!

Gruss,
Domi

synaptic

das bild mit der areamap setzte in nen umschliesendes div (was position:relative; bekommt)
dann machste dein div was da als info auftauchen soll mit da rein und setzt die visibility auf hidden oder das display auf none und position auf relative oder absolute, musste ma testen- relative sollte an sich schon fruchten.
das umschliessende div bekommt nen z-index:0 und die info nen z-index:1

dann brauchste ne funktion, die die entsprechende position der info setzt und des display auf visible bzw display auf block setzt.

die eventhandler kannste entweder direkt ins area-tag schreiben oder mit jquery und IDs
was du da vorhast is nich soo schwer!

Unregistriert

Hallo,

Ich muss dir leider sagen, dass ich gerade nur Bahnhof verstehe, da ich html- technisch nicht so versiert bin, wie du denkst.

Es würde mir einiges helfen, wenn du z.B. für eine meiner Areas das, was du mir da vorschlägst, einen Beispielcode generieren könnstest. Dann kann ich es für die anderen Areas genau gleich umsetzen und lerne noch was dabei!

Vielen herzlichen Dank..

Gruss,
Domi

synaptic

wenn du die komplette url von dem bild rausrückst kann ich da gerne mal gucken...
hab jetzt eh vor für jemanden hier aus dem forum ein script anzupassen.
da kann ich auch gerne mal nach deinem kram gucken.

haste glück, an sich will ich mehr eigeninitiative sehen, bevor ich für jemanden nen code schreibe, aber hab heut nen guten tag

edit: dat warten dauert mir zu lange...

hier is nen code, anpassen muste die positionen wo die infos auftauchen sollen und die texte die als info erscheinen sollen..

HTML

<!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]="erste info";
    infos[1]="zweite info";
    infos[2]="... info";
    infos[3]="... info";
    infos[4]="... info";
    infos[5]="... info";
    infos[6]="... info";
    infos[7]="... info";
    infos[8]="... info";


    var positions = new Array();
    positions[0] = "10px-20px";
    positions[1] = "100px-200px";
    positions[2] = "50px-70px";
    positions[3] = "40px-20px";
    positions[4] = "140px-240px";
    positions[5] = "10px-24px";
    positions[6] = "10px-244px";
    positions[7] = "40px-440px";
    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: 516px" alt="NoReference" title="NoReference" src="http://forenpics.kaninchenrettung.de/privat/Einzugrudi/DSCF1254.JPG" 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>

Alles anzeigen

und weil ich stinkefaul bin hab ich die styles nich ausgelagert und den javascript-kram nich mit jquery gemacht(was codezeilen gespart hätt, aber ggf länger gedauert hätt)

und für die zukunft: wenn du sachen haben willst, die du nicht kannst oder kennst, is es an der zeit sich mit der entsprechenden materie zu beschäftigen! und nich nur zu sagen: ich kann das nich!

ich kann das nicht heisst übersetzt ich hab keine lust das zu lernen oder ich will das nicht

Unregistriert

Hallo Synaptic,

Ich danke dir herzlich für deine getane Arbeit für mich.

Zu deinen Bemerkungen:

Du hast natürlich das Recht mehr Eigeninitiative zu sehen.
Nun ist es aber nicht so, dass ich GAR nichts vorzuweisen hatte.

Allerdings musst du dir auch eingestehen, dass du nicht dazu verpflichtet bist, mir zu helfen. Wenn du es dann trotzdem tust, worüber ich dir sehr dankbar bin, darfst du dich meines erachtens nicht beklagen. Ausserdem ist doch ein Forum genau für Personen wie mich da, die an einen Punkt gelangt sin, an dem sie an ihre fachlichen Grenzen stossen.
Das Argument, dass ich mich mehr einarbeiten soll verstehe ich schon, nur erlauben es meine Arbeitszeiten und -umstände leider nicht. Dies näher zu erläutern erachte ich als Rechtfertigung meinerseits und insofern als nicht notwendig an dieser Stelle.

Es bleibt zu bemerken, dass ich genau das meine was ich sage oder schreibe. "Ich kann das nicht" bedeutet genau das was es aussagt, nicht mehr, nicht weniger.

Als letztes wollte ich dir noch sagen, dass dein Code mit einigen kleinen Anpassungen meinerseits funktioniert.

Grüsse,
Domi

event-handler onmouseover

Tags

Benutzer online in diesem Thema