Image Map mit Navigation

F

Florian123

Mitglied
Hallo zusammen,

ich habe eine Bilddatei mit diversen Verweisen erstellt (siehe verkürzten Quellcode).

Nun möchte ich gerne, dass automatisch rechts neben der Grafik oder sogar in der Grafik ein Fenster bzw. Art "Sprechblase" (wie bei GoogleMaps) mit speziellen Informationen angezeigt werden (pro Verweis).
Es soll eine Telefonnr., E-Mailadresse, Bild und Anschrift angezeigt werden.

Wie kann ich diese Sprechblase bzw. rechte extra Fenster erstellen mit den speziellen Informationen (pro Verweis).

Vielen Dank für die Hilfe.

Gruß

Florian

Quellcode:

Code: 
<body>

  <img src="raumplan.JPG" alt="Raumplan" usemap="#Raumplan">
  <map name="Raumplan">
    <area shape="rect" coords="120,146,192,202"
          href="http://www.maps.google.de/" alt="Bild" title="Name1">
  </map>

</body>
 
Moin,

vielen Dank für die schnelle Antwort.

Gibt es eine leichtere, einfachere Lösung?

Kann man <div> Containern arbeiten. Wenn ja, wie verbindet man ein div-Container mit einer Image Map?

Danke nochmals.

Florian
 
Florian123 hat gesagt.:
Gibt es eine leichtere, einfachere Lösung?

Kann man <div> Containern arbeiten. Wenn ja, wie verbindet man ein div-Container mit einer Image Map?
Zum Vergrößern anklicken....
Mmh... :confused:

http://www.walterzorn.de/tooltip/tooltip.htm hat gesagt.:
Weitergehende Gestaltung
5. Alternative: HTML-Element in Tooltip verwandeln
Dazu brauchen Sie im onmouseover-Attribut nur die ID des betreffenden HTML-Elements anzugeben, z.B. eines SPAN-Tags. Vorteile:

* HTML-Seiteninhalte sind im Gegensatz zu JavaScript-Strings suchmaschinen-relevant. Es spricht also nichts dagegen, wirklich wichtige Inhalte in Tooltips zu verpacken.
* Insbesondere bei geschickter Platzierung sind die HTML-Elemente auch für Besucher sichtbar, die JavaScript deaktiviert haben.
* Optional kann das HTML-Element, aus dem das Tooltip erzeugt wird, sogar sichtbar bleiben, zum Beispiel, um irgendetwas nochmals an einer anderen Stelle der Seite in einem Tooltip zu zeigen.
* Direkt im HTML der Seite kann komplexes inneres HTML für das Tooltip einfacher definiert werden als in einem JavaScript-String.

Um ein Tooltip aus einem HTML-Element zu erzeugen, müssen Sie nur die ID des HTML-Tags an die Funktion TagToTip() übergeben:
Code: 
<a href="index.htm" onmouseover="TagToTip('Span2')" onmouseout="UnTip()">Startseite </a>
...
<span id="Span2">Irgendein Kommentar<br>zur Startseite</span>
...
In diesem Beispiel zeigt das Tooltip über dem Link den Inhalt des SPAN-Elements an. Beachten Sie, dass nur der Inhalt mitsamt dem <br>-Tag übernommen wird, aber weder das Tag selbst (hier das SPAN-Element) noch CSS-Formatierungen, die auf dieses Tag angewendet wurden.

...


7. Tooltips mit CSS-Klassen gestalten
Fassen Sie einfach den Tooltip-Text in ein DIV- oder SPAN-Element der gewünschten CSS-Klasse ein. Dasselbe können Sie mit dem Titeltext machen (wie man einen Tooltip-Titel definiert, finden Sie in der Beschreibung des TITLE-Kommandos weiter unten auf dieser Seite). Beispiel:
Code: 
... onmouseover="Tip('<div class=&quot;TipCls1&quot;>Text von Tooltip 1</div>')" ...
... onmouseover="Tip('<span class=\'TipCls2\'>Text von Tooltip 2</span>')" ...
... onmouseover="Tip('Tooltip Nummer 3', TITLE, '<div class=\'TitleCls\'>Ein Titel</div>')" ...
Zum Vergrößern anklicken....

mfg Maik
 
Moin,
Florian123 hat gesagt.:
Gibt es eine leichtere, einfachere Lösung?

Kann man <div> Containern arbeiten. Wenn ja, wie verbindet man ein div-Container mit einer Image Map?
Zum Vergrößern anklicken....
Einfacher geht's wohl kaum.

