HTML Image Map Hover Function |
HTML Image Map Hover Function |
bnew10 |
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... |
pandy |
Jan 25 2012, 05:22 PM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,732 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 |
bnew10 |
Jan 25 2012, 05:47 PM
Post
#3
|
Newbie Group: Members Posts: 18 Joined: 25-January 12 Member No.: 16,329 |
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 @Pandy, Thank you for the reply. Do you have a link you could provide that shows an image using this type of effect? I am curious at to what the text would look like when hovering the mouse above the specific area. Also, using this process does it allow defining a particular area of my image and allow for different text to appear when hovering over each specific area? I could not locate any coordinates in the HTML on the link you provided that implied you could mark certain areas for this hover option... thanks again. |
Lo-Fi Version | Time is now: 27th April 2024 - 01:03 AM |