Bei Einsatz einer Imagemap (ImageMarker) verschwindet der Header

Hallo zusammen,

meine Zeta-Version: 15.4.1 Business

Layout: Stripe responsive

Problem:

Einen von ImageMarker (Tooltip von Zeta zur Erstellung von Imagemaps) erzeugter Code setze ich in das Widget "Quelltext" ein. Die Imagemap erscheint korrekt aber dafür verschwindet der Header. Da ich lediglich Anwender bin und mich mit den Codes nicht beschäftige, bin ich an dieser Stelle überfragt. Oder gibt es andere Alternativen, um den Code einzubinden?

Hier ist der Code von ImageMarker: (in dem unteren Teil werden wohl nur die Hotspots definiert)

<!doctype html><html lang="de"><head> <meta charset="utf-8"><meta name="description" content="imagemarker.com"> <link rel="stylesheet" href="https://imagemarker.com/editor/public/…map-pro.min.css"> <link rel="stylesheet" href="https://imagemarker.com/editor/public/cssv2/squares.min.css"></head><body> <div id="image-map-pro-container"></div><script src="https://imagemarker.com/editor/public/jsv2/lib/jquery.min.js"></script> <script src="https://imagemarker.com/editor/public/…-map-pro.min.js"></script> <script type="text/javascript">;(function ($, window, document, undefined){$(document).ready(function(){$('#image-map-pro-container').imageMapPro({"id":5639,"editor":{"selected_shape":"rect-4622","tool":"rect"},"general":{"name":"Untitled","width":2200,"height":1485,"naturalWidth":2200,"naturalHeight":1485},"image":{"url":"https://imagemarker.com/editor/storage…B%22layers_list":[{"id":0,"title":"Main Floor","image_url":"./images/demo.jpg","image_width":1280,"image_height":776}]},"spots":[{"id":"rect-1868","title":"Ossendorf","type":"rect","x":20.289,"y":28.977,"width":14.638,"height":4.226,"default_style":{"opacity":0,"border_radius":10,"background_opacity":0},"mouseover_style":{"opacity":0,"border_radius":10},"tooltip_style":{"enable_tooltip":0},"tooltip_content":{"squares_settings":{"containers":[{"id":"sq-container-403761","settings":{"elements":[{"settings":{"name":"Paragraph","iconClass":"fa fa-paragraph"}}]}}]}}},{"id":"rect-8496","title":"Weidenpesch","type":"rect","x":35.507,"y":25.195,"width":15.508,"height":3.782,"default_style":{"opacity":0,"border_radius":10,"background_opacity":0},"mouseover_style":{"opacity":0,"border_radius":10},"tooltip_style":{"enable_tooltip":0},"tooltip_content":{"squares_settings":{"containers":[{"id":"sq-container-403761","settings":{"elements":[{"settings":{"name":"Paragraph","iconClass":"fa fa-paragraph"}}]}}]}}},{"id":"rect-8169","title":"Mülheim","type":"rect","x":55.362,"y":26.975,"width":15.218,"height":3.782,"default_style":{"opacity":0,"border_radius":10,"background_opacity":0},"mouseover_style":{"opacity":0,"border_radius":10},"tooltip_style":{"enable_tooltip":0},"tooltip_content":{"squares_settings":{"containers":[{"id":"sq-container-403761","settings":{"elements":[{"settings":{"name":"Paragraph","iconClass":"fa fa-paragraph"}}]}}]}}},{"id":"rect-6937","title":"Dellbrück_Holweide","type":"rect","x":69.71,"y":32.314,"width":15.218,"height":7.786,"default_style":{"opacity":0,"border_radius":10,"background_opacity":0},"mouseover_style":{"opacity":0,"border_radius":10},"tooltip_style":{"enable_tooltip":0},"tooltip_content":{"squares_settings":{"containers":[{"id":"sq-container-403761","settings":{"elements":[{"settings":{"name":"Paragraph","iconClass":"fa fa-paragraph"}}]}}]}}},{"id":"rect-1412","title":"Buchheim","type":"rect","x":58.551,"y":43.66,"width":15.797,"height":4.227,"default_style":{"opacity":0,"border_radius":10,"background_opacity":0},"mouseover_style":{"opacity":0,"border_radius":10},"tooltip_style":{"enable_tooltip":0},"tooltip_content":{"squares_settings":{"containers":[{"id":"sq-container-403761","settings":{"elements":[{"settings":{"name":"Paragraph","iconClass":"fa fa-paragraph"}}]}}]}}},{"id":"rect-2853","title":"Mauenheim_Nippes","type":"rect","x":39.565,"y":33.203,"width":14.783,"height":8.009,"default_style":{"opacity":0,"border_radius":10,"background_opacity":0},"mouseover_style":{"opacity":0,"border_radius":10},"tooltip_style":{"enable_tooltip":0},"tooltip_content":{"squares_settings":{"containers":[{"id":"sq-container-403761","settings":{"elements":[{"settings":{"name":"Paragraph","iconClass":"fa fa-paragraph"}}]}}]}}},{"id":"rect-7758","title":"Ehrenfeld_Bickendorf","type":"rect","x":25.217,"y":42.77,"width":15.218,"height":7.786,"default_style":{"opacity":0,"border_radius":10,"background_opacity":0},"mouseover_style":{"opacity":0,"border_radius":10},"tooltip_style":{"enable_tooltip":0},"tooltip_content":{"squares_settings":{"containers":[{"id":"sq-container-403761","settings":{"elements":[{"settings":{"name":"Paragraph","iconClass":"fa fa-paragraph"}}]}}]}}},{"id":"rect-4248","title":"Lindenthal_Braunsfeld","type":"rect","x":21.739,"y":57.231,"width":14.928,"height":8.453,"default_style":{"opacity":0,"border_radius":10,"background_opacity":0},"mouseover_style":{"opacity":0,"border_radius":10},"tooltip_style":{"enable_tooltip":0},"tooltip_content":{"squares_settings":{"containers":[{"id":"sq-container-403761","settings":{"elements":[{"settings":{"name":"Paragraph","iconClass":"fa fa-paragraph"}}]}}]}}},{"id":"rect-6001","title":"Innenstadt","type":"rect","x":39.13,"y":59.01,"width":15.363,"height":4.226,"default_style":{"opacity":0,"border_radius":10,"background_opacity":0},"mouseover_style":{"opacity":0,"border_radius":10},"tooltip_style":{"enable_tooltip":0},"tooltip_content":{"squares_settings":{"containers":[{"id":"sq-container-403761","settings":{"elements":[{"settings":{"name":"Paragraph","iconClass":"fa fa-paragraph"}}]}}]}}},{"id":"rect-2396","title":"Kalk","type":"rect","x":53.333,"y":53.893,"width":15.218,"height":4.45,"default_style":{"opacity":0,"border_radius":10,"background_opacity":0},"mouseover_style":{"opacity":0,"border_radius":10},"tooltip_style":{"enable_tooltip":0},"tooltip_content":{"squares_settings":{"containers":[{"id":"sq-container-403761","settings":{"elements":[{"settings":{"name":"Paragraph","iconClass":"fa fa-paragraph"}}]}}]}}},{"id":"rect-4392","title":"Humboldt_Gremberg","type":"rect","x":57.101,"y":62.792,"width":15.073,"height":7.786,"default_style":{"opacity":0,"border_radius":10,"background_opacity":0},"mouseover_style":{"opacity":0,"border_radius":10},"tooltip_style":{"enable_tooltip":0},"tooltip_content":{"squares_settings":{"containers":[{"id":"sq-container-403761","settings":{"elements":[{"settings":{"name":"Paragraph","iconClass":"fa fa-paragraph"}}]}}]}}},{"id":"rect-7553","title":"Südstadt","type":"rect","x":39.565,"y":66.574,"width":15.218,"height":4.449,"actions":{"click":"follow-link","link":"":[{"id":"sq-container-403761","settings":{"elements":[{"settings":{"name":"Paragraph","iconClass":"fa fa-paragraph"}}]}}]}}},{"id":"rect-4622","title":"Zollstock_Raderthal","type":"rect","x":35.507,"y":78.81,"width":15.073,"height":8.231,"actions":{"click":"follow-link","link":"":[{"id":"sq-container-403761","settings":{"elements":[{"settings":{"name":"Paragraph","iconClass":"fa fa-paragraph"}}]}}]}}}]});});})(jQuery, window, document); </script></body></html>

