5202

ein Blog über technische Fragen zu Blogger

Tooltip in einer Imagemap bauen

von
'Tooltips' sind Kurzbeschreibungen in einem Pop-Up Fenster - wie könnt ihr solche Tooltips für einzelne Bildteile definieren?

In der Skizze liegen zwei Tooltips und zwar ein rotes 'Herzchen' auf dem Vulkan Fuji und ein grüner Punkt auf dem Vorschiff des ersten Bootes links außen. Fahrt mit der Mause drüber und seht das Pop-Up Fenster!

Bastelei

Das ganze ist nicht schwierig, nur a bisserl Bastelei. Probiert das trotzdem zuerst in einem Test-Post aus!

Solche Tooltips kenne ich eigentlich nur mit Javascript, ich beschreibe hier mal meine Variante ohne Scripte und ohne zusätzlichen Grafiken ... keep it simple!

HTML

Ausgangspunkt ist ein Bild in eurem Post.

Öffnet die HTML-Ansicht von eurem Post-Editor und schaut euch die HTML von dem Bild an (zur besseren Übersicht habe ich die Links abgekürzt):
<div class="separator" style="clear: both; text-align: center;">
<a href="http://goo.gl/t4iuo" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="" src="http://goo.gl/LyUBt" width="800" /></a></div>
Ihr wollt zwei Tooltips in diesem Bild haben - ihr ergänzt das HTML also mit den rot markierten zwei div Container, in diesen Container kommt ein Anker mit Link und das Bild bekommt eine zusätzlichen Klasse bild1.
<div class="separator bild1" style="clear: both; text-align: center;">
<a href="http://goo.gl/t4iuo" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="" src="http://goo.gl/LyUBt" width="800" /></a>
<div class="trigger_1"><a href="http://goo.gl/meDV3"></a></div><div class="trigger_2"><a href="http://goo.gl/g6xJG"></a></div></div>
Ihr müsst für jedes neue Bild die Klasse um eine Nummer erhöhen - ein zweites Bild bekäme die Klasse bild2, eine drittes Bild bild3 und so weiter.

Außerdem packt ihr für jeden weiteren Tooltip einen weiteren div Container dazu - im Grunde ziemlich logisch (soweit man bei CSS von Logik sprechen kann ...).

CSS

Die HTML ist gemacht, kommen wir zur CSS. 5202 wäre nicht 5202, wenn wir jetzt mit kleinen Bildchen arbeiten würden ... hehe ... wir bauen die 'Grafiken' selbstverständlich mit CSS :).

Alle folgende CSS fügt ihr oben im Posts in style Anweisungen ein. Solche Anweisungen schauen so aus:
<style>
Hier steht die CSS!
</style>
Herzchen
Das 'Herzchen' auf dem Vulkan Fuji ist wie gesagt keine Grafik, sondern reine CSS. Geschrieben wird das so:
/* Herzchen */
.bild1 div a {
 position: relative;
 z-index: 10
}
.bild1 .trigger_1 a:before, .bild1 .trigger_1 a:after {
   position: absolute;
   content: "";
   left: 10px;
   top: 0;
   width: 10px;
   height: 16px;
   background: red;
   border-radius: 100% 100% 0 0;
   -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
       -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
           transform: rotate(-45deg);
   -webkit-transform-origin: 0 100%;
      -moz-transform-origin: 0 100%;
       -ms-transform-origin: 0 100%;
        -o-transform-origin: 0 100%;
           transform-origin: 0 100%;
 }
.bild1 .trigger_1 a:after {
   left: 0;
   -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
       -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
           transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
   -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
     -o-transform-origin: 100% 100%;
        transform-origin: 100% 100%; 
   }
Die CSS gilt für das Bild1 und dort für den div Container1 .. für weitere Bilder oder Container müsst ihr das halt anpassen.
Kreis
Der zweite Tooltip ist ein simpler Kreis, ebenfalls mit CSS gemacht:
 /* Kreise */  
 .bild1 .trigger_2 a{
   display: inline-block;
   width: 12px;
   height: 12px;
   border-radius: 50%;
   background: green;
   margin: 3px;
   cursor: pointer;
   z-index: 10
}
Das sollte klar sein, oder?.
Ausrichtung der Tooltips
Die Tooltips werden mit position: absolute über das Bild geschoben und mit top und left genau ausgerichtet.
.bild1 .trigger_1 {
   position: absolute;
   top: 384px;
   left: 592px
   }
.bild1 .trigger_2 {
   position: absolute;
   top: 374px;
   left: 212px
   }
Die Werte müsst ihr natürlich individuell für jeden Tooltip einzeln anpassen ... am schnellsten geht das mit dem Firebug (wenn ihr damit umgehen könnt).

Der Tooltip

Als letztes bauen wir noch den Tooltip selber, dazu benützen wir wiederum Pseudoelemente. Hier für den ersten Tooltip ('Herzchen'):
 
.bild1 .trigger_1:hover:before {
  content: 'Der Fuji';
  position: absolute;
  top: -55px;
  left: 10px;
  white-space: nowrap;
  font-size: 20px;
  background: #fff;
  border: 1px solid black;
  padding: 8px;
    }
Und für den Kreis:
.bild1 .trigger_2:hover:before {
  content: 'Ein Oshiokuri-bune';
  position: absolute;
  top: -55px;
  left: 10px;
  white-space: nowrap;
  font-size: 20px;
  background: #fff;
  border: 1px solid black;
  padding: 8px;
    }
Der Inhalt eurer Tooltips kommt in die content Eigenschaft von dem Pseudoelement. Den Tooltip selber könnt ihr weiter anpassen - aber ich empfehle euch, erst mal alles so zu lassen wie es ist.

Cool - funktioniert das im Internet Explorer?

Obwohl wir hier kein Javascript verwenden, funktioniert das in allen richtigen Browsern ... außer dem Internet Explorer :(. Damit eure Besucher mit dem IE auch was davon haben, müsst ihr eine kleine Anpassung vornehmen - sucht diesen Tag:
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
und _ersetz_ ihn dadurch:
<meta http-equiv='X-UA-Compatible' content='IE=8, IE=9, IE=10' />

Oje ist das alles kompliziert ..

Noop, es ist überhaupt nicht kompliziert :) ... ihr müsst euch nur mal die Mühe machen und euch hinsetzen und das in aller Ruhe ausprobieren.

In unserer Aufmerksamkeitsdefizit-Welt ist alles was Mühe macht irgendwo uncool und alles muss sofort mit einen Klick funktionieren ... aber in der realen Welt müsst ihr halt Zeit, Kraft und Mühe in so was stecken, that's the point!

Nachtrag: Das ganze mit Grafiken

Okay Freunde, ihr habt mich überzeugt, wie geht das ganze mit Grafiken?

Bezogen auf das Beispiel von oben mit nur einem Link würde sich das so schreiben:
.bild1 .trigger_1 a {
  display: none;
  width: 30px;
  height: 30px;
  background-image: url(https://bild.png);
   }
.bild1 .trigger_1 a:hover {
  background-image: url(https://bild_hover.png);
  }
.bild1:hover > .trigger_1 a{
  display: block
  }
.bild1 .trigger_1:hover:before {
  position: absolute;
  top: -55px;
  left: 10px;
  white-space: nowrap;
  content: 'Der Fuji';
  font-size: 20px;
  background: #fff;
  border: 1px solid black;
  padding: 8px;
 }

Anmerkungen, Fragen

Lasst hören was ihr davon haltet! Solche Tooltips sind aufwendig zu bauen, aber vielleicht findet jemand mal eine coole Verwendung dafür?