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

HTML Code Bildabstand

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>
 
Werbung:
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 ?
 
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

  • Abstand.PNG
    Abstand.PNG
    160,9 KB · Aufrufe: 8
Werbung:
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
 
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.
 
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.
 
Werbung:
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...
 
Habs herausgefunden! Dankschön funktioniert jetzt!!
 
Funktioniert jetzt alles?
Also Tooltipps und der Abstand von oben ist jetzt auch weg ?
Was hast du den jetzt gemacht ?
 
Werbung:
Zurück
Oben