The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Balloons in pictures
Lee Batchelor
post May 14 2020, 08:51 AM
Post #1





Group: Members
Posts: 5
Joined: 10-May 20
Member No.: 27,332



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!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 14 2020, 11:19 AM
Post #2


.
********

Group: WDG Moderators
Posts: 8,444
Joined: 10-August 06
Member No.: 7



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/We...board/writeText it seems to require some additional syntax, and also the browser's permission.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Lee Batchelor
post May 14 2020, 01:04 PM
Post #3





Group: Members
Posts: 5
Joined: 10-May 20
Member No.: 27,332



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 14 2020, 04:50 PM
Post #4


.
********

Group: WDG Moderators
Posts: 8,444
Joined: 10-August 06
Member No.: 7



In any case, inserting text in the user's clipboard isn't very useful, and won't create any balloons...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 5th June 2020 - 06:28 PM