Onmouseover in div- bzw. map-tag

[Noz]

Hallo Helfer,
ich hoffe ich bin im richtigen Themenbereich.
Ich bin unwissend.
Mein Problem: Ich möchte einen Onmouseover-Effekt, von dem ich nicht weiß, ob er überhaupt machbar ist.

Es gibt ein Hintergrundbild, auf dem mehrere kleinere Bilder mit Hilfe von div-tags positioniert sind. Sie sind kreisförmig angeordnet und lassen in der Mitte ein Stück des Hintergrundbildes frei.
Innerhalb dieser kleinen Bilder sind "hotspots" mit Hilfe von map-tags gekennzeichnet.
Fährt der Mauszeiger über einen dieser hotspots, soll in der Mitte des Kreises ein neues Bild auftauchen. Das neue Bild soll das alte nicht überdecken, es soll zusätzlich erscheinen.

Ich habe auf verschiedenen Hilfeseiten und in verschiedenen Foren gesucht, aber bisher keine Lösung finden können.
Ich hoffe ich konnte mich verständlich ausdrücken und bin für jeden Tip dankbar.

N

[Der Martin]

Hallo,

ich hoffe ich bin im richtigen Themenbereich.

weiß ich noch nicht, aber gar so falsch scheint's nicht zu sein. ;-)

Ich bin unwissend.

Oh, das sind wir alle irgendwie.

Es gibt ein Hintergrundbild, auf dem mehrere kleinere Bilder mit Hilfe von div-tags positioniert sind.

Zwischenfrage: Wozu die div-Elemente? Vermutlich kannst du die Bilder ebensogut direkt positionieren und anordnen. Nach deiner Beschreibung könnte ich mir auch vorstellen, dass die kreisförmig angeordneten Bilder als Liste (ol oder ul) notiert werden; in diesem Fall würden die li-Elemente positioniert.

Sie sind kreisförmig angeordnet und lassen in der Mitte ein Stück des Hintergrundbildes frei.
Innerhalb dieser kleinen Bilder sind "hotspots" mit Hilfe von map-tags gekennzeichnet.
Fährt der Mauszeiger über einen dieser hotspots, soll in der Mitte des Kreises ein neues Bild auftauchen. Das neue Bild soll das alte nicht überdecken, es soll zusätzlich erscheinen.

Was meinst du mit "nicht überdecken, sondern zusätzlich erscheinen"? Wenn du ein Bild an einer bestimmten Stelle einblendest, überdeckt es fast zwangsläufig das, was vorher an dieser Stelle angezeigt wurde. Oder ist das zusätzliche Bild halbtransparent? Oder hat es transparente Bereiche, die den Hintergrund durchscheinen lassen?
Ich habe momentan noch Probleme, genau zu verstehen, was du dir vorstellst.

Grundsätzlich ist die Idee wahrscheinlich nicht weiter schwierig umzusetzen: Die area-Elemente bekommen je einen onmouseover- und onmouseout-Handler, der durch Manipulation der style-Eigenschaften eines weiteren Bildes dieses zwischen unsichtbar und sichtbar hin- und herschaltet.

Ich habe auf verschiedenen Hilfeseiten und in verschiedenen Foren gesucht, aber bisher keine Lösung finden können.

Das wäre auch zuviel verlangt. Du wirst abstrahieren und Lösungen, die ungefähr in deine Richtung gehen, für dich anpassen müssen.

Ich hoffe ich konnte mich verständlich ausdrücken

Noch nicht so hundertprozentig.

So long,
 Martin

[Noz]

Oh das ging ja schnell!

Es gibt ein Hintergrundbild, auf dem mehrere kleinere Bilder mit Hilfe von div-tags positioniert sind.

Zwischenfrage: Wozu die div-Elemente? Vermutlich kannst du die Bilder ebensogut direkt positionieren und anordnen. Nach deiner Beschreibung könnte ich mir auch vorstellen, dass die kreisförmig angeordneten Bilder als Liste (ol oder ul) notiert werden; in diesem Fall würden die li-Elemente positioniert.

Zwischenantwort: Die div-Elemente waren ein Tip. Die einzelnen Bilder müssen passgenau aneinanderkommen, weil sie gemeinsam ein großes Bild darstellen. Falls eine so genaue Positionierung auch ohne div möglich ist, will ich es versuchen.

