Cookies op Tweakers

Tweakers maakt gebruik van cookies, onder andere om de website te analyseren, het gebruiksgemak te vergroten en advertenties te tonen. Door gebruik te maken van deze website, of door op 'Ga verder' te klikken, geef je toestemming voor het gebruik van cookies. Wil je meer informatie over cookies en hoe ze worden gebruikt, bekijk dan ons cookiebeleid.

Meer informatie

Image mapping sluit blogpost verkeerd af (Wordpress)

Pagina: 1
Acties:

Onderwerpen

Vraag


  • mondaymood
  • Registratie: december 2016
  • Laatst online: 04-05 19:43
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!

Alle reacties


  • P1nGu1n
  • Registratie: juni 2011
  • Laatst online: 20:59

P1nGu1n

Developer

Kan je dit eens proberen?
HTML:
1
2
3
4
5
6
7
8
9
<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 '&'.

P1nGu1n wijzigde deze reactie 11-12-2016 11:05 (3%)

Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live.


  • mondaymood
  • Registratie: december 2016
  • Laatst online: 04-05 19:43
Hi! Ik heb de " eruit gehaald en vervangen door de juiste quotes. Echter geeft het nog geen verbetering..

  • P1nGu1n
  • Registratie: juni 2011
  • Laatst online: 20:59

P1nGu1n

Developer

quote:
mondaymood 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 :)

P1nGu1n wijzigde deze reactie 11-12-2016 12:02 (8%)

Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live.


  • mondaymood
  • Registratie: december 2016
  • Laatst online: 04-05 19:43
Het is opgelost - bedankt voor de moeite!

mondaymood wijzigde deze reactie 11-12-2016 16:38 (99%)


  • JJ93
  • Registratie: maart 2013
  • Laatst online: 20-09 22:50

JJ93

Error 418

quote:
mondaymood 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?

Obduro | Android apps | iOS apps | Voertuig.net

Pagina: 1


Apple iPhone X Google Pixel XL 2 LG W7 Samsung Galaxy S8 Google Pixel 2 Sony Bravia A1 OLED Microsoft Xbox One X Apple iPhone 8

© 1998 - 2017 de Persgroep Online Services B.V. Tweakers vormt samen met o.a. Autotrack en Hardware.Info de Persgroep Online Services B.V. Hosting door True

*