Interactive display of a spot and text on top of an image

by Bill Oldroyd   Last Updated May 15, 2018 19:08 PM

I know next to nothing about WordPress and I would be grateful if you can help me.

I have a set of digitised, historical photographs and associated metadata records.

The metadata contains lists of people, objects and places included in the photograph.

Within the html for displaying an object etc. there is a link which will draw a dot and some text on the image at the location of the object.

Example metadata :

People: | John Smith { 234, 56 } , Joe Bloggs , Will Jones

The text for John Smith is converted by the web server to this html :

<span class='showSpot' onclick='idPerson("myCanvas","picture","John Smith", 234, 56, 11)'>John Smith</button>  

11 is the length of the text, and is not really necessary.

CSS is used to indicate that a span may be clicked. On clicking this span, a javascript function associated with the web page displays a dot and the text on top of the image. Several dots and text may be displayed if necessary.

There is also an separate edit function.

An image is displayed with associated metadata input form. The user can enter text in a metadata field, select some text, move the cursor over the image and click on a point within the image. A javascript function then wraps the selected text with the clicked position as shown earlier.

I would like to provide these functions within a WordPress application. Is there software or a plugin I could use for this ?.



Related Questions



Separate images from text in post

Updated October 04, 2017 10:08 AM


Automatically decrease font size for long words

Updated May 10, 2018 23:08 PM