Javascript: 
function ShowHide(id) {
    obj = document.getElementsByTagName("div");
    if (obj[id].style.visibility == 'visible'){
    obj[id].style.visibility = 'hidden';
    }
    else {
    obj[id].style.visibility = 'visible';
    }
}
CSS: 
div.tooltipClass {
  width:200px;
  min-height:150px;
  background:#fff;
  border:3px solid #000;
  visibility:hidden;
  position:absolute;
}
HTML: 
<body>

  <img src="raumplan.JPG" alt="Raumplan" usemap="#Raumplan">
  <map name="Raumplan">
    <area shape="rect" coords="120,146,192,202"
          href="http://www.maps.google.de/" alt="Bild" title="Name1"
          onmouseover="ShowHide('tooltipID1');" onmouseout="ShowHide('tooltipID1');">
  </map>
  <div id="tooltipID1" class="tooltipClass">$foobar in tooltipID1</div>
  <!--<div id="tooltipID2" class="tooltipClass">$foobar in tooltipID2</div>-->
  <!--<div id="tooltipID3" class="tooltipClass">$foobar in tooltipID3</div>-->

</body>


Das "Sprechblasen-Layout" für den DIV-Container ist dann eine Frage der CSS-Formatierung.

mfg Maik
 
Vielen Dank für die zahlreichen Antworten.

Nach genau diesem Quellcode habe ich gesucht. Ich habe den Quellcode bzw. CSS angepasst.

Was mir aufgefallen ist, dass sich das div nicht immer wieder ausblendet, nachdem ich mit dem Cursor aus dem Bereich gehe.

Desweiterem verändert sich die Logik und zwar erscheint das Fenster, wenn ich nicht im Bereich bin und wenn ich im Bereich bin, verschwindet das div.

Liegt es an meinen Einstellungen JS ist aktiviert, Sicherheitsstufe "Niedrig", IE 7.

Können die div Container neben dem jeweiligen area/coords erscheinen und kann der Cursor im div arbeiten, sodass das div nicht wieder ausgeblendet wird?

Dennoch vielen Dank für die Hilfe.

Gruß

Florian
 
Zuletzt bearbeitet:
Hi,

bei mir werden die Container wieder ausgeblendet, wenn die Maus die verweis-sensitiven Flächen verlässt.

Aus diesem Grund kann in meinem Beispiel derzeit die Maus auch nicht in den DIV-Container hineingeführt und dort genutzt werden, da in diesem Moment der onmouseout-Event im <area>-Tag feuert, wenn die Maus dieses Element verlässt. Dazu müsste dann dieser Eventhandler in den jeweiligen DIV-Block ausgelagert werden.

Um die DIV-Container über der Image Map zu positionieren, wird ein umschliessender DIV-Block benötigt, der relativ positioniert ist, damit sich die absoluten Positionsangaben der "Tooltips" darin relativ verhalten, und sich nicht auf den Dokumentkörper <body> beziehen.

Kleines Beispiel:
HTML: 
<body>

<div id="mapBox">
  <img src="raumplan.JPG" alt="Raumplan" usemap="#Raumplan">
  <map name="Raumplan">
    <area shape="rect" coords="120,146,192,202"
          href="http://www.maps.google.de/" alt="Bild" title="Name1"
          onmouseover="ShowHide('tooltipID1');">
  </map>
  <div id="tooltipID1" class="tooltipClass" onmouseout="ShowHide('tooltipID1');">$foobar in tooltipID1</div>
  <!--<div id="tooltipID2" class="tooltipClass">$foobar in tooltipID2</div>-->
  <!--<div id="tooltipID3" class="tooltipClass">$foobar in tooltipID3</div>-->
</div>

</body>
CSS: 
#mapBox { 
position:relative; 
}
#tooltipID1 {
left:20px;
top:50px;
}

In Stu Nicholls' Beispielvariante http://www.cssplay.co.uk/menu/solar_map.html, die auch im "Sprechblasen-Look" daherkommt, ist dies möglich, da hier die einzelnen Boxen Nachfahren des jeweiligen <li>-Tags sind, und auf diese Weise die :hover-Pseudoklasse ihre Gültigkeit behält. Ebenso können hier die Boxen u.a. auch direkt neben den verweis-sensitiven Flächen positioniert werden, wie du in der Demonstration siehst.

Ich poste dir hier mal den "heruntergebrochenen" Quellcode der Seite, der nur die relevanten Passagen enthält - vielleicht kannst du hiermit etwas anfangen.

HTML: 
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> Stu Nicholls | CSSplay | Return of the image maps</title>
<meta name="Author" content="Stu Nicholls" />

<style type="text/css">
/* ================================================================
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menu/solar_map.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */

#map {position:relative; margin:50px auto; width:700px; height:503px;}
#map ul {padding:0; margin:0; list-style:none; position:absolute; top:0; left:0;}
#map ul li {position:absolute;}
#map ul li#sun {width:215px; height:210px; top:31px; left:63px;}
#map ul li#mercury {width:69px; height:70px; top:77px; left:291px;}
#map ul li#venus {width:117px; height:119px; top:306px; left:130px;}
#map ul li#moon {width:104px; height:104px; top:352px; left:346px;}
#map ul li#earth {width:257px; height:257px; top:246px; left:435px;}