Vielleicht fällt jemanden etwas auf.

Vielen Dank

Robert

Hallo Steffen,

vielen Dank für die schnelle Hilfe. Leider funktioniert es noch nicht. Im CSS Bereich habe ich schon was stehen, vielleicht liegt es ja daran? An welcher Stelle muss ich denn deinen Code einkopieren?

Hier der schon vorhandene Inhalt:

<style>

.wzp-footfix {

position:fixed;

left:0;

bottom:0;

height:auto ;

width:100%;

z-index:20000;

}

.wzp-spalten{

text-align: center;

text-decoration: none;

opacity: 1;

transition: opacity 0.2s !important;

}

.wzp-spalten:hover {

opacity: 0.6;

}

a.wzp-spalten {

text-decoration: none;

}

.wzp-icon {

position:relative;

top:2px;

padding-right:7px;

}

.wzpgrid5{ width: 20%; float: left;}

.wzpgrid4{ width: 25%; float: left;}

.wzpgrid3{ width: 33.33%; float: left;}

.wzpgrid2{ width: 50%; float: left;}

</style>

Vielen Dank

Robert

Hallo Steffen,

ich habe es nun so umgesetzt, wie du es vorgegeben hast. Leider ist der Header immer noch nicht sichtbar. Allerdings nur auf der Seite auf der ich die Imagemap platziere.

Der Headerbereich, in meinem Fall eine SlideShow mit 4 Bildern ist weiß, nimmt aber den Raum ein als ob er da wäre.

Liebe Grüße

Robert

Es handelt sich um einen neu entwickelten Auftritt, der am 2.1 online gestellt werden soll und dementsprechend nur bei mir lokal liegt. Es fehlt jetzt nur noch das Einstellen der Imagemap.

Es ist so:

Wenn die Imagamap ordnungsgemäß gezeigt wird, dann verschwindet der Header. Der Header ist zwar da, ist aber eine weiße Fläche. Entferne ich das Quelltext Widget, so kommt der Header wieder zum Vorschein.