Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Markup (HTML, XHTML, XML) _ Balloons in pictures

Posted by: Lee Batchelor May 14 2020, 08:51 AM

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!

Posted by: Christian J May 14 2020, 11:19 AM

Hi!

QUOTE(Lee Batchelor @ May 14 2020, 03:51 PM) *

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.

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

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

Posted by: Lee Batchelor May 14 2020, 01:04 PM

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.


Posted by: Christian J May 14 2020, 04:50 PM

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

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)