Was meinst du mit "nicht überdecken, sondern zusätzlich erscheinen"? Wenn du ein Bild an einer bestimmten Stelle einblendest, überdeckt es fast zwangsläufig das, was vorher an dieser Stelle angezeigt wurde. Oder ist das zusätzliche Bild halbtransparent? Oder hat es transparente Bereiche, die den Hintergrund durchscheinen lassen?

Das neue Bild soll nicht an derselben Stelle erscheinen, an der der onmouseover-Effekt passiert, sondern an einer anderen Stelle. Also: Ich gehe mit der Maus über ein Bild, dieses Bild bleibt sichtbar, und gleichzeitig erscheint an einer anderen Stelle ein anderes, ein zusätzliches Bild.
Das Problem wird noch größer: Jeder der Hotspots auf den Bildern im Kreis soll einen onmouseover-Effekt bekommen. Jeder mit einem anderen Bild, aber immer an der gleichen Stelle (in der Mitte des Kreises).
Ich hoffe es ist ein wenig deutlicher geworden?

[Der Martin]

Hi,

bitte lass doch die Zitatmarkierungen, wie sie sind, damit man besser erkennt, was zitiert ist und was du neu hinzugefügt hast. Danke.

Zwischenfrage: Wozu die div-Elemente? [...]
Zwischenantwort: Die div-Elemente waren ein Tip. Die einzelnen Bilder müssen passgenau aneinanderkommen, weil sie gemeinsam ein großes Bild darstellen. Falls eine so genaue Positionierung auch ohne div möglich ist, will ich es versuchen.

Jedes Element lässt sich mit CSS positionieren. Ob das nun ein div, ein li oder ein img-Element ist, spielt zunächst keine Rolle.

Was meinst du mit "nicht überdecken, sondern zusätzlich erscheinen"?
Das neue Bild soll nicht an derselben Stelle erscheinen, an der der onmouseover-Effekt passiert, sondern an einer anderen Stelle.

Ja, das war anhand deiner Beschreibung klar.

Also: Ich gehe mit der Maus über ein Bild, dieses Bild bleibt sichtbar, und gleichzeitig erscheint an einer anderen Stelle ein anderes, ein zusätzliches Bild.
Das Problem wird noch größer: Jeder der Hotspots auf den Bildern im Kreis soll einen onmouseover-Effekt bekommen. Jeder mit einem anderen Bild, aber immer an der gleichen Stelle (in der Mitte des Kreises).

Wieso ist das ein Problem?

Ich hoffe es ist ein wenig deutlicher geworden?

Ja, ich denke schon. Geht sogar komplett ohne Javascript, rein mit CSS.

Dann denke ich mal ins Unreine. Ich sehe vor meinem geistigen Auge eine Liste (ol-Element). Jedes li-Element enthält zwei Bilder; eins ist außen auf einem Kreis positioniert, eines in der Mitte.

