[JavaScript] Hover auf ner Imagemap - Bild und Text

**prego** · 05.06.2007, 15:32

Nochmal langsam.

du hast eine image map?
du willst das wenn man auf einen bereich der image map mit der maus fährt ein "schwebendes fenster" gezeigt wird?
das "schwebende fenster" soll je nach "maus drüber"-Bereich verschiedene Inhalte haben?

Das geht ohne JS - pures CSS

**starsk8er** · 05.06.2007, 15:41

jap, genau das möchte ich... mit css? danke erstmal fürs besser formulieren

kannste mir nen link geben, wo ich infos darüber finde? dankeschön schon im vorraus.
ach ja und danke für die ultraschnelle antwort

**prego** · 05.06.2007, 15:58

mal grob ein Beispiel:

PHP-Code:


<ul class="mymap">

  <li>

    <a href="#" id="link1"><span>Text/Bild/was du wilst</span></a>

  </li>

</ul>





//CSS dazu

UL.mymap {

  width: 400px;

  height: 200px; /* höhe und breite deines Bilder */

  padding: 0;

  background-image: url('meins.jpg');

}



UL.mymap LI {

  list-style-type: none;

}



UL.mymap LI A {

  display: block;

  position: relative;

}



* html UL.mymap LI A { 

  /*Hack für IE6, damit er die Box nicht größer zieht wenn das Span rausragt*/

  overflow: hidden;

}



UL.mymap LI A SPAN {

  display: none;

}



UL.mymap LI A:hover SPAN {

  display: block;

  width: 100px;

  height: 20px;

  border: 1px solid black;

  background-color: #efe;

}



UL.mymap LI A#link1 {

  top: 10px; 

  left: 100px; /* position des ersten links */

  width: 20px;

  height: 20px; /* größe des klickbaren bereichs */

}

ungetestet - nur mal um die theorie aufzuzeigen...
(wahrscheinlich hab ich mich eh mit position: relative verhauen

)

EDIT:
korrektur - natürlich muss das span beim hover ja sichtbar gemacht werden

**starsk8er** · 06.06.2007, 11:40

danke... aber wie kann ich sowas...
<a href="#" class="mybox"><span>Text/Bild/was du wilst</span></a>

umschreiben, dass es checkt, dass ich es auf ner imagemap verwende...

also die image map hab span class=mybox
dieses span habe ich mit css unsichtbar gemacht, jetzt möchte ich aber,
wenn man über class drüberfährt, dass es mein span aufklappt...
wie teile ich dem dann mit, welches span er aufklappen soll?

