Balloons in pictures Options

[Lee Batchelor]

Hi all,

My topic title may be a little misleading. I have an old picture of the Clark family (around 1900) on a web page. There are several people in the picture. I want to set it up so that my users can hover their mouse over any of the people in the picture and have the name appear. I have written the following code but it doesn't work. The W3C validator finds no errors. My code defines each person's head inside a rectangle.

<table class="innertable">
<tr><td >
<img src="Clarkfamily3.jpg" width="338" height="248" alt="Wm. Clark family" usemap="#clarkfamily">
<map name="clarkfamily">
<area shape="rect" coords="1,1,336,245" onmouseover="writeText( 'Name of the person' )" />
</map>
</td></tr>
</table>

As you can see, the coordinates of the rectangle are inside the picture. They aren't correct for an individual head. I just tried to get the code to work anywhere inside the picture for now. Thanks!

[Christian J]

Hi!

I want to set it up so that my users can hover their mouse over any of the people in the picture and have the name appear.

The easiest might be to use TITLE attributes on the AREA elements.

onmouseover="writeText( 'Name of the person' )"

This would write to the system clipboard, but according to https://developer.mozilla.org/en-US/docs/We...board/writeText it seems to require some additional syntax, and also the browser's permission.

[Lee Batchelor]

Thanks, Christian. I copied the code from another website where this technique works but W3C found about 160 errors in the other website's code. I don't know if that has anything to do with it. My code comes back clean.



This post has been edited by Lee Batchelor: May 14 2020, 01:24 PM

[Christian J]

In any case, inserting text in the user's clipboard isn't very useful, and won't create any balloons...