Das HTML dazu könnte trivial aussehen (ich hab's mal auf nur 4 Bilder außenrum beschränkt):

<ol id="karussell">  
 <li id="item00">  
  <img src="bild0.jpg" alt="1" class="menu" width="80" height="80">  
  <img src="hover0.jpg" alt="h1" class="hover" width="80" height="80">  
 </li>  
 <li id="item01">  
  <img src="bild1.jpg" alt="2" class="menu" width="80" height="80">  
  <img src="hover0.jpg" alt="h2" class="hover" width="80" height="80">  
 </li>  
 <li id="item02">  
  <img src="bild2.jpg" alt="3" class="menu" width="80" height="80">  
  <img src="hover0.jpg" alt="h3" class="hover" width="80" height="80">  
 </li>  
 <li id="item03">  
  <img src="bild3.jpg" alt="4" class="menu" width="80" height="80">  
  <img src="hover0.jpg" alt="h4" class="hover" width="80" height="80">  
 </li>  
</ol>

Das zugehörige CSS wird ein wenig umfangreicher und wächst natürlich mit der Zahl der Listenelemente:

#karussell  
 { position: relative;  
   width:    400px;  
   height:   400px;  
   background-color: #8080FF;  
   list-style-type: none;  
   margin: 0;  
   padding: 0;  
 }  
#karussell .menu  
 { position: absolute;  
   width:    80px;  
   height:   80px;  
 }  
#karussell .hover  
 { position: absolute;  
   width:    80px;  
   height:   80px;  
   top:      160px;  
   left:     160px;  
   display:  none;  
 }  
#item00 .menu  
 { top:      160px;  
   left:     0px;  
 }  
#item01 .menu  
 { top:      0px;  
   left:     160px;  
 }  
#item02 .menu  
 { top:      160px;  
   left:     320px;  
 }  
#item03 .menu  
 { top:      320px;  
   left:     160px;  
 }  
#item00:hover .hover  
 { display:  block;  
 }  
#item01:hover .hover  
 { display:  block;  
 }  
#item02:hover .hover  
 { display:  block;  
 }  
#item03:hover .hover  
 { display:  block;  
 }  

Ich gehe fest davon aus, dass es noch elegantere Lösungen gibt; das ist nur, was mir so auf die Schnelle einfiel. Für IE6 und älter versagt der Ansatz, weil diese Dinos :hover nur für Links unterstützen.

So long,
 Martin

[Noz]

Hallo,
ich bedanke mich für eure Hilfe, das Problem ist gelöst!
Ich habe nun die einzelnen area-tags in div-tags gelegt, so dass ich sie positionieren und ihnen gleichzeitig den :hover-Befehl zuordnen konnte.
Am Ende war es also eine Kombination eurer Ratschläge, wie Martin schon sagte.
Vielen Dank nochmal!

[Gunnar Bittersmann]

@@Noz:

nuqneH

Zwischenantwort: Die div-Elemente waren ein Tip.

Wann immer du den Tip „Mach ma’ ’n div drum“ (um ein einzelnes Element) bekommst, solltest du dich kurz bedanken, den Tip ignorieren und dich zukünftig von diesem Menschen fernhalten.

Die einzelnen Bilder müssen passgenau aneinanderkommen, weil sie gemeinsam ein großes Bild darstellen. Falls eine so genaue Positionierung auch ohne div möglich ist, will ich es versuchen.

Natürlich ist dies möglich. Genauso wie 'div'-Elemente kannst du auch 'img'-Elemente positionieren.

Du solltest es dennoch nicht tun, sondern im Grafikprogramm deiner Wahl aus allen deinen Bildern (inkl. Hintergrundbild, nicht aber die in der Mitte erscheinenden) eins machen. Das ist dann wesentlich kleiner als die Summe der Einzelbilder (in etwa so groß wie das Hintergrundbild vorher schon war) und spart auch HTTP-Abfragen. [PERFORMANCE-BP1] Und du hast alles passgenau.

Qapla'

[Noz]

Die einzelnen Bilder müssen passgenau aneinanderkommen, weil sie gemeinsam ein großes Bild darstellen. Falls eine so genaue Positionierung auch ohne div möglich ist, will ich es versuchen.

Natürlich ist dies möglich. Genauso wie 'div'-Elemente kannst du auch 'img'-Elemente positionieren.

Du solltest es dennoch nicht tun, sondern im Grafikprogramm deiner Wahl aus allen deinen Bildern (inkl. Hintergrundbild, nicht aber die in der Mitte erscheinenden) eins machen. Das ist dann wesentlich kleiner als die Summe der Einzelbilder (in etwa so groß wie das Hintergrundbild vorher schon war) und spart auch HTTP-Abfragen. [PERFORMANCE-BP1] Und du hast alles passgenau.

Dazu eine Frage: Ist es denn möglich, über mehreren hotspots in einem Bild verschiedene onmouseover-Effekte auszuführen? Dann wäre es natürlich einfacher, nur habe ich bisher gedacht, dass ein onmouseover nicht auf einen hotspot, sondern lediglich auf ein ganzes Bild anzuwenden ist?

[Der Martin]

Hallo,

Du solltest es dennoch nicht tun, sondern im Grafikprogramm deiner Wahl aus allen deinen Bildern (inkl. Hintergrundbild, nicht aber die in der Mitte erscheinenden) eins machen. Das ist dann wesentlich kleiner als die Summe der Einzelbilder (in etwa so groß wie das Hintergrundbild vorher schon war) und spart auch HTTP-Abfragen. [PERFORMANCE-BP1] Und du hast alles passgenau.
Dazu eine Frage: Ist es denn möglich, über mehreren hotspots in einem Bild verschiedene onmouseover-Effekte auszuführen?

ja, sicher. Die Javascript-Lösung mit onmouseover-Handler kannst du selbstverständlich auch an die area-Elemente einer Imagemap knüpfen. Nur die reine CSS-Lösung, die ich angedeutet habe, ist dann nicht möglich; dafür wäre es erforderlich, dass das Bild, das zusätzlich erscheinen soll, *Inhalt* bzw. Kindelement des area-Elements wäre. Aber area ist als leeres Element definiert. Es kann also keine Nachfahren haben, die man mit der Pseudoklasse :hover erfassen könnte.

Dann wäre es natürlich einfacher, nur habe ich bisher gedacht, dass ein onmouseover nicht auf einen hotspot, sondern lediglich auf ein ganzes Bild anzuwenden ist?

Dann hast du den Gedanken nicht zu Ende gedacht. ;-)

