Image Map mit CSS3 und jQuery Tooltip

Vor einer Weile sind mir im Internet ein paar coole Tooltips auf der Firefox-Seite aufgefallen die mich dazu inspiriert haben dies nachzubauen. Das Hauptziel war es, etwas zu entwickeln, das einfach zu bedienen und zu aktualisieren ist ohne das man ein großes Wissen dazu benötigt.

Wie Sie noch sehen werden, brauchen Sie keine Entwickler Fähigkeiten, um pins mit Tooltips zu einem Bild hinzuzufügen. Sie müssen nur ein div mit dem Inhalt hinzufügen und zwei benutzerdefinierte HTML5-Attribute für die Positionierung setzen. Ich würde sagen, das ist einfach genug.

HTML5 Datenattribute und jQuery

HTML5 hat ein cooles Feature namens „custom data attributes“, mit deren Hilfe kann man beliebige Ausschnitte von Metadaten speichern um seinen JavaScript-Code einfacher zu gestalten.

Hier die Syntax

<div data-foo="bar"></div>

Damit können Sie den obigen Wert mit jQuery erhalten:

var test = $('div').data('foo');

In diesem Artikel verwenden wir diese Attribute, um Daten wie Positionierungskoordinaten für unsere Pins zu speichern.
Möchten Sie mehr über HTML5 benutzerdefinierte Daten-Attribute lesen? Dann schauen Sie sich folgende Seiten an:

der HTML-Quelltext

<div id="wrapper">
  <img width="920" height="450" src="world-map.jpg" alt="World continents">
  <div data-xpos="450" data-ypos="110">
    <h2>Europe</h2>
    <ul>
      <li><b>Area (km²):</b> 10,180,000</li>
      <li><b>Population:</b> 731,000,000 </li>
    </ul>
  </div>
</div>
  • #wrapper – Dies ist das Element, das alle anderen Elemente umschließt. Seine Position wird relativ angegeben, und ich wette, Sie erraten, warum das so ist.
  • img – Bild, das als „Hintergrund“ verwendet wird.
  • .pin – Das absolute positioniertes Element enthält die Pin und auch den Tooltip „Inhalte“, die als  MouseEnter-Ereignis angezeigt werden. Darüber hinaus geben die Pin-down-Klasse vom pin-Typ.
  • data-xpos = „450“ data-ypos = „110“ – HTML5 benutzerdefinierte Attribute, die Sie angeben, X (von links nach rechts) und Y (von oben nach unten) Achsenwerte (px) zur Positionierung der jeweiligen map pin helfen. In diesem Beispiel wird der Stift positioniert 450px von links nach rechts und 110px von oben nach unten sein.

 

CSS

Jetzt gibt es keine großen Erklärungen mehr da alles selbsterklärend sein sollte.

/* Relative positioning*/
#wrapper {
        position: relative;
        margin: 50px auto 20px auto;
        border: 1px solid #fafafa;
        -moz-box-shadow: 0 3px 3px rgba(0,0,0,.5);
        -webkit-box-shadow: 0 3px 3px rgba(0,0,0,.5);
        box-shadow: 0 3px 3px rgba(0,0,0,.5);
}

/* Hide the original tooltips contents */
.pin {
        display: none;
}

/* Begin styling the tooltips and pins */
.tooltip-up, .tooltip-down {
        position: absolute;
        background: url(arrow-up-down.png);
        width: 36px;
        height: 52px;
}

.tooltip-down {
        background-position: 0 -52px;
}

.tooltip {
        display: none;
        width: 200px;
        cursor: help;
        text-shadow: 0 1px 0 #fff;
        position: absolute;
        top: 10px;
        left: 50%;
        z-index: 999;
        margin-left: -115px;
        padding:15px;
        color: #222;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        -moz-box-shadow: 0 3px 0 rgba(0,0,0,.7);
        -webkit-box-shadow: 0 3px 0 rgba(0,0,0,.7);
        box-shadow: 0 3px 0 rgba(0,0,0,.7);
        background: #fff1d3;
        background: -webkit-gradient(linear, left top, left bottom, from(#fff1d3), to(#ffdb90));
        background: -webkit-linear-gradient(top, #fff1d3, #ffdb90);
        background: -moz-linear-gradient(top, #fff1d3, #ffdb90);
        background: -ms-linear-gradient(top, #fff1d3, #ffdb90);
        background: -o-linear-gradient(top, #fff1d3, #ffdb90);
        background: linear-gradient(top, #fff1d3, #ffdb90);
}

.tooltip::after {
        content: '';
        position: absolute;
        top: -10px;
        left: 50%;
        margin-left: -10px;
        border-bottom: 10px solid #fff1d3;
        border-left: 10px solid transparent;
        border-right :10px solid transparent;
}

.tooltip-down .tooltip {
        bottom: 12px;
        top: auto;
}

.tooltip-down .tooltip::after {
        bottom: -10px;
        top: auto;
        border-bottom: 0;
        border-top: 10px solid #ffdb90;
}

.tooltip h2 {
        font: bold 1.3em 'Trebuchet MS', Tahoma, Arial;
        margin: 0 0 10px;
}

.tooltip ul {
        margin: 0;
        padding: 0;
        list-style: none;
}

 

jQuery

Unten finden Sie den jQuery-Code, der beim Laden der Seite ausgeführt wird:

$(document).ready(function(){

    // set the wrapper width and height to match the img size
    $('#wrapper').css({'width':$('#wrapper img').width(),
                      'height':$('#wrapper img').height()
    })

    //tooltip direction
    var tooltipDirection;

    for (i=0; i<$(".pin").length; i++)
    {
        // set tooltip direction type - up or down
        if ($(".pin").eq(i).hasClass('pin-down')) {
            tooltipDirection = 'tooltip-down';
        } else {
            tooltipDirection = 'tooltip-up';
            }

        // append the tooltip
        $("#wrapper").append("<div style='left:"+$(".pin").eq(i).data('xpos')+"px;top:"+$(".pin").eq(i).data('ypos')+"px' class='" + tooltipDirection +"'>
                                            <div class='tooltip'>" + $(".pin").eq(i).html() + "</div>
                                    </div>");
    }    

    // show/hide the tooltip
    $('.tooltip-up, .tooltip-down').mouseenter(function(){
                $(this).children('.tooltip').fadeIn(100);
            }).mouseleave(function(){
                $(this).children('.tooltip').fadeOut(100);
            })
});

Demo anzeigen

Diesen Tipp habe ich auf „http://www.red-team-design.com/“ gefunden.
Vielen Dank an Catalin Rosu dafür dass ich dieses Tutorial in meinem Blog aufnehmen durfte.

Über Enrico S.

Programmierer, Webdesigner, Grafiker, Blogger, Screencaster, Arduino- und eMobility Enthusiast. nefilim3006 ist auch bei Google+ vertreten

Kommentare geschlossen.