nicht angemeldet
Image Map / hover display kombinieren
0 
Gunnar Bittersmann
0 0 
suit
0 0 0 Gunnar Bittersmann
0 0 0
Image Map / hover display kombinieren
Hallo,
mir schwebt folgendes vor: Wenn man mit der Maus über eine bestimmte Stelle einer Grafik fährt, wird an einer anderen Stelle der Seite ein Text oder Bild eingeblendet.
Folgendes gelingt mir bislang:
1. Wenn man sich mit der Maus auf der Grafik befindet, werden Text und Bild an gewünschter Stelle eingeblendet.
2. Eine andere Grafik habe ich per image map so eingeteilt, dass gewählte Stellen als Link fungieren.
Meine Frage:
ist es möglich, diese beiden Techniken so zu verbinden, dass der hover Effekt nur an einer durch die map definierten Stelle der Grafik in Kraft tritt? Bislang gelingt es mir nicht, die beiden Dinge zu kombinieren.
Die konkrete Idee ist, dass auf das Berühren der Balken auf in der Grafik je eine andere Textanzeige auslöst (siehe Link).
Im Forum habe ich nur eine Seite zu Ausklappmenus gefunden, die mir leider etwas zu kompliziert war, deshalb versuche ich es mit diesem Posting.
Vielen Dank für die Hilfe
Ich habe die Testseite zur Ansicht hier abgelegt: http://www.rubenfischer.de/xenon/
Hier der Code mit beiden Versuchen:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">
a, a:visited {}, a:hover {}
#container a.pics span {display:none; border:1; width:58px; background:none; border:1px solid #fff; text-align:center;}
#container a.pics:hover span {display:block; position:absolute; left:200px; top:400px; z-index:10;}
</style>
</head>
<body>
<div id="container">
<a class="pics" href="#nogo"><img src="logo.jpg" alt="" />
<span>
<table border=0 width="500">
<td>
<img src="bild.png " alt="Text Text Text " title="Text Text Text " />
</td>
<td>
Das Ensemble
<br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
</td>
</table>
</span>
</a>
</div>
<img src="logo.jpg" border="0" alt="Karte" usemap="#Landkarte">
<map name="Landkarte">
<area shape="rect" coords="1,1,500,100"
href="bild.png">
</map>
</body>
</html>
-
@@Blumentopf:
nuqneH
ist es möglich, diese beiden Techniken so zu verbinden, dass der hover Effekt nur an einer durch die map definierten Stelle der Grafik in Kraft tritt?
Nein, nicht mit CSS. Mit JavaScript wäre dies möglich.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
Die Angabe "en" ist falsch.
Außerdem ist sie wirkungslos, wenn das Dokument als 'text/html' ausgeliefert/verarbeitet wird. Verwende (zusätzlich) @lang. [LANGUAGE-DECL, http://de.selfhtml.org/html/xhtml/unterschiede.htm#lang@title=SELFHTML]
<table border=0 width="500">
„Was müffelt denn hier so? ... Ah, riecht nach Layouttabelle.“ [Der Martin]
Das Ensemble
<br>„"ich möchte eine überschrift sein, bitte bitte lass mich ein <hX> sein!"“ [wahsaga]
Dann kannst du auch das
<br>entsorgen.„Genau das Geräusch habe ich von mir gegeben, als ich deinen Code gelesen habe.“ [at]
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Vielen Dank für die Hinweise.
Gibt es hier irgendwo eine Anleitung, wie das mit JavaScrpt funktioniert, und nach welchem Begriff müsste ich da suchen?Die Hinweise Language Declaration werde ich mir mal näher ansehen.
-
-
-
Om nah hoo pez nyeetz, Blumentopf!
mit CSS geht das nicht. schau dir die Seite http://www.billiger-im-urlaub.de/germany/germany_map.html an.
Matthias
--
-
mit CSS geht das nicht. schau dir die Seite http://www.billiger-im-urlaub.de/germany/germany_map.html an.
Mit CSS-Sprites wäre das auch möglich, zwar etwas "unschärfer" aber dafür ohne JavaScript.
-
Om nah hoo pez nyeetz, suit!
Mit CSS-Sprites wäre das auch möglich, zwar etwas "unschärfer" aber dafür ohne JavaScript.
Falls du damit die Auswahl meinst, ACK.
Matthias
--
-
@ Mathias und Suit
Danke für die Hinweise, jetzt weiß ich zumindest, dass alles rumprobieren nicht helfen wird, um auf meinem ursprünglichen Wege zu meinem Ziel zu kommen.
Ich werde mir die Seite mit der Deutschlandkarte nochmal genauer anschauen und versuchen, mich mit JavaScript und CSS-Sprites bemühen.
Dank nochmalsPS Was bedeutet denn ACK??
-
@@Blumentopf:
nuqneH
PS Was bedeutet denn ACK??
Warum fragst du das nihct die Enzyklopedie deiner Wahl?
Wikipedia weiß es.Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain) -
Om nah hoo pez nyeetz, Blumentopf!
@ Mathias und Suit Danke für die Hinweise, jetzt weiß ich zumindest, dass alles rumprobieren nicht helfen wird, um auf meinem ursprünglichen Wege zu meinem Ziel zu kommen.
Wenn die Hoversensitiven Elemente Rechtecke sind, geht es auch ohne Javascript.
Ich werde mir die Seite mit der Deutschlandkarte nochmal genauer anschauen und versuchen, mich mit JavaScript und CSS-Sprites bemühen.
Der Quelltext ist sichtbar zur Not kannst du es auch einfach abschreiben. Den Kommentar als Copyright bitte lassen.
<!-- http://www.pseliger.de/testCases/federalStatesOfGermany.html, http://forum.de.selfhtml.org/archiv/2005/4/t105405/ -->
Matthias
--
-
Ich habe es jetzt mit JavaScript auf wie ich glaube ähnliche Weise wie bei der Deutschlandkarte gemacht mit document.getElementById.
Sieht vielleicht alles etwas umständlich und gestümpert aus, aber so habe ich das als Laie eben ausgetüftelt.
Nun funktioniert eigentlich alles so wie ich es möchte, allerdings nicht in allen Browsern. Ältere Browser (IE6) scheinen ein Problem mit transparenten .pngs zu haben, und zeigen stattdessen deckendes weiss. Firefox und IE8 malen entgegen meinen Wünschen einen blauen Rand um mein gemaptes Bild. Wie kann ich das verhindern?
Opera und Safari (je die aktuelle Version) stellen die Seite so dar wie ich es wünsche.
Wäre es sinnvoll, Nutzer von älteren Browsern wie IE6 auf eine vereinfachte Seite umzuleiten, oder generell statt transparenter Overlays das ganze Bild auszutauschen?Hier der Link
und hier der Code, Danke für die Hilfen!
<html>
<head>
<style type="text/css">
a:link { text-decoration:none; font-style:italic; color:grey; }
a:visited { text-decoration:none; font-style:italic;}
a:hover { text-decoration:none; font-style:normal;}
a:active { text-decoration:none; font-style:normal;}
a:focus { text-decoration:none; font-style:normal; }
</style><script language="JavaScript">
function show(el) {
document.getElementById(el).style.display = "block";
}
function hide(el) {
document.getElementById(el).style.display = "none";
}
</script>
</head>
<body>
<map name="colorMap"><area name="Feld01"coords="1,1,65,142"
href="javascript:show('menu')"
target="_top"
onMouseOver="show('balken01');show('feld01');;hide('feld02');hide('feld03');hide('feld04');hide('feld05');hide('feld06')"
onmouseout="hide('balken01');"><area name="Feld02"coords="65,1,105,142"
href="javascript:show('menu')"
target="_top"
onMouseOver="show('balken02');show('feld02');hide('feld01');hide('feld03');hide('feld04');hide('feld05');hide('feld06');"
onmouseout="hide('balken02');"><area name="Feld03"coords="105,1,200,142"
href="javascript:show('menu')"
target="_top"
onMouseOver="show('balken03');show('feld03');hide('feld01');hide('feld02');hide('feld04');hide('feld05');hide('feld06');"
onmouseout="hide('balken03');"><area name="Feld04"coords="200,1,400,142"
href="javascript:show('menu')"
target="_top"
onMouseOver="show('balken04');show('feld04');hide('feld01');hide('feld02');hide('feld03');hide('feld05');hide('feld06');"
onmouseout="hide('balken04');"><area name="Feld05"coords="400,1,800,142"
href="javascript:show('menu')"
target="_top"
onMouseOver="show('balken05');show('feld05');hide('feld01');hide('feld02');hide('feld03');hide('feld04');hide('feld06');"
onmouseout="hide('balken05');"><area name="Feld06"coords="800,1,946,142"
href="javascript:show('menu')"
target="_top"
onMouseOver="show('balken06');show('feld06');hide('feld01');hide('feld02');hide('feld03');hide('feld04');hide('feld05');"
onmouseout="hide('balken06');"></map>
<div id="menu" style="display:none; position:absolute;left:50px;top:280px;"> <a href="javascript:show('feld01');hide('feld02');hide('feld03');hide('feld04');hide('feld05');hide('feld06');">Feld01</a><br><br> <a href="javascript:show('feld02');hide('feld01');hide('feld03');hide('feld04');hide('feld05');hide('feld06');">Feld02</a><br><br> <a href="javascript:show('feld03');hide('feld02');hide('feld01');hide('feld04');hide('feld05');hide('feld06');">Feld03</a><br><br> <a href="javascript:show('feld04');hide('feld02');hide('feld03');hide('feld01');hide('feld05');hide('feld06');">Feld04</a><br><br> <a href="javascript:show('feld05');hide('feld02');hide('feld03');hide('feld04');hide('feld01');hide('feld06');">Feld05</a><br><br> <a href="javascript:show('feld06');hide('feld02');hide('feld03');hide('feld04');hide('feld05');hide('feld01');">Feld06</a><br><br> <a href="javascript:hide('feld01');hide('feld02');hide('feld03');hide('feld04');hide('feld05');hide('feld06');hide('menu')">Start</a> </div> <div style="position:absolute; left:00px; top:100px; "><img src="grafiken/logo.jpg" alt="Ensemble Xenon" align="top" usemap="#colorMap">
</div><div id="feld01" style="background-color:#63cdf4; width:200px; height:200px;display:none; position:absolute; left:400px; top:300px; "> <table border=0 width="500"> <td valign="top"> <img src="grafiken/bild.png " alt="Bild" /> </td> <td valign="top"> <h1>Feld01</h1> Blindtext </td> </table> </div> <div id="feld02" style="background:#99a8d3; width:200px; height:200px;display:none; position:absolute; left:400px; top:300px; "> <table border=0 width="500"> <td valign="top"> <img src="grafiken/bild.png " alt="Bild"/> </td> <td valign="top"> <h1>Feld02</h1> Blindtext </td> </table> </div> <div id="feld03" style="background:#9476b2; width:200px; height:200px;display:none; position:absolute; left:400px; top:300px; "> <table border=0 width="500"> <td valign="top"> <img src="grafiken/bild.png " alt="Bild"/> </td> <td valign="top"> <h1>Feld03</h1> Blindtext </td> </table> </div> <div id="feld04" style="background-color:#b77cb4; width:200px; height:200px;display:none; position:absolute; left:400px; top:300px; "> <table border=0 width="500"> <td valign="top"> <img src="grafiken/bild.png " alt="Bild"/> </td> <td valign="top"> <h1>Feld04</h1> Blindtext </td> </table> </div> <div id="feld05" style="background:#b34896; width:200px; height:200px;display:none; position:absolute; left:400px; top:300px; "> <table border=0 width="500"> <td valign="top"> <img src="grafiken/bild.png " alt="Bild"/> </td> <td valign="top"> <h1>Feld05</h1> Blindtext </td> </table> </div> <div id="feld06" style="background:#d12e99; width:200px; height:200px;display:none; position:absolute; left:400px; top:300px; "> <table border=0 width="500"> <td valign="top"> <img src="grafiken/bild.png " alt="Bild" /> </td> <td valign="top"> <h1>Feld06</h1> Blindtext </td> </table> </div> <div id="balken01" style="display:none; position:absolute; left:00px; top:100px; "> <img src="grafiken/balken01.png " alt="Highlight" title="Highlight " usemap="#colorMap" /> </div> <div id="balken02" style="display:none; position:absolute; left:00px; top:100px; "> <img src="grafiken/balken02.png " alt="Highlight" title="Highlight " usemap="#colorMap" /> </div> <div id="balken03" style="display:none; position:absolute; left:00px; top:100px; "> <img src="grafiken/balken03.png " alt="Highlight" title="Highlight " usemap="#colorMap" /> </div> <div id="balken04" style="display:none; position:absolute; left:00px; top:100px; "> <img src="grafiken/balken04.png " alt="Highlight" title="Highlight " usemap="#colorMap" /> </div> <div id="balken05" style="display:none; position:absolute; left:00px; top:100px; "> <img src="grafiken/balken05.png " alt="Highlight" title="Highlight " usemap="#colorMap" /> </div> <div id="balken06" style="display:none; position:absolute; left:00px; top:100px; "> <img src="grafiken/balken06.png " alt="Highlight" title="Highlight " usemap="#colorMap" /> </div><noscript>
Um diese Webseite vollständig anzuzeigen muss JavaScript aktiviert sein.
</noscript></body>
</html>-
Om nah hoo pez nyeetz, Blumentopf!
Es fehlt der doctype und die Angabe des Zeichensatzes
verwende nach Möglichkeit keine inline-style-Angaben
die Tabellen sind überflüssig
Der Rahmen gehört zur Grafik und ließe sich mit img {border: none} entfernen.
eine IE6-Unterstützung halte ich nicht für notwendig.
Matthias
--
-
Hallo Matthias,
Danke für die hilfreiche Rückmeldung..
bevor ich mich erneut mit einer falschen Declaration blamiere, wollte ich den entsprechenden Artikel dazu lesen. Deswegen habe ich's zunächst einfach weggelassen. Ist jetzt aber geschehen und wurde eingefügt...
Bezüglich der inline-Style-Angaben meinst Du, dass man besser alles was man braucht am Anfang definiert, und dann nach Bedarf verwendet?
Die Tabellen dann durch Positionsangaben ersetzen..?Vielen Dank für den Tip mit dem Rahmen, den bin ich nun los.
»» eine IE6-Unterstützung halte ich nicht für notwendig.
und was ist mit den JavaScriptNegierern? Würdest Du denen eine funktionierende Alternative anbieten, oder einfach auf die Notwendigkeit von aktiviertem JavaScript zur Darstellung verweisen?
Grüße
-
Om nah hoo pez nyeetz, Blumentopf!
Bezüglich der inline-Style-Angaben meinst Du, dass man besser alles was man braucht am Anfang definiert, und dann nach Bedarf verwendet?
Das sinnvollste sind separate CSS-Dateien, die braucht man nämlich nur einmal zu pflegen und gelten für jede Seite deines Projektes.
Die Tabellen dann durch Positionsangaben ersetzen..?
Kann man so pauschal nicht sagen, aber es lässt sich jedes Element positionieren, entweder durch position: oder einfach durch die Reihenfolge, wie sie im Code erscheinen.
und was ist mit den JavaScriptNegierern? Würdest Du denen eine funktionierende Alternative anbieten, oder einfach auf die Notwendigkeit von aktiviertem JavaScript zur Darstellung verweisen?
Ich würde dafür sorgen, dass die Seite auch ohne JS benutzbar ist (zwar nicht so komfortabel, ...)
Matthias
--
-
Om nah hoo pez nyeetz, Blumentopf!
Es gibt für deinen Fall auch eine Lösung ohne Javascript
Kurzer Anriss: Über die Grafik werden an die entsprechenden Stellen Elemente gelegt, DIV bietet sich an, sodass du folgende Struktur hast.
<IMG> // Die Grafik mit dem Text.
<div> // ein Div mit einem farbigen Strich als Hintergrund // verwende CSS-Sprites für den Hover-Effekt <div> // Hier kommt das rein, was bei dir Tabelle ist. // Sorge dafür, dass diese beiden Divs direkt aneinander grenzen </div> </div>
Dieser Artikel könnte für dich auch interessant sein.
Beachte auch die Überlegungen zur Barrierefreiheit. Eine weitere Möglichkeit findest du in diesem Artikel.
Matthias
--
-
-
@@apsel:
nuqneH
Es fehlt […] die Angabe des Zeichensatzes
Minichten. Der Zeichensatz von (X)HTML-Dokumenten kann und muss gar nicht angegeben werden. Er ist auch bei allen (X)HTML-Dokumenten derselbe. [DOC-CHARSET]
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Om nah hoo pez nyeetz, Gunnar Bittersmann!
Es fehlt […] die Angabe des Zeichensatzes
Minichten. Der Zeichensatz von (X)HTML-Dokumenten kann und muss gar nicht angegeben werden. Er ist auch bei allen (X)HTML-Dokumenten derselbe. [DOC-CHARSET]
Ich habe die Zeichenkodierung gemeint. Meinen und schreiben ist nicht dasselbe, dennoch weiß ich, dass Zeichensätze und Zeichencodierungen verschiedene Dinge sind. Matthias
--
-
-
-
-
-
-
-
-