Ciao,
 Martin

[Noz]

Hallo

Du solltest es dennoch nicht tun, sondern im Grafikprogramm deiner Wahl aus allen deinen Bildern (inkl. Hintergrundbild, nicht aber die in der Mitte erscheinenden) eins machen. Das ist dann wesentlich kleiner als die Summe der Einzelbilder (in etwa so groß wie das Hintergrundbild vorher schon war) und spart auch HTTP-Abfragen. [PERFORMANCE-BP1] Und du hast alles passgenau.
Dazu eine Frage: Ist es denn möglich, über mehreren hotspots in einem Bild verschiedene onmouseover-Effekte auszuführen?

ja, sicher. Die Javascript-Lösung mit onmouseover-Handler kannst du selbstverständlich auch an die area-Elemente einer Imagemap knüpfen.

Ok, das war hilfreich. Mal sehen ob ich alles verstanden habe: Ich sollte ein Gesamtbild machen, in dem ich die hotspots markiere. (Kann man auf einem HG-Bild hotspots platzieren?) An die area-Elemente knüpfe ich dann "Die Javascript-Lösung mit onmouseover-Handler". Wie?

[Gunnar Bittersmann]

@@Noz:

nuqneH

Mal sehen ob ich alles verstanden habe: Ich sollte ein Gesamtbild machen, in dem ich die hotspots markiere.

Ja.

(Kann man auf einem HG-Bild hotspots platzieren?)

Nein. Das Gesamtbild müsste ein 'img'-Element mit @usemap sein.

An die area-Elemente knüpfe ich dann "Die Javascript-Lösung mit onmouseover-Handler". Wie?

<area shape="…" coords="…" onmouseover="…"/>. Noch besser: HTML und JavaScript getrennt.

Es bietet sich aber an, das Bild im Hintergrund zu lassen und unsichtbare clickbare Bereiche draufzulegen. Dann kannst du auch die von Martin vorgeschlagene CSS-Lösung verwenden (abgewandelt):

<ul id="foo">  
  <li id="area1"><img src="…" alt=""/></li>  
  <li id="area2"><img src="…" alt=""/></li>  
</ul>

mit

#foo  
{  
  background: url(…);  
  width: …;  
  height: …;  
  position: relative;  
}  
  
#foo li  
{  
  position: absolute;  
}  
  
#foo li img  
{  
  opacity: 0;  
  position: absolute;  
}  
  
#area1  
{  
  width: …;  
  height: …;  
  left: …;  
  top: …;  
}  
  
#area1:hover img  
{  
  left: …;  
  top: …;  
  opacity: 1;  
}  
  
#area2  
{  
  width: …;  
  height: …;  
  left: …;  
  top: …;  
}  
  
#area2:hover img  
{  
  left: …;  
  top: …;  
  opacity: 1;  
}

Vermutlich sollen da Links rein?

<ul id="foo">  
  <li id="area1"><a href="…">Link 1</a> <img src="…" alt=""/></li>  
  <li id="area2"><a href="…">Link 2</a> <img src="…" alt=""/></li>  
</ul>

Die Linktitel sollten vorhanden sein und mit CSS versteckt werden:

#foo li a  
{  
  opacity: 0;  
}

Qapla'

[Felix Riesterer]

Liebe(r) Noz,

meinst Du etwas in dieser Art?

