afbeelding van Jef Bruyninckx

Link onderdeel van een tekening

Mijn dochter vraagt mij een website te bouwen in drupal 8. Zij wil werken met tekeningen (zie voorbeeld in bijlage) en op onderdelen van die tekening wil zij dan een link naar een infopagina over het betrokken item. Iemand enig idee hoe ik dat best aanpak?

BijlageGrootte
PDF icon Linken naar deelpagina's644.38 KB
Drupalversie: 
8.x
Auteur: 
Jef Bruyninckx
afbeelding van Jef Bruyninckx
Door Jef Bruyninckx op 3 augustus, 2018 - 16:08

Onder het motto "de niet-specialist denkt niet in geijkte patronen" heb ikzelf het volgende bedacht:
Een (web)tekening, afbeelding en ook een tekstpagina is opgebouwd uit pixels. Kan er geen systeem worden ontworpen waarbij met de cursor een groep pixels worden geslecteerd in een lasso, die pixels vormen dan de basis van de link naar een ndere plek op de website (of erbuiten). Als aanduiding dat er een link onderzit, verandert de ondergrondkleur als we er met de cursor overgaan. Misschien bestaat hiervoor al een module? Zeg me dan dewelke? Of als hij nog niet bestaat, wie kan en wil hem dan ontwerpen?

afbeelding van jo.w
Door jo.w op 3 augustus, 2018 - 21:05

Zoals ik je dus aan de telefoon al zei: imagemaps.

Eventueel googlen op "responsive imagemaps". Ik zag dat er zelfs online generators zijn (maar 'k heb ze niet getest).

Jo

afbeelding van Niek Kloots
Door Niek Kloots op 3 augustus, 2018 - 16:43

In PaintShop Pro doe je dat als volgt:
1/ Bestand > Openen
2/ Bestand > Exporteren > Afbeelding met hyperlinks
3/ aan de slag met hyperlinks invoegen

voorbeeld: https://noww.nl/node/642 Paginabron regel 2247

zal hieronder een deel van de code geven. Waar $$ staat moet je > denken en waar €€ staat moet je < denken, want ik kan hier geen code plaatsen. Edit Jo: $$ en €€ vervangen.
Het gaat om Harlingen

<img alt="" border="0" height="776" name="kaartbenelux2014" src="http://noww.nl/images/kaartbenelux2014.gif" usemap="#kaartbenelux2014" width="616" id="kaartbenelux2014" /$$
map name="kaartbenelux2014" id="kaartbenelux2014">
<area alt="De 2 km Zeezwemtocht, Harlingen" coords="401, 112, 5" href="http://noww.nl/taxonomy/term/60" shape="circle" target="_blank" title="De 2 km Zeezwemtocht, Harlingen" />

Het eerste deel geeft aan om welke afbeelding het gaat.
Het tweede deel geeft de vorm van de hyperlink gevoelige plek aan. hier dus "circle" en coords geeft de plaats op de tekening weer.

http://familiekloots.nl
hobby: http://noww.nl en http://openwaterswimming.eu

afbeelding van jo.w
Door jo.w op 3 augustus, 2018 - 21:15

In plaats van < typ je &lt; en ipv > wordt het &gt;

Jo

afbeelding van Niek Kloots
Door Niek Kloots op 6 augustus, 2018 - 23:27

Waarom werkt tussen &ltcode&gt &lt/code&gt niet?

Met als resultaat iets als blockquote?

&gt en &gt werkt bij mij hier dus niet als < en >.

update het werkt:
& lt ; aan elkaar geeft <

http://familiekloots.nl
hobby: http://noww.nl en http://openwaterswimming.eu

afbeelding van jo.w
Door jo.w op 6 augustus, 2018 - 15:07

Vergeet de komma-punt niet na &lt; en &gt;. Tekstopmaak staat bij mij (standaard) op "Filtered HTML". Zou er mee kunnen te maken hebben dat ik een andere rol heb als jij.

Jo

afbeelding van joker
Door joker op 4 augustus, 2018 - 16:07

Mss kan deze module een oplossing bieden: https://www.drupal.org/project/image_hotspots. Oei ik zie nu dat dit een drupal 7 versie is. Voor drupal 8 nog een Development version.

groet
Joker

afbeelding van belba
Door belba op 5 augustus, 2018 - 06:09

Dan denk ik er aan om dit in SVG te maken. Met deze software kan je zeer simpel vector afbeeldingen maken. Je zou er ook de bestaande tekeningen kunnen op downloaden en dan verder bewerken met het programma. Met dit programma, sla je alles in het gewenste formaat op (svg in jou geval). In SVG, voeg je zoals in HTML met een simpele 'a' tag een link in.

Bookmark and Share

Drupal is een geregistreerd merk van Dries Buytaert. | Powered by Pantheon.

Drupal.be/Drupal.nl is de website van de Nederlandstalige Drupalgemeenschap.