HTML Code Bildabstand

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Werbung

Jetzt auf elektrisches Fahren umstellen, Umwelt schonen und 1.500km kostenlosen Strom von Tesla bekommen. https://ts.la/carsten15473.
D

Deleted member 38196

Guest
Hallo zusammen,

Ich kenne mich nicht gross mit HTML codes aus. Vor kurzer Zeit habe ich ein interaktives Bild hergestellt auf Imagemarker. Die Webseite hat mir ein HTML code generiert, welchen ich in die Jimdo Webseite einfügen wollte. Der Code funktioniert, aber leider jedes Mal wenn ich den Code einfüge gibt es einen Abstand, zwischen dem Titel und dem Bild, den ich nicht finden konnte. Unten ist der kopierte Code. Ich habe schon selber versucht den Code zu ändern aber konnte es leider nicht herausfinden bisher. Für Hilfe wäre ich sehr dankbar.

https://jsonformatter.org/html-viewer (HTML Viewer)

<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/jsv2/image-map-pro.min.js"></script>
<script type="text/javascript">

//<![CDATA[
;(function ($, window, document, undefined){$(document).ready(function(){$('#image-map-pro-container').imageMapPro({"id":9930,"editor":{"tool":"drag"},"general":{"name":"Weckruf","width":940,"height":10,"naturalWidth":940,"naturalHeight":10,"center_image_map":1},"image":{"url":"https://imagemarker.com/editor/storage/app/images/qh8I0yvIJomzs0DaKJO939MQr5gFHJVdivIB3DAj.jpeg"},"tooltips":{"constrain_tooltips":0},"layers":{"layers_list":[{"id":0,"title":"Main Floor","image_url":"./images/demo.jpg","image_width":1280,"image_height":776}]},"spots":[{"id":"oval-2796","title":"oval-2796","type":"oval","x":39,"y":23.615,"width":10,"height":38.975,"actions":{"click":"follow-link","link":"https://www.quickstarter2025.ch/quickstarter-2025/start/weckruf/","open_link_in_new_window":0},"default_style":{"background_opacity":0},"mouseover_style":{"background_opacity":0},"tooltip_content":{"plain_text":"Weckruf\n","squares_settings":{"containers":[{"id":"sq-container-403761","settings":{"elements":[{"settings":{"name":"Paragraph","iconClass":"fa fa-paragraph"}}]}}]}}},{"id":"oval-177","title":"oval-177","type":"oval","x":52.472,"y":26.629,"width":8.876,"height":36.41,"actions":{"click":"follow-link","link":"https://www.quickstarter2025.ch/quickstarter-2025/start/information/","open_link_in_new_window":0},"default_style":{"background_opacity":0},"mouseover_style":{"background_opacity":0},"tooltip_content":{"plain_text":"Information","squares_settings":{"containers":[{"id":"sq-container-403761","settings":{"elements":[{"settings":{"name":"Paragraph","iconClass":"fa fa-paragraph"}}]}}]}}},{"id":"oval-6817","title":"oval-6817","type":"oval","x":65.169,"y":25.128,"width":9.101,"height":35.897,"actions":{"click":"follow-link","link":"https://www.quickstarter2025.ch/quickstarter-2025/start/stossrichtung/","open_link_in_new_window":0},"default_style":{"background_opacity":0},"mouseover_style":{"background_opacity":0},"tooltip_content":{"plain_text":"Stossrichtung","squares_settings":{"containers":[{"id":"sq-container-403761","settings":{"elements":[{"settings":{"name":"Paragraph","iconClass":"fa fa-paragraph"}}]}}]}}},{"id":"oval-786","title":"oval-786","type":"oval","x":78.391,"y":25.641,"width":8.988,"height":35.386,"actions":{"click":"follow-link","link":"https://www.quickstarter2025.ch/quickstarter-2025/start/anwendungsfälle/","open_link_in_new_window":0},"default_style":{"background_opacity":0},"mouseover_style":{"background_opacity":0},"tooltip_content":{"plain_text":"Anwendungsfälle","squares_settings":{"containers":[{"id":"sq-container-403761","settings":{"elements":[{"settings":{"name":"Paragraph","iconClass":"fa fa-paragraph"}}]}}]}}}]});});})(jQuery, window, document);
//]]>
</script>
 

basti1012

Aktives Mitglied
26 November 2017
903
97
28
38
Minden
sebastian1012.bplaced.net
was meinst du den mit Abstand zwischen Titel und Bild ?
Meinst du das "Weckruf", "Information " usw ?
In den Code ist das bei mir höchstens ca 7Px und auf deiner Webseite ist das auch nicht viel größer ?
 
D

Deleted member 38196

Guest
Hey Basti,

Ich habe im Anhang ein screenshot angehängt. Ich möchte das Bild direkt unter "zum nächsten Schritt", leider gibt es einen komischen Abstand zwischen dem Titel und Bild wenn ich es einfüge. Ich habe versucht natural height und height im HTML code verändern, aber leider ist da nichts viel passiert.
 

Anhänge

basti1012

Aktives Mitglied
26 November 2017
903
97
28
38
Minden
sebastian1012.bplaced.net
So gesehen liegt das nicht am Bild , sondern an den Tooltipp Containern.
Wenn du über die runden Bilder gehst wird dadrüber ja was angezeigt, und das angezeigte ist immer da und nimmt den Platz ein.
Da es in der Css als opacity:0; unsichtbar gemacht wird, nimmt der Container auch den Platz ein, auch wen man es nicht sehen kann.
Wenn man mit der Maus über die Bilder geht wird opacity: wieder auf 1 gesetzt und der Container ist sichtbar.

Man kann das Tooltipp auch mit display;:none und display:block auch sichtbar machen.
Dazu muss man aber auch noch ein paar andere sachen apassen.

Du bist doch bestimmt noch an basteln oder ? Weil dein Tooltip ja auch noch nicht richtig geht.
Auf jedenfall weißt du jetzt woran es liegt .
Kriegst du das hin , oder bist du noch Anfänger auf den Gebiet
 
D

Deleted member 38196

Guest
Vielen vielen Dank für Deine Hilfe! Hab ich Dich richtig verstanden, dass ich bei meinem code die opacity auf 1 anpassen muss?
Ja, bin noch daran am basteln und leider bin ich auch ein totaler Anfänger.
 

basti1012

Aktives Mitglied
26 November 2017
903
97
28
38
Minden
sebastian1012.bplaced.net
nee das auf opacity:1 zu ändern bringt nix weil dann die Tooltipps immer zu sehen sind und das willst du ja wohl nicht haben.
display:none; währe schon besser. Doch dann wirst du den hover Effekt auch ändern müßen weil er dann nicht mehr gehen sollte.
Ich muß jetzt erstmal weg sonst hätte ich jetzt mal nach nee schnelle Lösung geschaut.
Falls einer zwischen zeitig dir da schon weiter helfen kann wäre schön.
Ansonsten kucke ich heute Nachmittag mal wie man das an besten lösen kann.
 
D

Deleted member 38196

Guest
Ah okay! Das wäre super danke!! Das komische ist das ich ein Bild schon so erstellt und eingefügt habe und alles hat funktioniert. Jetzt auf dem sehe ich die Tooltipps nicht, wie Du erwähnt hast und kann sie auch nicht einfügen...
 
D

Deleted member 38196

Guest
Habs herausgefunden! Dankschön funktioniert jetzt!!