Wir haben uns ein JavaScript geschrieben, das uns das <img>-Element der Image-Map onmouseover entsprechend austauscht. Vielleicht wäre das etwas für Dich?

Liebe Grüße,

Felix Riesterer.

[Noz]

Liebe(r) Noz,

meinst Du etwas in dieser Art?

Wir haben uns ein JavaScript geschrieben, das uns das <img>-Element der Image-Map onmouseover entsprechend austauscht. Vielleicht wäre das etwas für Dich?

Liebe Grüße,

Felix Riesterer.

Hallo Felix,
kurze Anmerkung vorweg: In Opera funktioniert dein onmouseover-Effekt nicht.
Erst nachdem ich deinen link in IE geöffnet habe, habe ich verstanden was du meinst. Und ich glaube, das ist ziemlich genau das, was ich suche. Wie habt ihr das gemacht? (Und hast du eine Idee, warum es in Opera nicht geht?)
Gruß, (liebe) Noz

[Felix Riesterer]

Liebe Noz,

etwas in dieser Art?

kurze Anmerkung vorweg: In Opera funktioniert dein onmouseover-Effekt nicht.

ooooch Mönsch! Opera habe ich zum Testen schon länger nicht mehr eingesetzt. Aber in den nächsten Tagen kann ich ja mal nachsehen, warum Opera streikt.

Wie habt ihr das gemacht?

Naja, wir (ein Schüler und ich) haben ein JavaScript geschrieben, das nach dem Laden der Seite alle <map>-Elemente durchforstet und "bearbeitet", sprich mit den mouseover-Eventhandlern ausrüstet. Die URLs der Hover-Bilder werden nach einem bestimmten (anpassbaren) Schema voreingestellt.

Die Hover-Bilder werden einzeln in Handarbeit gefertigt.

Liebe Grüße,

Felix Riesterer.

[Kai345]

[latex]Mae  govannen![/latex]

kurze Anmerkung vorweg: In Opera funktioniert dein onmouseover-Effekt nicht.

ooooch Mönsch! Opera habe ich zum Testen schon länger nicht mehr eingesetzt. Aber in den nächsten Tagen kann ich ja mal nachsehen, warum Opera streikt.

Es erscheint dann stattdessen beim Hovern des entsprechenden Bereiches ein Link-Verweis im Statusbar, bei dem man annehmen könnte, daß man über diesen Link per Klick zum entsprechenden Ziel gelangen könnte, in Wirklichkeit erhält man aber jedes Mal einen 404. Auch nicht schön. Hier sollte dann die entsprechende Ressource aufrufbar sein.

Cü,

Kai

[Felix Riesterer]

Lieber Kai345,

Es erscheint dann stattdessen beim Hovern des entsprechenden Bereiches ein Link-Verweis im Statusbar,

das soll bei Image-Maps ja auch so sein. Schade, dass das mit der Hover-Grafik (noch) nicht klappt.

bei dem man annehmen könnte, daß man über diesen Link per Klick zum entsprechenden Ziel gelangen könnte, in Wirklichkeit erhält man aber jedes Mal einen 404.

Bis auf einen Link sind die Zieldokumente noch nicht erstellt - ja, da sollten 404er kommen. Dieser virtuelle Rundgang ist noch sehr stark "work in progress". Die Erstellung der Hovergrafiken dauert und ist eine Menge Arbeit. Von daher wird uns dieses Projekt noch eine gute Weile lang beschäftigen, was für eine AG durchaus sinnvoll ist.

Liebe Grüße,

Felix Riesterer.

[Noz]

Naja, wir (ein Schüler und ich) haben ein JavaScript geschrieben, das nach dem Laden der Seite alle <map>-Elemente durchforstet und "bearbeitet", sprich mit den mouseover-Eventhandlern ausrüstet. Die URLs der Hover-Bilder werden nach einem bestimmten (anpassbaren) Schema voreingestellt.

Falls es möglich ist, würde ich gern sehen wie das im Dokument aussieht - könntest du das hier reinstellen?
Dank und Gruß

[Felix Riesterer]

Liebe Noz,

Falls es möglich ist, würde ich gern sehen wie das im Dokument aussieht

was hindert Dich daran, in den Quelltext der Seite zu schauen?

Liebe Grüße,

Felix Riesterer.