/* remove the absolute position from the list items for lte IE6 */
* html #map ul li {position:static;}

/* and give the absolute position to the links for lte IE6 */
* html #map ul li a.tl {position:absolute;}
* html #map ul li#sun a.tl {top:31px; left:63px;}
* html #map ul li#mercury a.tl {top:77px; left:291px;}
* html #map ul li#venus a.tl {top:306px; left:130px;}
* html #map ul li#moon a.tl {top:352px; left:346px;}
* html #map ul li#earth a.tl {top:246px; left:435px;}


#map ul li a {text-decoration:none;}

#map ul li a.tl {display:block; text-indent:-9999px; background: url(http://www.cssplay.co.uk/menu/planets/transparent.gif);}

#map ul li a.tl:hover, #map ul li:hover {z-index:500;}

#map ul li#sun a.tl {width:215px; height:210px;}
#map ul li#sun a.tl:hover, #map ul li#sun:hover {background:url(http://www.cssplay.co.uk/menu/planets/sun.jpg);}
#map ul li#mercury a.tl {width:69px; height:70px;}
#map ul li#mercury a.tl:hover, #map ul li#mercury:hover {background:url(http://www.cssplay.co.uk/menu/planets/mercury.jpg);}
#map ul li#venus a.tl {width:117px; height:119px;}
#map ul li#venus a.tl:hover, #map ul li#venus:hover {background:url(http://www.cssplay.co.uk/menu/planets/venus.jpg);}
#map ul li#moon a.tl {width:104px; height:104px;}
#map ul li#moon a.tl:hover, #map ul li#moon:hover {background:url(http://www.cssplay.co.uk/menu/planets/moon.jpg);}
#map ul li#earth a.tl {width:257px; height:257px;}
#map ul li#earth a.tl:hover, #map ul li#earth:hover {background:url(http://www.cssplay.co.uk/menu/planets/earth.jpg);}



#map ul li .xsnazzy,
#map ul li a .xsnazzy
{visibility:hidden;}

/* For IE6 to work */
* html #map ul li a.tl:hover {border:0;}

* html #map ul li a:hover .xsnazzy {visibility:visible;}

#map ul li:hover .xsnazzy {visibility:visible;}

/* For IE7 to keep the :hover over .xsnazzy - goodness knows why? */
#map ul li:hover .xsnazzy {background:url(http://www.cssplay.co.uk/menu/transparent.gif);}

.xsnazzy {display:block; position:absolute; height:auto; text-align:center;}

#sun .xsnazzy {left:35px; top:190px; width:300px;}
#mercury .xsnazzy {left:55px; top:-20px; width:210px;}
#venus .xsnazzy {left:-130px; top:-90px; width:130px;}
#moon .xsnazzy {left:-195px; top:-160px; width:300px;}
#earth .xsnazzy {left:-70px; top:-160px; width:250px;}

