JavaScript – Zentriertes Popup

Bei einem Mausklick auf eine Region öffnet sich ein zentriertes Popup, mit einem Kreuz zum Schließen in der Ecke rechts oben. Es kann bei geöffnetem Popup direkt eine neue Region gewählt werden, ohne das Kreuz zum Schließen betätigen zu müssen. Das Popup wird dann automatisch aktualisiert.

www.image-maps.de

Javascript-Code kopieren/einfügen:

After_Load:

local_raphael.el.over = function(evt) {
            this.data("set").forEach(function(el) {
                if (el.type == "text") {
                    if (el.data("text")) {
                        el.stop().animate({
                            fill: el.data("text").hover
                        }, animTime);
                    }
                } else if (el.attr('fill') != 'none') {
                    if (el.data("colors")) {
                        el.stop().animate({
                            fill: el.data("colors").hoverfill,
                            stroke: el.data("colors").hoverstroke
                        }, animTime);
                    }
                }
            });
        };
local_raphael.el.out = function(evt) {
            this.data("set").forEach(function(el) {
                if (el.type == "text") {
                    if (el.data("text")) {
                        el.stop().animate({
                            fill: el.data("text").default
                        }, animTime);
                    }
                } else if (el.attr('fill') != 'none') {
                    if (el.data("colors")) {
                        el.stop().animate({
                            fill: el.data("colors").defaultfill,
                            stroke: el.data("colors").defaultstroke
                        }, animTime);
                    }
                }
            });
        };
    var $ToolTips = jQuery("div.imagemap_legend_tooltip");
    $ToolTips.css("display", "none");

    jQuery("div.imagemap_legend_label").click(function(event) {
        if (jQuery(this).hasClass("active")) {
            jQuery(this).parent().children("div.imagemap_legend_tooltip").css("display", "none");  
            jQuery(this).removeClass("active");
        } else {                
            jQuery("div.imagemap_legend_label.active").parent().children("div.imagemap_legend_tooltip").css("display", "none");
            jQuery("div.imagemap_legend_label.active").removeClass("active");
            jQuery(this).parent().children("div.imagemap_legend_tooltip").css("display", "block");
            jQuery(this).addClass("active");
        }
    });

click

var lastTooltipCloseButton = document.getElementById('close');
if(lastTooltipCloseButton != null) {
lastTooltipCloseButton.parentNode.style.display = 'none';
lastTooltipCloseButton.remove();
}
var id = this.data("id");
var svg = document.getElementsByTagName('svg')[0];
var image = svg.parentNode;
var imageId = image.id;
var prefix = imageId.replace("_image","");
var tooltip = document.getElementById(prefix+'_tooltip_' + id);
            if (tooltip != null && image != null) { 
                mouseCoords(evt); 
                tooltip.style.display = 'block';
                tooltip.style.position = 'absolute'; 
                var left = (document.getElementById(prefix+'_image').offsetWidth)/2-(tooltip.clientWidth/2);
                if (left < 0) left = 0; 
                var top = (document.getElementById(prefix+'_image').offsetHeight)/2-(tooltip.clientHeight/2);
                if (top < 0) top = 0;
                tooltip.style.display = 'block';
                tooltip.style.position = 'absolute';
                tooltip.style.left = left + 'px';
                tooltip.style.top = top + 'px';
                var cls = tooltip.getAttribute('class').split(" ");
                for (var i = cls.length - 1; i >= 0; i--) {
                    if (cls[i] != "active" && i == 0) {
                        cls.push('active');
                    }
                }
                tooltip.setAttribute('class', cls.join(" "));
            }
var closeButton = tooltip.querySelector('#close');
if (closeButton!= null) tooltip.removeChild(closeButton);
tooltip.innerHTML = tooltip.innerHTML + '<button type="button" id="close" class="close" style="position: absolute; top: 5px; right: 5px; padding:1px 6px; margin: 0 0 0 5px;opacity: 1;background: #000000;" onclick="this.parentNode.style.display = &apos;none&apos;;">&#120;</button>';

Fügen Sie folgenden CSS-Code in Ihr Projekt:

.imagemap_content {
    position: relative;
}
.imagemap_content .imagemap_tooltip {
    display: none;
    position: absolute;
    background: #ffffff;
    border: 1px solid #808080;
    padding: 5px 8px;
    margin: 0;
    /* max-width: 250px; */
}
.imagemap_tooltip_content {
    float: left;
    margin: 0 10px 0 0;
}
.imagemap_tooltip_content:last-of-type{
    margin: 0;
}
.imagemap_content .imagemap_tooltip.active { display: block;  margin:0 0 0 0px; z-index: 999;}
.imagemap_content .imagemap_tooltip p { margin: 0; }
.imagemap_content .imagemap_tooltip p + p { margin-top: 10px; }
.imagemap_zoom_in,
.imagemap_zoom_out,
.imagemap_zoom_reset {
    border: 0 none !important;
    margin: 0 !important; padding: 0 !important;
    display: inline-block;
    width: 24px !important; height: 24px !important;
    text-indent: -9999px;
}
.imagemap_zoom_in { background: url('button-zoom-in.png') no-repeat scroll center center transparent !important; }
.imagemap_zoom_out { background: url('button-zoom-out.png') no-repeat scroll center center transparent !important; }
.imagemap_zoom_reset { background: url('button-zoom-reset.png') no-repeat scroll center center transparent !important; }
.imagemap_preload {
    background: rgb(0, 0, 0) transparent;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    text-align: center;

}

.imagemap_legend_label {
    font-size:22px;
}

.imagemap_preload > .imagemap_preload_inner { padding-top: 30%; }

.imagemap_legend {
    display: none;
    -webkit-column-width: 200px;
    -moz-column-width: 200px;
    column-width: 200px;

}
.imagemap_legend_bottom { }
.imagemap_legend_top { }
.imagemap_legend_left { float:left; }
.imagemap_legend_right { float:right; }
.imagemap_legend .imagemap_legend_line {
    text-align: center;
}
.imagemap_legend .imagemap_legend_label {
    width: 100%;
    display: inline-block;
    text-align: left;
    border-bottom: 1px solid #000;
}
.imagemap_legend .imagemap_legend_tooltip {
    width: 100%;
    display: inline-block;
    font-size: 0.7em;
}
@media screen and (max-width: 450px) {
    .imagemap_legend_shown .imagemap_legend { display: block; }
    .imagemap_legend_shown .imagemap_content { display: none; }
    .imagemap_tooltip_content {
        color: #fff;
        float: none;
        font-size: 14px;
    }
    .imagemap_legend_label {
        color: #fff;
    }
}
.imagemap_legend_shown.tablet .imagemap_legend,
.imagemap_legend_shown.mobile .imagemap_legend { display: block; }
.imagemap_legend_shown.tablet .imagemap_content,
.imagemap_legend_shown.mobile .imagemap_content { display: none; }