image - on a website - and do add some links from certain points

[saint_m]

Good day dear friends

 
one question - can we use such a image - on a website - and do add some links from certain points. 
is  this doable - can we do something like this?
 
  hmmm - i will try to do that by creating an imagemap.
 

https://www.w3schools.com/html/html_images_imagemap.asp

see the image: 

   

 Note: i only need links  from - let us say 10 points - that lead to other webpages. Is this possible?! 

what is aimed: i want to use the map in a wordpress page - and certain points should have a link to other pages.
can we do that!?



ps. Since i want to do such thinks in WordPress - i guess the following plugins may be of great help:

Draw Attention    Very popular and user-friendly. You can draw hotspots directly onto the image.    Focuses on ease of use; perfect for infographics and floor plans.

ImageLinks    Allows you to link areas of an image to links, videos, or other content.    Offers a drag-and-drop interface and extensive customization options.

so i hope this may be useful - also for others who are heading into the same  direction

ps. keep up this great forum -it rocks [img]data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7[/img]  [img]data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7[/img]

[denzjos]

To define the area containing the dots, you can select them by clicking the white background with the 'Select by Colour' tool, using a threshold of 20. Then choose: Select > To Path. Perhaps someone has an idea of how to determine the coordinates of the resulting paths. I believe Ofnuts has a GIMP plug-in for GIMP 2.10.38 that allows path values to be exported to an Excel spreadsheet.

   

[MrsP-from-C]

GIMP has an imagemap plug-in built in:
https://docs.gimp.org/3.0/en/plug-in-imagemap.html

No idea if that is helpful in combination with OP's wordpress.
Probably some HTML knowledge is of advantage.

[saint_m]

good day dear MrsP-from-C

many thanks for the quick reply

Quote:GIMP has an imagemap plug-in built in:
https://docs.gimp.org/3.0/en/plug-in-imagemap.html

No idea if that is helpful in combination with OP's wordpress.
Probably some HTML knowledge is of advantage.

i

glad to hear from you
will definintley have a closer look at all that!!

Greetings

[saint_m]

hello dear denzjos hello dear MrsP-from.C


many thanks for your reply - and for sharing the ideas - 

as it is aimed to include the map into a wordpress - i  think its intersting to see which reply i got in the wp-forum: 

see: https://wordpress.org/support/topic/imag...in-points/

Quote:There’s a tragic flaw with native HTML <map> and <area> image map elements. They do not behave responsively like your images might. If your image is scaled differently than when you created the image map elements, the area elements will no longer correspond to the correct parts of your image.

Fortunately, this flaw can be corrected with some JavaScript. For example https://github.com/davidjbradshaw/image-map-resizer

The plugins you mention probably already include some sort of JS resizer like that. This reply applies more to anyone manually creating their own HTML image map.

Alternately, if your image is vector based, you could implement it as an SVG image. You can then hotlink SVG nested elements such as <path> with <a> anchor tags, making it essentially a responsive image map. Of course if you have a raster image such as a photo, this SVG approach will not work.

see:  https://wordpress.org/support/topic/imag...in-points/


see one of the two plugins: 


https://wordpress.org/plugins/draw-attention/

https://wpdrawattention.com/

but yes  - i guess that we would be able to do it without a wordpress-plugin.. - at least it seems so - after reading the comment in the wordpress-forum

what do you say!?

look forward to hear from you 

[MrsP-from-C]

No further advice from me .... I keep away from WordPress and from all this "click & play" stuff.
I'm old-fashioned and like coding with an editor rather than GUI things.
Nothing bad with doing it via GUI but just my way to do it.

[saint_m]

g day dar MrsP-from-C

thanks for the comment - allways many thanks for sharing your ideas - thoughts and experience with us all.

you are so great - thanks for the support of the forum.
greetings