• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

"onmouseover" und "onclick" kombiniert

H

hienli

Neues Mitglied
Hallo zusammen,

Ich bin ein "absolute beginner" und brauche eure Hilfe.

Auf meiner Homepage (Quellcode existiert) möchte ich auf der Frontpage einen strukturellen Überblick über meine Seite erstellen. Dafür habe ich ein Bild hinterlegt und verschiedene Stichworte (welche meine Subpages im Verzeichnisbaum repräsentieren).

Meine Idee ist nun folgende:

Wenn ich mit der Maus über eines der Stichworte fahre, soll es mit "unter dem Bild" eine Kurzbeschreibung der entsprechenden Subpage öffnen. (und natürlich wieder schliessen und eine andere öffnen, sobald ich über ein anderes Stichwort fahre!)
Wenn ich mich nun für eine dieser Subpages entscheide, möchte ich per Mausclick auf das entsprechende Stichwort auf diese Subpage gelangen.

Leider habe ich keine Ahnung, wie ich das umsetzen soll.

Vielen Dank im Voraus für eure Inputs!!

Freundliche Grüsse,
hienli
 
Das Bild selbst kannst Du mit einer ImageMap überlegen. Dadurch sind Verlinkungen auf dem Bild möglich. Innerhalb der Links gibst Du dann per JavaScript an, was unterhalb des Bildes angezeigt werden soll (onmouseover-Eventhandler).
 
Hallo,

Erstmal vielen Dank für deine Hilfe.

Allerdings musst du mir erklären, wie ich das mit der ImageMap machen muss. Ich habe noch nie damit gearbeitet und weiss nicht genau, von was du sprichst. Sorry!
Ich habe also mein vorhandenes Bild als .jpg abgespeichert und möchte es mit Links versehen. Wie geht es weiter?!
Das mit "onmouseover - eventhandler" versuche ich mal selbst heraus zu finden!

Gruss,
hienli
 
Guten Morgen,

Vielen Dank Gilles, das war ein hilfreicher Link.
Ich war auch auf selfhtml.org, habe diese Seite aber nicht gefunden, wusste aucht recht, nach was suchen.

Sensitive Grafiken zu hinterlegen habe ich nun geschafft.
Wie aber kann ich mein zweites Ziel erreichen, dass mir, beim drüberfahren mit der Maus, eine kurze Content- Beschreibung der Subpages UNTER dem Bild angezeigt wird?!

Folgendes habe ich integriert:

HTML: 
<HEAD>
        <TITLE></TITLE>
    </HEAD>
    <BODY class="">
        <P><IMG style="WIDTH: 450px; HEIGHT: 318px" height=318 alt=NoReference src="/de/leben/aktuariat/PublishingImages/original.png" width=450 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="" originalPath="" ??=" originalAttribute=" href? originalpath=""></MAP></P>
    </BODY>


Gruss,
hienli
 
Zuletzt bearbeitet:
Ich habe noch eine weitere Fläche unterhalb des Bildes eingefügt, in dem ich nun die Kurzbeschreibungen der einzelnen Subpages (welche oben durch ihre Links vertreten sind) anzeigen möchte, sobald man oben über die entsprechenden Flächen fährt!

[AREA shape=RECT coords=3,322,449,513] (Hier drauf soll der Text zu stehen kommen)

How does that work???

Gruss,
hienli

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>
 
Zuletzt bearbeitet:
Könntest du bitte deine 2 Beiträge bearbeiten und um den HTML Code folgendes schreiben :)

[*HTML]

dein Code

[*/HTML]

(* bitte entfernen damits funktioniert)

Bewirkt dass der HTML code farblich hinterlegt und für uns sinnvoll angezeigt wird ;)
 
Huch lol :D
Vielelicht hab ich mich ein wenig doof ausgedrückt :)
diese [*HTML] geschichte ist vom Forum sodass html-"Code" wie <html><body> usw besser dargestellt werden :D
Hast du wohl nun alle tags umgewandelt :D

Hier als Beispiel mal:

HTML: 
<html>
  <head>
  <head>
  <body>
    <p> Mein HTML Code </p>
  </body>
</html>
Der Kasten oben sieht folgendermaßen aus :D

[*HTML]
<html>
<head>
<head>
<body>
<p> Mein HTML Code </p>
</body>
</html>
[*/HTML]

* wieder wegnehmen dafür :D Vielleicht noch einmal deins bearbeiten bitte :)

----

Aber schonmal zu deinem problem. Das ganze kannst du über Javascript machen. Da gibt es den Event-handler onmouseover für. Wie so etwas aussehen könnte, kann ich dir nachher mal anhand eines Beispiels zeigen. Bin leider erst um halb 4 zu hause :D
Vielelicht will das ja inzwischen wer anders zeigen :)
 
Hallo Gilles,

Sooo.. auch ich habe es endlich geschafft, meine Beiträge nach deinen Wünschen anzupassen. ;-)

Dass es mit Javasript klappt, habe ich auch schon gesehen, aber irgendwie habe ich so meine Probleme mit der Integration des entsprechenden Codes!

Gruss,
hienli
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben