The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> HTML Image Map Hover Function
bnew10
post Jan 25 2012, 04:46 PM
Post #1


Newbie
*

Group: Members
Posts: 18
Joined: 25-January 12
Member No.: 16,329



Hello, let me preface my post by stating that I am a beginner when it comes to HTML code. I apologize ahead for my ignorance...

Now my questions, I am in the process of creating an image for the company I work for. Basically, I used Illustrator and have created an image with the goal of "mapping" particular areas of this image to create a "hover" effect. I am not sure if these are the correct terms to describe my goal. None the less, I have about 9 separate areas of this image that I would like a small text box to appear when someone rolls their mouse over each area. The text that appears on the rollover would be short and not too lengthy.

I have read a little into the process of "image mapping", but I do not need the mapped area to send someone to a different URL. I just want some simple text to appear to describe/explain the area of the image that folks are hovering above with their mouse. I am not sure if image mapping is still the process I need to pursue, or if there is a whole different process I need to use to achieve this goal?

Keep in mind I am unfamiliar with HTML terms and process (I went to school in a completely unrelated field) but I have enjoyed doing some very basic editing online. Typically, I have used a composer application to assist me with the technical process of HTML editing. Obviously, my goal would be to add this image to several different areas of our website, and allow this image to function as stated above. It appears that this is possible to do, and I have my image done and ready to edit to reflect the desired function.

If this helps, the image is that of a baseball diamond. The goal is when a customer hovers over a specific position on the field the text box would appear explaining the position further, then vanish when they moved their mouse away from that specific area.

Any help or links that might be helpful will be much appreciated. Thank you all...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
 
Reply to this topicStart new topic
Replies
pandy
post Jan 25 2012, 05:22 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,733
Joined: 9-August 06
Member No.: 6



How simple is OK? The most basic approach is to use the title attribute with the AREA tags of your image map.
http://htmlhelp.com/reference/html40/attrs.html#title
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Posts in this topic
bnew10   HTML Image Map Hover Function   Jan 25 2012, 04:46 PM
pandy   How simple is OK? The most basic approach is to us...   Jan 25 2012, 05:22 PM
bnew10   How simple is OK? The most basic approach is to u...   Jan 25 2012, 05:47 PM
pandy   'title' can be used with almost any elemen...   Jan 25 2012, 06:20 PM
bnew10   'title' can be used with almost any eleme...   Jan 25 2012, 07:00 PM
pandy   Yup. You've seen it before. Every time you...   Jan 25 2012, 07:37 PM
bnew10   Yup. You've seen it before. Every time you...   Jan 25 2012, 07:44 PM
pandy   Now I'm with you. Yes, that is correct. You do...   Jan 25 2012, 07:52 PM
bnew10   Now I'm with you. Yes, that is correct. You d...   Jan 25 2012, 07:58 PM
pandy   It requires some CSS and/or JavaScript knowledge. ...   Jan 25 2012, 08:48 PM
pandy   Forgot to say that this doesn't work in IE ver...   Jan 25 2012, 08:52 PM
bnew10   Forgot to say that this doesn't work in IE ve...   Jan 26 2012, 04:03 PM
bnew10   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTM...   Jan 27 2012, 06:00 PM
Frederiek   Have a look at this CSS exemple from Stu Nicholls ...   Jan 26 2012, 04:15 AM
bnew10   Have a look at this CSS exemple from Stu Nicholls...   Jan 26 2012, 04:05 PM
bnew10   Have a look at this CSS exemple from Stu Nicholls...   Jan 26 2012, 04:07 PM
pandy   I haven't looked, but it's probably basica...   Jan 26 2012, 04:49 PM
bnew10   I haven't looked, but it's probably basic...   Jan 26 2012, 05:19 PM
pandy   Nope. You can't change a thing about how the t...   Jan 26 2012, 06:11 PM
bnew10   Nope. You can't change a thing about how the ...   Jan 27 2012, 05:35 PM
pandy   If the user has turned it off (not likely), uses a...   Jan 27 2012, 05:42 PM
bnew10   If the user has turned it off (not likely), uses ...   Jan 27 2012, 06:01 PM
pandy   Just play around with it. It's often easier if...   Jan 27 2012, 07:08 PM
bnew10   Just play around with it. It's often easier i...   Jan 27 2012, 07:38 PM
pandy   There you go! You picked that up quickly! ...   Jan 27 2012, 07:54 PM
bnew10   There you go! You picked that up quickly...   Jan 27 2012, 08:09 PM
bnew10   There you go! You picked that up quickly...   Jan 27 2012, 08:18 PM
pandy   Exactly. Units are basically always required in ...   Jan 27 2012, 09:15 PM
bnew10   Excellent information... Ah, makes perfect sens...   Feb 1 2012, 04:09 PM
pandy   It works? Great! :)   Feb 5 2012, 09:05 PM
bnew10   It works? Great! :) Thanks for your help, ...   Feb 8 2012, 04:04 PM
Darin McGrew   There are also browser settings, browser plugins, ...   Jan 27 2012, 07:52 PM
bnew10   Is this correct? Or at least more so? <!D...   Jan 27 2012, 09:11 PM


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

 



- Lo-Fi Version Time is now: 27th April 2024 - 06:03 AM