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. |
pandy |
Jan 25 2012, 06:20 PM
Post
#4
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,732 Joined: 9-August 06 Member No.: 6 |
'title' can be used with almost any element. There is no special procedure for each one. It's just an attribute. It produces the typical pale yellow tooltip box.
Let's see if I got the coordinates right here now... CODE <img src="http://htmlhelp.com/icon/wdglogo.gif" width="250" height="74" usemap="#map" alt="Webdesign Group"> <map name="map"> <area coords="0,0,125,75" title="This is the left side"> <area coords="125,0,250,75" title="This is the right side"> </map> |
bnew10 |
Jan 25 2012, 07:00 PM
Post
#5
|
Newbie Group: Members Posts: 18 Joined: 25-January 12 Member No.: 16,329 |
'title' can be used with almost any element. There is no special procedure for each one. It's just an attribute. It produces the typical pale yellow tooltip box. Let's see if I got the coordinates right here now... CODE <img src="http://htmlhelp.com/icon/wdglogo.gif" width="250" height="74" usemap="#map" alt="Webdesign Group"> <map name="map"> <area coords="0,0,125,75" title="This is the left side"> <area coords="125,0,250,75" title="This is the right side"> </map> Ok, so whatever the "title" is equal to will be what the text field will show when hovering over the "area coords"? Also, I do not have to determine my locations before uploading the image to our server, correct? My HTML text will determine the properties of that image, as far as where on the image the hovering will activate the pop-up text? Basically, I upload my image to our browser, provide that image source, and then have my HTML text detail how that image will interact online? |
pandy |
Jan 25 2012, 07:37 PM
Post
#6
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,732 Joined: 9-August 06 Member No.: 6 |
QUOTE Ok, so whatever the "title" is equal to will be what the text field will show when hovering over the "area coords"? Yup. You've seen it before. Every time you've seen those yellow boxes it has been title in action. QUOTE Also, I do not have to determine my locations before uploading the image to our server, correct? My HTML text will determine the properties of that image, as far as where on the image the hovering will activate the pop-up text? Basically, I upload my image to our browser, provide that image source, and then have my HTML text detail how that image will interact online? Not sure I follow how you mean. It will work online and locally. The coordinates are relative the image dimensions. |
bnew10 |
Jan 25 2012, 07:44 PM
Post
#7
|
Newbie Group: Members Posts: 18 Joined: 25-January 12 Member No.: 16,329 |
QUOTE Ok, so whatever the "title" is equal to will be what the text field will show when hovering over the "area coords"? Yup. You've seen it before. Every time you've seen those yellow boxes it has been title in action. QUOTE Also, I do not have to determine my locations before uploading the image to our server, correct? My HTML text will determine the properties of that image, as far as where on the image the hovering will activate the pop-up text? Basically, I upload my image to our browser, provide that image source, and then have my HTML text detail how that image will interact online? Not sure I follow how you mean. It will work online and locally. The coordinates are relative the image dimensions. Sorry, I will attempt to explain better. I just wanted to confirm that there is nothing I need to do to an image other than upload it to our server, if I want to map out different areas of that image. Basically, I can add coordinates to create the hovering title box to any image online as long as I know the URL of the image and the coordinates I need to map out on the image itself, correct? The image itself does not require any editing to allow this hovering function? Thanks again! |
pandy |
Jan 25 2012, 07:52 PM
Post
#8
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,732 Joined: 9-August 06 Member No.: 6 |
Now I'm with you. Yes, that is correct. You don't need to do anything to the image itself.
|
bnew10 |
Jan 25 2012, 07:58 PM
Post
#9
|
Newbie Group: Members Posts: 18 Joined: 25-January 12 Member No.: 16,329 |
Now I'm with you. Yes, that is correct. You don't need to do anything to the image itself. Terrific. Now, you first post mentioned that this is the simplest manner to achieve my desired results. I am assuming there is a method that is possible that will allow me to possibly adjust the font, add a border, spice it up a bit, etc.? Obviously, I am not the savviest when it comes to writing in HTML, but in your opinion is there another process you could recommend that might add a little more customization to the pop-up text box while hovering over specific areas of an image that does not require extensive HTML knowledge? |
pandy |
Jan 25 2012, 08:48 PM
Post
#10
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,732 Joined: 9-August 06 Member No.: 6 |
It requires some CSS and/or JavaScript knowledge.
You can position boxes with your tooltip text on top of the image and keep them hidden to start with. You can do this with only CSS (no JavaScript) but then the tooltip text must be contained in the element with the :hover. You can't place those tooltip texts where they will make sense if the page is viewed without CSS. CSS has no way of saying "make something happen way over there when this element is hovered". JavaScript has. This is a concern only if you care about how the page looks unstyled. It may be argued that should always be a concern, but.. This is ugly, but just to show you what's required. I added a red border to the DIVs that has the :hover so you can see where they are. Can you follow this? If you can, then you can roll your own. CODE <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title></title> <style type="text/css"> <!-- #imgwrap { width: 250px; height: 74px; position: relative } #left { width:83px; height: 35px; position: absolute; top: 0; left: 0; border: 2px solid red; } #right { width: 83px; height: 35px; position: absolute; bottom: 0; right: 0; border: 2px solid red } #left span, #right span { width: 5em; font: bold 75% Arial, sans-serif; color: black; background: orange; border: 5px dotted green; display: none } #left:hover span, #right:hover span { display: block } --> </style> </head> <body> <div id="imgwrap"> <img src="http://htmlhelp.com/icon/wdglogo.gif" width="250" height="74" usemap="#map" alt="Webdesign Group"> <div id="left"><span>The is the top left corner</span></div> <div id="right"><span>The is the bottom right corner</span></div> </div> </body> </html> |
pandy |
Jan 25 2012, 08:52 PM
Post
#11
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,732 Joined: 9-August 06 Member No.: 6 |
Forgot to say that this doesn't work in IE versions older than 7 and it only works in IE7 if it is in Standards Mode. IE6 and older support :hover only for links.
Standards Mode and Quirks Mode are a mess called doctype switching. You can read all about that at the below page, but the doctype I used will give you Standards Mode (AKA Strict Mode). http://hsivonen.iki.fi/doctype/ |
bnew10 |
Jan 26 2012, 04:03 PM
Post
#12
|
Newbie Group: Members Posts: 18 Joined: 25-January 12 Member No.: 16,329 |
Forgot to say that this doesn't work in IE versions older than 7 and it only works in IE7 if it is in Standards Mode. IE6 and older support :hover only for links. Standards Mode and Quirks Mode are a mess called doctype switching. You can read all about that at the below page, but the doctype I used will give you Standards Mode (AKA Strict Mode). http://hsivonen.iki.fi/doctype/ Hmm, seems rather in depth for me right now. I probably will just stick with the basic title idea your originally provided. Also, will this function work on all major browsers? I know you stated that the second option that requires a bit more knowledge was not supported on older IE versions. Ideally, I would like this idea to work on all major browsers, if possible. Thanks again for all your help. |
Lo-Fi Version | Time is now: 27th April 2024 - 12:45 AM |