Möchte eine ImageMap auf einer Kategorieseite einfügen doch leider zerhackt mir Gambio den HTML Code. Habe folgendes Script im Header: Code: <script type="text/javascript"> sourceImage = new Image () ; function changeImage (target,image) { sourceImage.src = image; document.getElementById(target).src = sourceImage.src; } </script> Folgenden HTML Code auf der Kategorieseite: HTML: <img style="z-index:0; position:absolute; top:0px; left:0px; src="images/143.png" style="border-width: 0px; border-style: solid; width: 826px; height: 1169px;" /><br /> <img style="z-index:1; position:absolute; top:0px; left:0px; id="einzelteile" src="images/einzelteile.png" usemap="#map" /> <map name="map"> <area shape="poly" coords="288,275,311,245,397,215,473,230,496,247,586,296,603,305,624,331,645,378,637,390,633,376,619,366,503,393,490,393,449,385,434,386,414,383,410,376,450,341,542,307,522,294,499,275,466,265,440,259,428,260,375,275,349,288,334,297,318,310,298,317,295,293,290,278,291,276" href="http://mower-point.de/gambio-point/automower-ersatzteile/automower-305/a-gehaeuse-31/Art--Nr---1---Geh-use-grau.html" onMouseOver="changeImage('einzelteile','gehaeuse-grau.png');" onMouseOut="changeImage('einzelteile','einzelteile.png');" /></map> Der HTML Code sieht nach dem Speichern so aus: HTML: <img 143.png="" images="" style="z-index:0; position:absolute; top:0px; left:0px; src=" /><br /> <img einzelteile="" style="z-index:1; position:absolute; top:0px; left:0px; id=" /><map name="map"><area coords="288,275,311,245,397,215,473,230,496,247,586,296,603,305,624,331,645,378,637,390,633,376,619,366,503,393,490,393,449,385,434,386,414,383,410,376,450,341,542,307,522,294,499,275,466,265,440,259,428,260,375,275,349,288,334,297,318,310,298,317,295,293,290,278,291,276" href="http://mower-point.de/gambio-point/automower-ersatzteile/automower-305/a-gehaeuse-31/Art--Nr---1---Geh-use-grau.html" onmouseout="changeImage('einzelteile','einzelteile.png');" onmouseover="changeImage('einzelteile','gehaeuse-grau.png');" shape="poly" /></map> Wo ist der Fehler?!
src ist keine Style-Eigenschaft, Style ist auch keine Style-Eigenschaft (in HTML-Code auf Kategorieseite) sollte heißen: <img style="STYLE-EIGENSCHAFTEN" src="IMAGESOURCE">
Kleiner Fehler große Ursache!!! Vielen Dank timtim! Jetzt habe ich noch das Problem, dass das Bild sich über alles legt... Wo haperts hier? >> http://mower-point.de/gambio-point/automower-ersatzteile/automower-305/
Es handelt sich ja um zwei bzw. 3 Bilder. Wenn ich ralative; nehme oder es ganz herausnehme habe ich die Bilder untereinander, was nicht Zweck der Sache ist. Eine andere Idee?
Dafür müsste ich erstmal wissen, wie es dann final aussehen soll. Hast du nen Entwurf, wie du dir das vorstellst?
Es sollte so aussehen: http://mower-point.de/gambio-point/automower-ersatzteile/automower-220-ac/a-gehaeuse-18/ Also die Explosionszeichnung über den Artikeln, aber eben mit der ImageMap.
Schwierig umzusetzen, wenn es auch in einer mobilen Ansicht mit dynamischen Bildgrößen funktionieren soll. Ob area coords mit Prozentangaben funktioniert weiß ich nicht. Ansonsten würde ich den Hover-Effekt auf die Bezeichnungen der Einzelteile legen. Dann einen div mit dynamischer Größe spannen und dort hinein die Bilder übereinander legen Alle gleich groß als PNG mit transparentem Hintergrund und entsprechend sichtbar/unsichtbar schalten
Bau um dein HTML folgendes: HTML: <div style="min-height: 1040px;"> <!-- dein HTML --> </div> Wie @timtim angemerkt hat wird das aber auf kleineren Displays dann trotzdem nicht funktionieren. Dann müsstest du für die einzelnen Breakpoints verschiedene Bilder laden und jedesmal eine neue Imagemap liefern.
Super Torben. Danke dir! Auf dem Smartphone gibt es ja sowieso kein Hover ... Wie kann ich denn den Html Abschnitt bei einer bestimmten Displaygröße deaktivieren und dafür das herkömliche Bild öffnen?
Moglicherweise hilft Dir das hier weiter: http://www.netzgesta.de/mapper/ Ist eine intelligente Lösung, denn der mapper markiert Dir die shapes automatisch. Lizenzbedingungen beachten! Ich probiere das gerade aus, das Ergebnis siehst Du hier: https://test.redozone.de/de/Tornador-Ersatzteile/z-010s/ Allerdings kriege ich das noch nicht responsiv hin.
Gib dem <div>-Container aus meinem Beispiel folgende Klassen: - hidden-xs - hidden-sm Damit wird das auf Smartphones und Tablets im Portrait-Modus ausgeblendet. Wenn du das normale Bild für die kleinen Breakpoints anzeigen willst, bau das Bild da extra per <img>-Tag ein und gib dem folgende Klassen: - hidden-md - hidden-lg - img-responsive Damit wird das Bild für größere Auflösungen nicht angezeigt und wird auf den kleinen Displays responsive skaliert.
Zum Beispiel so: HTML: <div class="hidden-xs hidden-sm" style="min-height: 1040px;"> <!-- dein HTML --> </div> <img class="hidden-md hidden-lg img-responsive" src="pfad/zu/deinem/bild.jpg" alt="Explosionszeichnung" />