Jump to content

Group Photo


irongoat
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

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>

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...