bei a.mybox:hover span{... sollte er dann in der map das span aufklappen...

ich habe da ein script gefunden, free, ich poste mal den code:

Code:

<html>
<head>
<title>Titel deiner Seite</title>

<style type="text/css">
<!--

/* Tooltip */

a.tooltip,
a.tooltip:link,
a.tooltip:visited,
a.tooltip:active {
position: relative;
text-decoration: none;
font-style: bold;
border-bottom:0px dotted #4dbcf3;
}

a.tooltip:hover {
background: transparent;
z-index: 100;
}

a.tooltip span {
display: none;
text-decoration: none;
}

span.tooltip {
display: none;
text-decoration: none;
}

a.tooltip:hover span {
display: block;
position: absolute;
top: 30px;
left: 0;
width: 200px;
z-index: 100;
color: #000000;
border: 1px solid;
border-color: #FFFFFF #D5D7DB #D5D7DB #FFFFFF;
border-left: 4px solid #4dbcf3;
padding: 2px 10px 2px 10px;
background: #EEEEEE;
font-family: Verdana, Arial, Helvetica, Sans-serif;
font-style: Normal;
text-align: left;
}

a.tooltip:hover span {
display: block;
position: absolute;
top: 30px;
left: 0;
width: 200px;
z-index: 100;
color: #000000;
border: 1px solid;
border-color: #FFFFFF #D5D7DB #D5D7DB #FFFFFF;
border-left: 4px solid #4dbcf3;
padding: 2px 10px 2px 10px;
background: #EEEEEE;
font-family: Verdana, Arial, Helvetica, Sans-serif;
font-style: Normal;
text-align: left;
}

-->
</style>

</head>
<body>

<p><a class="tooltip" href="#">Hilfe<span><b>Hilfe</b> <br />
  Und hier steht die Erklärung zur Hilfe drin. </span></a>
  
  <br>
  <br>

<p>&nbsp;</p>
<p><img src="gfx/img.jpg" width="700" height="194" border="0" usemap="#Map">
<map name="Map"><area shape="rect" coords="118,30,399,147" href="#" class="tooltip"></map></p>

<span class="tooltip"><b>test2</b> <br />
hier ist dann der text </span>

</body>
</html>

der teil oben funktioniert, nur der teil mit der imagemap funkt nicht...

**prego** · 06.06.2007, 16:52

Komisch, ist funktional so ziemlich das selbe was ich geschrieben habe.

Das Span klappt beim Hover auf das A aus (a:hover span) - du positionierst das a als block-level elements relative (left, top) - sollte ansich so funktionieren...

denk nochmal drüber nach - hab mom keine zeit ne beispielimplementation zu machen.

**wahsaga** · 06.06.2007, 18:51

Original geschrieben von starsk8er
der teil oben funktioniert, nur der teil mit der imagemap funkt nicht...

Was bitte sollte denn da "funken" ...?

**starsk8er** · 06.06.2007, 22:54

Original geschrieben von wahsaga
Was bitte sollte denn da "funken" ...?

also ich möchte dass das feld bei der imagemap aufklappt, also wenn ich über den markierten teil beim bild fahre, beim link selbst <a href... funktionierts...

bei der imagemap <area class=.... da funktionierts leider nicht, das ist mein problem, also ich schaffe es nicht, das css so anzupassen, dass wenn ich über den gesetzten link auf der imagemap fahre, dass es dann ein <span feld unter der maus sichtbar macht.
danke für die hilfe.

**wahsaga** · 06.06.2007, 23:01

Original geschrieben von starsk8er
bei der imagemap <area class=.... da funktionierts leider nicht, das ist mein problem, also ich schaffe es nicht, das css so anzupassen

Das wirst du auch nicht schaffen, weil es mit aktuellem CSS unmöglich ist.

Beim Link funktioniert das, weil du da den Nachfahrenselektor nutzen kannst - Span ist Nachfahre von A, und kann deshalb über einen entsprechenden Selektor "abhängig" vom A, und damit auch von dessen Zustand A:hover angesteuert werden.

Area ist aber ein inhaltsloses Element, kann keine Nachfahren haben - also kannst du da auch nix mit dem Nachfahrenselektor selektieren ...

Also bleibt dafür doch nur Javascript.
Auf onmouseover/-out des Area-Elements reagieren, und dann entweder style-Eigenschaften oder Klasse eines anderen Elementes ändern.

**starsk8er** · 06.06.2007, 23:04

verstehe danke... dann plage ich mich da nicht weiter rum, kennst du zufällig so ein script? das mit java funktioniert und das ich da einbauen könnte? hab schon damals bei google gesucht und leider keins gefunden und selbst eins zu programmieren, da fehlt mir leider die fähigkeit. danke

**wahsaga** · 06.06.2007, 23:23

Original geschrieben von starsk8er
kennst du zufällig so ein script?

Die Bezeichnung "Script" wäre für so etwas primitives schon reichlich hoch gegriffen.

Wenn man es ganz simpel umsetzt, dann braucht es ja nicht viel mehr, als die beiden bereits genannten Eventhandler, getElementById oder vergleichbares zum Zugriff auf das zu ändernde Element, und ein oder mehrere Zuweisungen an die erwähnten Eigenschaften.

das mit java funktioniert

Nein, Java ist immer noch nicht das gleiche wie JavaScript, ganz im Gegenteil.

**Husti** · 07.06.2007, 09:18

Funktional, browserfreundlich und ausführlich hat sich Walter Zorn den Tooltips mit Zing und Zong gewidmet. Hut ab dafür und daher hier genannt.
http://www.walterzorn.de/tooltip/tooltip.htm

**starsk8er** · 07.06.2007, 12:00

vielen dank für die ganzen antworten, und die super page, ich hoffe ich finde dort das richtige script.
lg
tj

[JavaScript] Hover auf ner Imagemap - Bild und Text