Image mapping sluit blogpost verkeerd af (Wordpress)

[Verwijderd]

Hi! Ik ben bezig met het uitproberen van image mapping. Ik heb een mooie afbeelding gemaakt met aardig wat links er in verwerkt. Maar wanneer ik deze code in een Wordpress-artikel plaats, verdwijnt de tekst onder het artikel en is de opmaak van de related posts veranderd. Heeft iemand enig idee hoe ik de code goed moet afsluiten? Zie bijgaande screenshots.

Hoe het is:



Hoe het zou moeten zijn (dit is zonder mapping):



Hoe de code er uit ziet:

---

<img src="https://c1.staticflickr.com/1/85/31522174846_70eebef012_o.png" width="640" alt="sierkussens" usemap="#anne" />

<map name="anne" id="anne">

<area alt="H&M kussen - gouden ananas" title="H&M kussen - gouden ananas" target="_blank" href="http://www.hm.com/nl/product/52131?article=52131-A" coords="13,21,193,193" />

<area alt="H&M kussen - enjoy today" title="H&M kussen - enjoy today" target="_blank" href="http://www.hm.com/nl/product/51448?article=51448-B" coords="443,14,625,196" />

<area alt=“Mister Design kussen - curry“ title="Mister Design kussen - curry" target=“_blank” href="https://www.misterdesign.nl/cone-cushion-kussen-curry-ferm-living.html?gclid=CNXD267b6tACFYaVGwodjWkLkw" shape="rect" coords="218,1614,410,1797” />

</map>

---

De code bestaat uit meer links maar het leek me overbodig dit volledig te kopieren. Dat is allemaal hetzelfde.

Wat ik in de CSS zie:



Wat ik bij "gewone" artikelen in de CSS zie:



Ik hoop dat iemand mij kan helpen, mijn dank is groot!

[P1nGu1n]

Kan je dit eens proberen?

HTML:

<map name="anne" id="anne"> 

    <area alt="H&amp;M kussen - gouden ananas" title="H&amp;M kussen - gouden ananas" target="_blank" href="http://www.hm.com/nl/product/52131?article=52131-A" coords="13,21,193,193" />

    <area alt="H&amp;M kussen - enjoy today" title="H&amp;M kussen - enjoy today" target="_blank" href="http://www.hm.com/nl/product/51448?article=51448-B" coords="443,14,625,196" />

    <area alt="Mister Design kussen - curry" title="Mister Design kussen - curry" target="_blank" href="https://www.misterdesign.nl/cone-cushion-kussen-curry-ferm-living.html?gclid=CNXD267b6tACFYaVGwodjWkLkw" shape="rect" coords="218,1614,410,1797" />

</map>

In het laatste area element, heb je een paar verkeerde quotes staan. Het valt bijna niet op, maar het zijn niet de goede. Heb je misschien een Mac? Dan moet je 'smart quotes' uitzetten.

Boven is goed, onder is fout:


Daarnaast moet je de '&' in H&M 'escapen', want dat is een speciaal karakter. Dat doe je door '&' door '&amp;' te vervangen. Dan weet het dat je niet de code '&' bedoeld, maar het karakter '&'.

[ Voor 3% gewijzigd door P1nGu1n op 11-12-2016 11:05 ]

[Verwijderd]

Hi! Ik heb de " eruit gehaald en vervangen door de juiste quotes. Echter geeft het nog geen verbetering..

[P1nGu1n]

Verwijderd schreef op zondag 11 december 2016 @ 11:59:
Hi! Ik heb de " eruit gehaald en vervangen door de juiste quotes. Echter geeft het nog geen verbetering..

Zou je het totale blok code kunnen plaatsen? De code die ik hierboven plaatste is helemaal geldig, dus dan zal er toch ergens nog een fout in moeten zitten

[ Voor 8% gewijzigd door P1nGu1n op 11-12-2016 12:02 ]

[Verwijderd]

Het is opgelost - bedankt voor de moeite!

[ Voor 99% gewijzigd door Verwijderd op 11-12-2016 16:38 ]

[JJ93]

Verwijderd schreef op zondag 11 december 2016 @ 16:31:
Het is opgelost - bedankt voor de moeite!

Wellicht handig om aan te geven hoe je het opgelost hebt?