Image mapping (Wordpress)

[WY79]

Ik heb van een plaatje, die staat in de header van de website een image map gemaakt met GIMP. Alleen nu wil ik de code inbrengen in mijn website. Maar hoe doe ik dat? De link van de website: *snip* spam / niet relevant
Ik heb linkjes geplaatst onder de bordjes van de 'Gemeente Ooststellingwerf, 'Gemeente Opsterland & 'Gemeente Weststellingwerf'.

Hoe werkt het om een image map te maken en die in de website te krijgen?

[ Voor 10% gewijzigd door RobIII op 23-10-2017 15:40 ]

[P_Tingen]

Ik zou zeggen: there's a plugin for that. Zo op het oog lijkt https://nl.wordpress.org/plugins/responsive-image-maps/ de plugin die je zoekt. Of dat werkt op je header image durf ik niet te zeggen

ot: toevallig ook mijn gemeente

[b2vjfvj75gjx7]

Dit heeft niets specifieks met WordPress te maken... imagemaps zijn er al 30 jaar (ooit zelfs serverside en clientside, begin jaren '90).

Je kan de afbeelding bewerken met een gratis tooltje;

https://boutell.com/mapedit/download.html

En je site is niet responsive, dus je map hoeft dat ook niet te zijn.

Wil je dat wel, dan kan je gewoon deze code gebruiken;

https://github.com/stowball/jQuery-rwdImageMaps

Daarmee krijg je dan superschaalbare imagemaps - zoals deze die ik laatst zelf heb gemaakt (responsive SVG imagemap) - https://deathgrunt.com/tmp/map/

[RobIII]

WY79 schreef op maandag 23 oktober 2017 @ 14:20:
De link van de website: *snip* spam / niet relevant
Ik heb linkjes geplaatst onder de bordjes van de 'Gemeente Ooststellingwerf, 'Gemeente Opsterland & 'Gemeente Weststellingwerf'.

Maak voortaan gewoon even een testcase of een jsfiddle i.p.v. ons laten klikken door een site en dan moeten zoeken in vele kilobytes HTML/CSS etc. Als je een testcase maakt met enkel de relevante(!) HTML/CSS etc. zul je vaak zélf al het probleem ontdekken en is gewoon onderdeel van debuggen dat je hoort te doen. Kom je er dan niet uit dan heb je automatisch iets wat je ons/anderen/derden kunt voorleggen om eens naar te kijken zonder dat zij zich door allerlei irrelevante zaken heen hoeven worstelen. Help ons jou helpen

offtopic:
Overigens, ik zal wel scheel zijn, maar "linkjes [...] onder de bordjes van de 'Gemeente Ooststellingwerf, 'Gemeente Opsterland & 'Gemeente Weststellingwerf'." Ik zie geen bordjes én geen linkjes Op geen enkele pagina uit 't hoofdmenu...

[ Voor 11% gewijzigd door RobIII op 23-10-2017 15:46 ]

[b2vjfvj75gjx7]

RobIII schreef op maandag 23 oktober 2017 @ 15:43:
[...]

offtopic:
Overigens, ik zal wel scheel zijn, maar "linkjes [...] onder de bordjes van de 'Gemeente Ooststellingwerf, 'Gemeente Opsterland & 'Gemeente Weststellingwerf'." Ik zie geen bordjes én geen linkjes Op geen enkele pagina uit 't hoofdmenu...

Qua usability is zo'n imagemap (in dit geval) indd. niet heel chill...

...maar de linkjes / bordjes zitten er wel in;



Overigens is de vraag - volgens mij - niet (meer) hoe je zo'n imagemap maakt, maar hoe je hem implementeert.

Beste is 'gewoon' de imagemap-code (die de editor hierboven kan genereren) in je footer te plaatsen (meestal footer.php bij standaard WP templates).

De afbeelding zelf moet dan wel een image-map-href hebben, anders is er geen causaal verband tussen plaatje enerzijds en code anderzijds (zie ook de src van de demo die ik hierboven postte - als dat is toegestaan tenminste).

---

- edit - JSFiddleeeeerrrrrrtje

 

HTML:

<img src="https://i0.wp.com/www.owo-participatiebeweging.nl/wp-content/uploads/2017/06/cropped-Project-OWO-bewerkt-in-paint.jpg" usemap="#cropped-Project-OWO-bewerkt-in-paint" alt="" style="border-style:none" />

<map id="cropped-Project-OWO-bewerkt-in-paint" name="cropped-Project-OWO-bewerkt-in-paint">
    <area shape="poly" alt="Map #1" coords="265,325,278,370,341,358,331,311" href="#map-1" title="Map #1" onClick="alert('map-1');" />
    <area shape="poly" alt="Map #2" coords="342,310,345,358,408,359,409,311" href="#map-2" title="Map #2" onClick="alert('map-2');" />
    <area shape="poly" alt="Map #3" coords="422,318,410,358,463,374,474,335" href="#map-3" title="Map #3" onClick="alert('map-3');" />
    <area shape="default" nohref="nohref" alt="" />
</map>

[ Voor 29% gewijzigd door b2vjfvj75gjx7 op 23-10-2017 16:09 ]

[WY79]

b2vjfvj75gjx7 schreef op maandag 23 oktober 2017 @ 15:18:
Dit heeft niets specifieks met WordPress te maken... imagemaps zijn er al 30 jaar (ooit zelfs serverside en clientside, begin jaren '90).

Je kan de afbeelding bewerken met een gratis tooltje;

https://boutell.com/mapedit/download.html

En je site is niet responsive, dus je map hoeft dat ook niet te zijn.

Wil je dat wel, dan kan je gewoon deze code gebruiken;

https://github.com/stowball/jQuery-rwdImageMaps

Daarmee krijg je dan superschaalbare imagemaps - zoals deze die ik laatst zelf heb gemaakt (responsive SVG imagemap) - https://deathgrunt.com/tmp/map/

Hoezo is de de site niet responsive?
Welk, beetje vergelijkbaar thema, is dat wel?

[WY79]

b2vjfvj75gjx7 schreef op maandag 23 oktober 2017 @ 16:02:
[...]


Qua usability is zo'n imagemap (in dit geval) indd. niet heel chill...

...maar de linkjes / bordjes zitten er wel in;

[afbeelding]

Overigens is de vraag - volgens mij - niet (meer) hoe je zo'n imagemap maakt, maar hoe je hem implementeert.

Beste is 'gewoon' de imagemap-code (die de editor hierboven kan genereren) in je footer te plaatsen (meestal footer.php bij standaard WP templates).

Footer?? De footer is toch de onderkant van de site? En de header de bovenkant? Dan zou ik de code in de header moeten zetten, maar daar zie ik nergens een verwijzing naar de afbeelding die gebruikt wordt.

De afbeelding zelf moet dan wel een image-map-href hebben, anders is er geen causaal verband tussen plaatje enerzijds en code anderzijds (zie ook de src van de demo die ik hierboven postte - als dat is toegestaan tenminste).

---

- edit - JSFiddleeeeerrrrrrtje

 

HTML:

<img src="https://i0.wp.com/www.owo-participatiebeweging.nl/wp-content/uploads/2017/06/cropped-Project-OWO-bewerkt-in-paint.jpg" usemap="#cropped-Project-OWO-bewerkt-in-paint" alt="" style="border-style:none" />

<map id="cropped-Project-OWO-bewerkt-in-paint" name="cropped-Project-OWO-bewerkt-in-paint">
    <area shape="poly" alt="Map #1" coords="265,325,278,370,341,358,331,311" href="#map-1" title="Map #1" onClick="alert('map-1');" />
    <area shape="poly" alt="Map #2" coords="342,310,345,358,408,359,409,311" href="#map-2" title="Map #2" onClick="alert('map-2');" />
    <area shape="poly" alt="Map #3" coords="422,318,410,358,463,374,474,335" href="#map-3" title="Map #3" onClick="alert('map-3');" />
    <area shape="default" nohref="nohref" alt="" />
</map>

[b2vjfvj75gjx7]

WY79 schreef op dinsdag 24 oktober 2017 @ 09:45:
[...]


Hoezo is de de site niet responsive?

Wat ik zo snel zag, maar de link is verdwenen, is dat niets meeschaalde.

Je wil minimaal hebben dat de afbeelding in de breedte zich aanpast, aan de breedte van je scherm;

Maar daardoor worden de coordinaten van je map ook anders.

Dat kan gewoon opgelost worden, maar qua UX / UA is het niet optimaal.

Dus het is maar de vraag of je belangrijke navigatie in een afbeelding moet stoppen die ook nog eens niet lekker meeschaald...