.xsnazzy h1, .xsnazzy p {margin:0 10px;}
.xsnazzy h1 {font-size:2.5em; color:#6f9; font-family:georgia, "times new roman", serif; border-bottom:1px solid #fff;}
.xsnazzy p {padding-bottom:0.5em; color:#eee; font-size:12px; text-align:left;}
.xsnazzy {background: transparent; margin:1em;}


.xb1, .xb2, .xb3, .xb4, .xb5, .xb6, .xb7 {display:block; font-size:0; overflow:hidden;}
.xb1, .xb2, .xb3, .xb4, .xb5, .xb6 {height:1px;}
.xb4, .xb5, .xb6, .xb7 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #fff;}
.xb1 {margin:0 8px; background:#fff;}
.xb2 {margin:0 6px; background:#fff;}
.xb3 {margin:0 4px; background:#fff;}
.xb4 {margin:0 3px; background:#7f7f9c; border-width:0 5px;}
.xb5 {margin:0 2px; background:#7f7f9c; border-width:0 4px;}
.xb6 {margin:0 2px; background:#7f7f9c; border-width:0 3px;}
.xb7 {margin:0 1px; background:#7f7f9c; border-width:0 3px; height:2px;}

.xboxcontent {display:block; background:#7f7f9c; border:3px solid #fff; border-width:0 3px;}
.xboxcontent a, .xboxcontent a:visited {display:block; color:#ff0; font-weight:bold; font-size:12px; text-indent:0; padding:4px;}

#map ul li a:hover .xsnazzy .xboxcontent a:hover {color:#fff;}
#map ul li:hover .xsnazzy .xboxcontent a:hover {color:#fff;}

.xsnazzy em.point_top {display:block; font-size:0; width:25px; height:14px; background:url(http://www.cssplay.co.uk/menu/planets/point.gif) center top; position:absolute; left:50px; top:-11px;}
.xsnazzy em.point_bottom {display:block; font-size:0; width:25px; height:14px; background:url(http://www.cssplay.co.uk/menu/planets/point.gif) center bottom; position:absolute; right:50px; bottom:-11px;}
/* for IE5.5 */
* html .xsnazzy em.point_bottom {bottom:-12px; bo\ttom:-11px;}
.xsnazzy em.point_left {display:block; font-size:0; width:14px; height:25px; background:url(http://www.cssplay.co.uk/menu/planets/point.gif) left center; position:absolute; left:-11px; top:30px;}
.xsnazzy em.point_right {display:block; font-size:0; width:14px; height:25px; background:url(http://www.cssplay.co.uk/menu/planets/point.gif) right center; position:absolute; right:-11px; top:125px;}
/* for IE5.5 */
* html .xsnazzy em.point_right {right:-12px; ri\ght:-11px;}

</style>


</head>

<body id="www-cssplay-co-uk">


<div id="map">
<img src="http://www.cssplay.co.uk/menu/planets/solar_system.jpg" alt="solar system" title="solar system" />
<ul>

<li id="mercury"><a href="#nogo" class="tl">MERCURY<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="xsnazzy">
<em class="point_left"></em>
<b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b><b class="xb5"></b><b class="xb6"></b><b class="xb7"></b>
<div class="xboxcontent">
<h1>Mercury</h1>
<p>Mercury is a lump of rock, barely larger than the Moon</p>
<a href="http://en.wikipedia.org/wiki/Mercury_(planet)">Wikipedia</a>
<a href="http://www.solarsystem.org.uk/mercury/">A planet of extremes</a>
<a href="http://www.nineplanets.org/mercury.html">General Information</a>
</div>
<b class="xb7"></b><b class="xb6"></b><b class="xb5"></b><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li id="venus"><a href="#nogo" class="tl">VENUS<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="xsnazzy">
<em class="point_right"></em>
<b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b><b class="xb5"></b><b class="xb6"></b><b class="xb7"></b>
<div class="xboxcontent">
<h1>Venus</h1>
<p>Venus has the densest atmosphere of the terrestrial planets, consisting mostly of carbon dioxide.</p>
<a href="http://en.wikipedia.org/wiki/Venus">Wikipedia</a>
<a href="http://www.nineplanets.org/venus.html">General information</a>
<a href="http://www.solarsystem.org.uk/venus/">Earth's twin</a>

</div>
<b class="xb7"></b><b class="xb6"></b><b class="xb5"></b><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li id="moon"><a href="#nogo" class="tl">MOON<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="xsnazzy">
<em class="point_bottom"></em>
<b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b><b class="xb5"></b><b class="xb6"></b><b class="xb7"></b>
<div class="xboxcontent">
<h1>Moon</h1>
<p>The Moon is the only celestial body that human beings have orbited or landed on</p>
<a href="http://moon.google.com/">Google Moon</a>
<a href="http://en.wikipedia.org/wiki/Moon">Wikipedia</a>
<a href="http://www.nineplanets.org/luna.html">General information</a>

</div>
<b class="xb7"></b><b class="xb6"></b><b class="xb5"></b><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li id="earth"><a href="#nogo" class="tl">EARTH<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="xsnazzy">
<em class="point_bottom"></em>
<b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b><b class="xb5"></b><b class="xb6"></b><b class="xb7"></b>
<div class="xboxcontent">
<h1>Earth</h1>
<p>Earth is the third planet from the Sun and the fifth largest:</p>
<a href="http://en.wikipedia.org/wiki/Earth">Wikipedia</a>
<a href="http://earthobservatory.nasa.gov/">Earth observatory</a>
<a href="http://www.bbc.co.uk/nature/animals/planetearth/">Planet earth</a>
</div>
<b class="xb7"></b><b class="xb6"></b><b class="xb5"></b><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li id="sun"><a href="#nogo" class="tl">SUN<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="xsnazzy">
<em class="point_top"></em>
<b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b><b class="xb5"></b><b class="xb6"></b><b class="xb7"></b>
<div class="xboxcontent">
<h1>Sun</h1>
<p>The Sun is the most prominent feature in our solar system.</p>
<a href="http://www.nineplanets.org/sol.html">General Information</a>
<a href="http://en.wikipedia.org/wiki/Sun">Wikipedia</a>
<a href="http://www.michielb.nl/sun/">A virtual tour</a>
</div>
<b class="xb7"></b><b class="xb6"></b><b class="xb5"></b><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

</ul>
</div>

</body>
</html>


mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück