Group Photo

[irongoat]

I've just put up a website and I would like to add some html or javascript code which would cause the name of the person in the family portrait to be identified when the mouse pointer is placed over it (do I need onmouseover for this?). I've created a "hot spot" over Rosemary's face but I don't know where to put, or how to create the rectangular box with her name in it. Any help would be appreciated.

[Skemcin]

there are a couple ways I can see you doing this.but first, I'd head over tot he javascript section and look at the Snippets sticky I put together. In there you will find a Show/Hide script. Do not worry about putting the name of the person on the image, just yet. Your first step is to implement that into the site map you made - I've done it, its possible. So that when you mouse over the face, their name appears in a <div> below the photo.Once you have accomplished that, then you can use CSS absolute positioning to move that <div> to the desired location - all trial an error since the imagemap coordinates are pixels specific to the image where the location of the name will be relative to the entire window.Anyway, you then repeat this process for everyone in the picture. so if the photo has 30 people, you will have 30 <div> tags each with their own ID and their own absolute positioning style definitions.Let me know if that makes sense.

[irongoat]

there are a couple ways I can see you doing this.but first, I'd head over tot he javascript section and look at the Snippets sticky I put together. In there you will find a Show/Hide script. Do not worry about putting the name of the person on the image, just yet. Your first step is to implement that into the site map you made - I've done it, its possible. So that when you mouse over the face, their name appears in a <div> below the photo.Once you have accomplished that, then you can use CSS absolute positioning to move that <div> to the desired location - all trial an error since the imagemap coordinates are pixels specific to the image where the location of the name will be relative to the entire window.Anyway, you then repeat this process for everyone in the picture. so if the photo has 30 people, you will have 30 <div> tags each with their own ID and their own absolute positioning style definitions.Let me know if that makes sense.

[irongoat]

there are a couple ways I can see you doing this.but first, I'd head over tot he javascript section and look at the Snippets sticky I put together. In there you will find a Show/Hide script. Do not worry about putting the name of the person on the image, just yet. Your first step is to implement that into the site map you made - I've done it, its possible. So that when you mouse over the face, their name appears in a <div> below the photo.Once you have accomplished that, then you can use CSS absolute positioning to move that <div> to the desired location - all trial an error since the imagemap coordinates are pixels specific to the image where the location of the name will be relative to the entire window.Anyway, you then repeat this process for everyone in the picture. so if the photo has 30 people, you will have 30 <div> tags each with their own ID and their own absolute positioning style definitions.Let me know if that makes sense.

[irongoat]

Sorry for the multiple replies. This is my first attempt. Thanks for your prompt reply to my group photograph question. I had searched for onmouseover and found a nice example at http://www.w3schools.com/tags/tag_map.asp of the planets example. This is the technique I wanted but I didn't have access to planets.gif, so when I copied the code, I couldn't get it to execute. In my case I didn't wish to click to another htm page; I only wish to have the name of the "hot spot" face appear just as you have the words "sun", "mercury" and "venus" pop up. Could you help me implement that technique?David Kimball

[Skemcin]

The solution I outlined doesn't click to another page. The top of the page has the photo and the bottom of the page has a <div> for each person in the photo. The CSS hides the <div> so that you never seem them. But using the Show/Hide script I referenced, you are able to make the specific <div> tag visible. Then, properly absolutely positioned, the persons name would appear by the name.

[irongoat]

Are we talking about the same example on the Javascript section? I don't know what Snippets sticky is. I looked at the planets example which at http://www.w3schools.com/tags/tag_map.asp. What command produces the little yellow rectangle with the word "sun" in it? Could you e-mail me the planets.gif so that I could experiment with and understand the planets.htm better?

[Skemcin]

re: http://w3schools.invisionzone.com/index.php?showtopic=9500

[Nim199]

All you need is an image map, and the corrdinates required.

[irongoat]

You're right. Here's a portion of the code that works OK with IE but not with Netscape nor Firefox. Is it true that Netscape and Firefox do not pop up "alt" tags? If so, is there a way to enable them to do so? My website is http://www.kim-webb.org. The hot spot with the mouse arrow on Rosemary's face in the group photo should self-identify Rosemary (on the back row to the viewer's left).html><body><img src ="portrait.jpg" width="377" height="300" usemap ="#portraitmap"/><map id ="portraitmap" name="portraitmap"> <area shape ="rect" coords ="55,76,66,98" nohref="..." target ="_blank" alt="Rosemary"/></map></body></html>

[jlhaslip]

IE incorrectly uses the Alt tag. FF, Opera, and Netscape correctly use the title attribute.I'd add both to the Image map.

[irongoat]

Here is the first hot spot for my website http://www.kim-webb.org<map id ="portraitmap" name="portraitmap"> <area shape ="rect" coords ="55,76,66,98" nohref="..." target ="_blank" alt="Rosemary"/></map>It works OK with IE. Where would I place the <title> tag so that it will also work with Netscape?

[LaLaLa]

There's no such thing as a <TITLE> *tag*, it's really just an attribute, which means it goes inside the brackets of a tag. Like this:----------------------------------------------------------------

<html><body><img src ="portrait.jpg" width="377" height="300" usemap ="#portraitmap"/><map id ="portraitmap" name="portraitmap"><area shape ="rect" coords ="55,76,66,98" nohref="..." target ="_blank" alt="Rosemary" title="Rosemary" /></map></body></html>

----------------------------------------------------------------

[boen_robot]

Well, technically speaking, there's the "title" element that goes into the "head" of a page, and it consist of an opening "title" tag and a closing "title" tag . But for this case, yes - it's the title attribute that was meant.