Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ General Web Design _ HTML Image Map Hover Function

Posted by: bnew10 Jan 25 2012, 04:46 PM

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...

Posted by: pandy Jan 25 2012, 05:22 PM

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

Posted by: bnew10 Jan 25 2012, 05:47 PM

QUOTE(pandy @ Jan 25 2012, 05:22 PM) *

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.

Posted by: pandy Jan 25 2012, 06:20 PM

'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>



Posted by: bnew10 Jan 25 2012, 07:00 PM

QUOTE(pandy @ Jan 25 2012, 06:20 PM) *

'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?

Posted by: pandy Jan 25 2012, 07:37 PM

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.

Posted by: bnew10 Jan 25 2012, 07:44 PM

QUOTE(pandy @ Jan 25 2012, 07:37 PM) *

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!

Posted by: pandy Jan 25 2012, 07:52 PM

Now I'm with you. Yes, that is correct. You don't need to do anything to the image itself.

Posted by: bnew10 Jan 25 2012, 07:58 PM

QUOTE(pandy @ Jan 25 2012, 07:52 PM) *

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?

Posted by: pandy Jan 25 2012, 08:48 PM

It requires some CSS and/or JavaScript knowledge. wink.gif

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. smile.gif

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>




Posted by: pandy Jan 25 2012, 08:52 PM

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/

Posted by: Frederiek Jan 26 2012, 04:15 AM

Have a look at this CSS exemple from Stu Nicholls : http://www.cssplay.co.uk/menu/solar_map.html .
There's also a clickable version, with javascript, at http://www.stunicholls.com/various/solar_map.html .

Posted by: bnew10 Jan 26 2012, 04:03 PM

QUOTE(pandy @ Jan 25 2012, 08:52 PM) *

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.

Posted by: bnew10 Jan 26 2012, 04:05 PM

QUOTE(Frederiek @ Jan 26 2012, 04:15 AM) *

Have a look at this CSS exemple from Stu Nicholls : http://www.cssplay.co.uk/menu/solar_map.html .
There's also a clickable version, with javascript, at http://www.stunicholls.com/various/solar_map.html .



Thanks for the info. However, I am not sure how to work with CSS or if I even can get it to work on our site. Our site is through Yahoo Small business. I apologize if this question is extremely ignorant, but can I use CSS just as I do HTML? Or does CSS require a completely different system?

Thanks.

Posted by: bnew10 Jan 26 2012, 04:07 PM

QUOTE(Frederiek @ Jan 26 2012, 04:15 AM) *

Have a look at this CSS exemple from Stu Nicholls : http://www.cssplay.co.uk/menu/solar_map.html .
There's also a clickable version, with javascript, at http://www.stunicholls.com/various/solar_map.html .



I just looked at both links and that is exactly what I had in my mind's eye when I came up with this idea. How difficult are we talking here?

Posted by: pandy Jan 26 2012, 04:49 PM

I haven't looked, but it's probably basically the same deal I gave you a simple version of, only this one is pretty. biggrin.gif It isn't hard, but you need to familiarize yourself with a few concepts you may not yet know. The display property, how you can show or hide things on :hover and positioning.

As for your other question, title works in all fairly recent browsers. The ones that don't support title are so old it doesn't matter, Netscape 4 and older. To be honest, I'm not sure what other devices than graphical browsers do with title, if they do anything at all.

Why not start with title and then take your time to figure those other things out and you can update when you've got right?

Posted by: bnew10 Jan 26 2012, 05:19 PM

QUOTE(pandy @ Jan 26 2012, 04:49 PM) *

I haven't looked, but it's probably basically the same deal I gave you a simple version of, only this one is pretty. biggrin.gif It isn't hard, but you need to familiarize yourself with a few concepts you may not yet know. The display property, how you can show or hide things on :hover and positioning.

As for your other question, title works in all fairly recent browsers. The ones that don't support title is so old it doesn't matter, Netscape 4 and older. To be honest, I'm not sure other devices than graphical browsers do with title, if they do anything at all.

Why not start with title and then take your time to figure those other things out and you can update when you've got right?



I definitely agree. That was what I did not know about the first option you suggested. I did not know if one could edit the font, add a border, etc. to the "simple" title option. It appears that it is possible in HTML correct? I will just try and teach myself as I go and see if I can eventually, slowly upgrade the appearance. I just thought when Frederiek suggested those two different ideas that they would not be possible for me to do using HTML, and would require knowledge in CSS and/or Javascript.

Posted by: pandy Jan 26 2012, 06:11 PM

Nope. You can't change a thing about how the title is displayed.

Posted by: bnew10 Jan 27 2012, 05:35 PM

QUOTE(pandy @ Jan 26 2012, 06:11 PM) *

Nope. You can't change a thing about how the title is displayed.


Ah, I think I misunderstood before. I am looking at the code now you provided and am going to try and edit it to reflect what I am trying to do. I may need some help for some basic stuff and I hope you won't mind if I pick your brain a bit. You have been extremely helpful!

One last question, are there situations were CSS would not be supported on our site? I have only ever written in basic HTML and do not know if our site will support CSS...

Posted by: pandy Jan 27 2012, 05:42 PM

If the user has turned it off (not likely), uses a very old browser (even less likely) or if he uses some device other than a graphical browser that can't make head or tail of your CSS. Also, as I said before about title, I don't know what screen readers do with this either.

For whatever reason CSS isn't supported, they will see your popup texts where you've placed them in the HTML. Same goes for bots, as Google for example.

Posted by: bnew10 Jan 27 2012, 06:00 PM

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>

[/quote]


@Pandy,

Just to make sure I am understanding some key terms and ideas, I listed what it seems like the code means. If you could just confirm/correct me on my below definitions...


#imgwrap = the complete image size
#left = an area that has been mapped to produce the desired hover function
#right = same as above
#left span, #right span = how the popup is displayed (borders, font size, color, etc.)
#left:hover span, #right:hover span = the action performed when mouse is in the mapped area?

<div id= the image name?
<img src= URL of the image being used
<div id="left"> = what text pops up when hovering over the designated area
<div id="right">= same as above





Posted by: bnew10 Jan 27 2012, 06:01 PM

QUOTE(pandy @ Jan 27 2012, 05:42 PM) *

If the user has turned it off (not likely), uses a very old browser (even less likely) or if he uses some device other than a graphical browser that can't make head or tail of your CSS. Also, as I said before about title, I don't know what screen readers do with this either.

For whatever reason CSS isn't supported, they will see your popup texts where you've placed them in the HTML. Same goes for bots, as Google for example.


I just checked and CSS is going to be supported just fine on our site. So I am definitely giving your example code a try. I feel like I am understanding some real basic principles now...ha real basic.

Posted by: pandy Jan 27 2012, 07:08 PM

Just play around with it. It's often easier if you start with something simple and clean, without other stuff that may or may not affect what you are doing. Take the below. See if you can figure out how to move the little red square around to different places inside the red rectangle using positioning.

CODE

#outer    { width: 500px; height: 200px;
            background: red }
#inner    { width: 20px; height: 20px;
            background: yellow }


HTML
<div id="outer">
<div id="inner"></div>
</div>


It isn't an easy read, but all the information is at the below page or linked to from there.
http://www.w3.org/TR/CSS2/visuren.html#propdef-position

Hint - you need to use to kinds of positioning. happy.gif

Posted by: bnew10 Jan 27 2012, 07:38 PM

QUOTE(pandy @ Jan 27 2012, 07:08 PM) *

Just play around with it. It's often easier if you start with something simple and clean, without other stuff that may or may not affect what you are doing. Take the below. See if you can figure out how to move the little red square around to different places inside the red rectangle using positioning.
CODE

#outer    { width: 500px; height: 200px;
            background: red }
#inner    { width: 20px; height: 20px;
            background: yellow }


HTML
<div id="outer">
<div id="inner"></div>
</div>


It isn't an easy read, but all the information is at the below page or linked to from there.
http://www.w3.org/TR/CSS2/visuren.html#propdef-position

Hint - you need to use to kinds of positioning. happy.gif


Take a look at what I have got so far...

CODE
<html>
<head>
<meta http-equiv="content-type" content="text/html;
charset=ISO-8859-1">
<title>Glove Guide</title>
<style type="text/css">
<!--

#gloveguide { width: 700px; height: 617px;
position: relative }
#left { width:35px; height: 35px;
position: absolute; top: 185; left: 90;}
#center { width:35px; height: 35px;
position: absolute; top: 65; left: 330;}
#right { width:35px; height: 35px;
position: absolute; top: 180; left: 575;}
#third { width:35px; height: 35px;
position: absolute; top: 325; left: 155;}
#short { width:35px; height: 35px;
position: absolute; top: 235; left: 215;}
#second { width:35px; height: 35px;
position: absolute; top: 213; left: 410;}
#first { width:35px; height: 35px;
position: absolute; top: 325; left: 510;}
#pitcher { width:35px; height: 35px;
position: absolute; top: 345; left: 330;}
#catcher { width:35px; height: 35px;
position: absolute; bottom: 5; right: 330;}
#left span, #center span, #right span, #third span, #short span,
#second span, #first span, #pitcher span, #catcher span
{ width: 10em;
font: bold 75% Arial, sans-serif;
color: white; background: grey;
border: 2px solid green;
display: none }

#left:hover span, #center:hover span, #right:hover span, #third:hover span,
#short:hover span, #second:hover span, #first:hover span, #pitcher:hover span,
#catcher:hover span
{ display: block }
-->
</style>
</head>
<body>
<div id="gloveguide"> <img
src="http://lib.store.yahoo.net/lib/hq4sports/gloveguide.jpeg"
usemap="#map" alt="Glove Guide" width="700" height="617">
<div id="left"><span>Left Field</span></div>
<div id="center"><span>Center Field</span></div>
<div id="right"><span>Right Field</span></div>
<div id="third"><span>Third Base</span></div>
<div id="short"><span>Short Stop</span></div>
<div id="second"><span>Second Base</span></div>
<div id="first"><span>First Base</span></div>
<div id="pitcher"><span>Pitcher</span></div>
<div id="catcher"><span>Catcher</span></div>
</div>
</body>
</html>


What do you think? Don't mind the image, I know its not the best but I had never used Illustrator prior to this little "project" I have been working on. I am planning on adding a lot more text to each position's text box...

Posted by: Darin McGrew Jan 27 2012, 07:52 PM

QUOTE
If the user has turned it off (not likely), uses a very old browser (even less likely) or if he uses some device other than a graphical browser that can't make head or tail of your CSS.
There are also browser settings, browser plugins, etc., that can override your CSS, but that isn't really a case of CSS not being supported.

Posted by: pandy Jan 27 2012, 07:54 PM

There you go! You picked that up quickly! smile.gif

But, you fell in my trap by copying. Look at the CSS errors.
http://jigsaw.w3.org/css-validator/validator?text=%23gloveguide+%7B+width%3A+700px%3B+height%3A+617px%3B%0D%0Aposition%3A+relative+%7D%0D%0A%23left+%7B+width%3A35px%3B+height%3A+35px%3B%0D%0Aposition%3A+absolute%3B+top%3A+185%3B+left%3A+90%3B%7D%0D%0A%23center+%7B+width%3A35px%3B+height%3A+35px%3B%0D%0Aposition%3A+absolute%3B+top%3A+65%3B+left%3A+330%3B%7D%0D%0A%23right+%7B+width%3A35px%3B+height%3A+35px%3B%0D%0Aposition%3A+absolute%3B+top%3A+180%3B+left%3A+575%3B%7D%0D%0A%23third+%7B+width%3A35px%3B+height%3A+35px%3B%0D%0Aposition%3A+absolute%3B+top%3A+325%3B+left%3A+155%3B%7D%0D%0A%23short+%7B+width%3A35px%3B+height%3A+35px%3B%0D%0Aposition%3A+absolute%3B+top%3A+235%3B+left%3A+215%3B%7D%0D%0A%23second+%7B+width%3A35px%3B+height%3A+35px%3B%0D%0Aposition%3A+absolute%3B+top%3A+213%3B+left%3A+410%3B%7D%0D%0A%23first+%7B+width%3A35px%3B+height%3A+35px%3B%0D%0Aposition%3A+absolute%3B+top%3A+325%3B+left%3A+510%3B%7D%0D%0A%23pitcher+%7B+width%3A35px%3B+height%3A+35px%3B%0D%0Aposition%3A+absolute%3B+top%3A+345%3B+left%3A+330%3B%7D%0D%0A%23catcher+%7B+width%3A35px%3B+height%3A+35px%3B%0D%0Aposition%3A+absolute%3B+bottom%3A+5%3B+right%3A+330%3B%7D%0D%0A%23left+span%2C+%23center+span%2C+%23right+span%2C+%23third+span%2C+%23short+span%2C%0D%0A%23second+span%2C+%23first+span%2C+%23pitcher+span%2C+%23catcher+span%0D%0A%7B+width%3A+10em%3B%0D%0Afont%3A+bold+75%25+Arial%2C+sans-serif%3B%0D%0Acolor%3A+white%3B+background%3A+grey%3B%0D%0Aborder%3A+2px+solid+green%3B%0D%0Adisplay%3A+none+%7D%0D%0A%0D%0A%23left%3Ahover+span%2C+%23center%3Ahover+span%2C+%23right%3Ahover+span%2C+%23third%3Ahover+span%2C%0D%0A%23short%3Ahover+span%2C+%23second%3Ahover+span%2C+%23first%3Ahover+span%2C+%23pitcher%3Ahover+span%2C%0D%0A%23catcher%3Ahover+span%0D%0A%7B+display%3A+block+%7D%0D%0A&warning=2&profile=css2&usermedium=all

I'm joking. It wasn't a trap. But you fell in it anyway. tongue.gif

Also, you should use a doctype. Without it browsers will be in Quirks Mode and you don't want that with CSS. They will emulate older and buggier versions of themselves.
http://hsivonen.iki.fi/doctype/ (this is a horrible read)
HTML 4.01 Strict, the long version with an URL, will go fine with what you have so far.

Fact is, your CSS works in some browsers only becauase they are in Quirks Mode. With a doctype that puts them in Standarda Mode (called Strict Mode at the page I linked to) you won't get away with the unitless values. It may seem right now that Quirks Mode is a good idea, but it's not. There are more situations when it causes trouble than there are situations when it helps you. When it helps it's often situations like this, you get away with an error that it would be better to fix.

Fix those two things and you are fine. Did you understand how it works?

Posted by: bnew10 Jan 27 2012, 08:09 PM

QUOTE(pandy @ Jan 27 2012, 07:54 PM) *

There you go! You picked that up quickly! smile.gif

But, you fell in my trap by copying. Look at the CSS errors.
http://jigsaw.w3.org/css-validator/validator?text=%23gloveguide+%7B+width%3A+700px%3B+height%3A+617px%3B%0D%0Aposition%3A+relative+%7D%0D%0A%23left+%7B+width%3A35px%3B+height%3A+35px%3B%0D%0Aposition%3A+absolute%3B+top%3A+185%3B+left%3A+90%3B%7D%0D%0A%23center+%7B+width%3A35px%3B+height%3A+35px%3B%0D%0Aposition%3A+absolute%3B+top%3A+65%3B+left%3A+330%3B%7D%0D%0A%23right+%7B+width%3A35px%3B+height%3A+35px%3B%0D%0Aposition%3A+absolute%3B+top%3A+180%3B+left%3A+575%3B%7D%0D%0A%23third+%7B+width%3A35px%3B+height%3A+35px%3B%0D%0Aposition%3A+absolute%3B+top%3A+325%3B+left%3A+155%3B%7D%0D%0A%23short+%7B+width%3A35px%3B+height%3A+35px%3B%0D%0Aposition%3A+absolute%3B+top%3A+235%3B+left%3A+215%3B%7D%0D%0A%23second+%7B+width%3A35px%3B+height%3A+35px%3B%0D%0Aposition%3A+absolute%3B+top%3A+213%3B+left%3A+410%3B%7D%0D%0A%23first+%7B+width%3A35px%3B+height%3A+35px%3B%0D%0Aposition%3A+absolute%3B+top%3A+325%3B+left%3A+510%3B%7D%0D%0A%23pitcher+%7B+width%3A35px%3B+height%3A+35px%3B%0D%0Aposition%3A+absolute%3B+top%3A+345%3B+left%3A+330%3B%7D%0D%0A%23catcher+%7B+width%3A35px%3B+height%3A+35px%3B%0D%0Aposition%3A+absolute%3B+bottom%3A+5%3B+right%3A+330%3B%7D%0D%0A%23left+span%2C+%23center+span%2C+%23right+span%2C+%23third+span%2C+%23short+span%2C%0D%0A%23second+span%2C+%23first+span%2C+%23pitcher+span%2C+%23catcher+span%0D%0A%7B+width%3A+10em%3B%0D%0Afont%3A+bold+75%25+Arial%2C+sans-serif%3B%0D%0Acolor%3A+white%3B+background%3A+grey%3B%0D%0Aborder%3A+2px+solid+green%3B%0D%0Adisplay%3A+none+%7D%0D%0A%0D%0A%23left%3Ahover+span%2C+%23center%3Ahover+span%2C+%23right%3Ahover+span%2C+%23third%3Ahover+span%2C%0D%0A%23short%3Ahover+span%2C+%23second%3Ahover+span%2C+%23first%3Ahover+span%2C+%23pitcher%3Ahover+span%2C%0D%0A%23catcher%3Ahover+span%0D%0A%7B+display%3A+block+%7D%0D%0A&warning=2&profile=css2&usermedium=all

I'm joking. It wasn't a trap. But you fell in it anyway. tongue.gif

Also, you should use a doctype. Without it browsers will be in Quirks Mode and you don't want that with CSS. They will emulate older and buggier versions of themselves.
http://hsivonen.iki.fi/doctype/ (this is a horrible read)
HTML 4.01 Strict, the long version with an URL, will go fine with what you have so far.

Fact is, your CSS works in some browsers only becauase they are in Quirks Mode. With a doctype that puts them in Standarda Mode (called Strict Mode at the page I linked to) you won't get away with the unitless values. It may seem right now that Quirks Mode is a good idea, but it's not. There are more situations when it causes trouble than there are situations when it helps you. When it helps it's often situations like this, you get away with an error that it would be better to fix.

Fix those two things and you are fine. Did you understand how it works?


Well, I did understand how it was working or so I thought. I am not quite grasping the error messages. When they say units are required do they mean something like unit of measurement (PX) or is that in reference to another idea that I am unaware of? Also, I do not understand when it says that only 0 can be a length? Did I not map my locations correctly?

Posted by: bnew10 Jan 27 2012, 08:18 PM

QUOTE(pandy @ Jan 27 2012, 07:54 PM) *

There you go! You picked that up quickly! smile.gif

But, you fell in my trap by copying. Look at the CSS errors.
http://jigsaw.w3.org/css-validator/validator?text=%23gloveguide+%7B+width%3A+700px%3B+height%3A+617px%3B%0D%0Aposition%3A+relative+%7D%0D%0A%23left+%7B+width%3A35px%3B+height%3A+35px%3B%0D%0Aposition%3A+absolute%3B+top%3A+185%3B+left%3A+90%3B%7D%0D%0A%23center+%7B+width%3A35px%3B+height%3A+35px%3B%0D%0Aposition%3A+absolute%3B+top%3A+65%3B+left%3A+330%3B%7D%0D%0A%23right+%7B+width%3A35px%3B+height%3A+35px%3B%0D%0Aposition%3A+absolute%3B+top%3A+180%3B+left%3A+575%3B%7D%0D%0A%23third+%7B+width%3A35px%3B+height%3A+35px%3B%0D%0Aposition%3A+absolute%3B+top%3A+325%3B+left%3A+155%3B%7D%0D%0A%23short+%7B+width%3A35px%3B+height%3A+35px%3B%0D%0Aposition%3A+absolute%3B+top%3A+235%3B+left%3A+215%3B%7D%0D%0A%23second+%7B+width%3A35px%3B+height%3A+35px%3B%0D%0Aposition%3A+absolute%3B+top%3A+213%3B+left%3A+410%3B%7D%0D%0A%23first+%7B+width%3A35px%3B+height%3A+35px%3B%0D%0Aposition%3A+absolute%3B+top%3A+325%3B+left%3A+510%3B%7D%0D%0A%23pitcher+%7B+width%3A35px%3B+height%3A+35px%3B%0D%0Aposition%3A+absolute%3B+top%3A+345%3B+left%3A+330%3B%7D%0D%0A%23catcher+%7B+width%3A35px%3B+height%3A+35px%3B%0D%0Aposition%3A+absolute%3B+bottom%3A+5%3B+right%3A+330%3B%7D%0D%0A%23left+span%2C+%23center+span%2C+%23right+span%2C+%23third+span%2C+%23short+span%2C%0D%0A%23second+span%2C+%23first+span%2C+%23pitcher+span%2C+%23catcher+span%0D%0A%7B+width%3A+10em%3B%0D%0Afont%3A+bold+75%25+Arial%2C+sans-serif%3B%0D%0Acolor%3A+white%3B+background%3A+grey%3B%0D%0Aborder%3A+2px+solid+green%3B%0D%0Adisplay%3A+none+%7D%0D%0A%0D%0A%23left%3Ahover+span%2C+%23center%3Ahover+span%2C+%23right%3Ahover+span%2C+%23third%3Ahover+span%2C%0D%0A%23short%3Ahover+span%2C+%23second%3Ahover+span%2C+%23first%3Ahover+span%2C+%23pitcher%3Ahover+span%2C%0D%0A%23catcher%3Ahover+span%0D%0A%7B+display%3A+block+%7D%0D%0A&warning=2&profile=css2&usermedium=all

I'm joking. It wasn't a trap. But you fell in it anyway. tongue.gif

Also, you should use a doctype. Without it browsers will be in Quirks Mode and you don't want that with CSS. They will emulate older and buggier versions of themselves.
http://hsivonen.iki.fi/doctype/ (this is a horrible read)
HTML 4.01 Strict, the long version with an URL, will go fine with what you have so far.

Fact is, your CSS works in some browsers only becauase they are in Quirks Mode. With a doctype that puts them in Standarda Mode (called Strict Mode at the page I linked to) you won't get away with the unitless values. It may seem right now that Quirks Mode is a good idea, but it's not. There are more situations when it causes trouble than there are situations when it helps you. When it helps it's often situations like this, you get away with an error that it would be better to fix.

Fix those two things and you are fine. Did you understand how it works?


Also, I am not understanding how I actually change the type to doctype. I am assuming this needs to be written towards the top, but after reading through the link you provided I am not sure the location and how to actually change to a doctype...

Posted by: bnew10 Jan 27 2012, 09:11 PM

Is this correct? Or at least more so?

CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;
charset=ISO-8859-1">
<title>Glove Guide</title>
<style type="text/css">
<!--

#gloveguide { width: 700px; height: 617px;
position: relative }
#left { width:35px; height: 35px;
position: absolute; top: 185px; left: 90px;}
#center { width:35px; height: 35px;
position: absolute; top: 65px; left: 330px;}
#right { width:35px; height: 35px;
position: absolute; top: 180px; left: 575px;}
#third { width:35px; height: 35px;
position: absolute; top: 325px; left: 155px;}
#short { width:35px; height: 35px;
position: absolute; top: 235px; left: 215px;}
#second { width:35px; height: 35px;
position: absolute; top: 213px; left: 410px;}
#first { width:35px; height: 35px;
position: absolute; top: 325px; left: 510px;}
#pitcher { width:35px; height: 35px;
position: absolute; top: 345px; left: 330px;}
#catcher { width:35px; height: 35px;
position: absolute; bottom: 5px; right: 330px;}
#left span, #center span, #right span, #third span, #short span,
#second span, #first span, #pitcher span, #catcher span
{ width: 10em;
font: bold 75% Arial, sans-serif;
color: white; background: grey;
border: 2px solid green;
display: none }

#left:hover span, #center:hover span, #right:hover span, #third:hover span,
#short:hover span, #second:hover span, #first:hover span, #pitcher:hover span,
#catcher:hover span
{ display: block }
-->
</style>
</head>
<body>
<div id="gloveguide"> <img
src="http://lib.store.yahoo.net/lib/hq4sports/gloveguide.jpeg"
usemap="#map" alt="Glove Guide" width="700px" height="617px">
<div id="left"><span>Left Field</span></div>
<div id="center"><span>Center Field</span></div>
<div id="right"><span>Right Field</span></div>
<div id="third"><span>Third Base</span></div>
<div id="short"><span>Short Stop</span></div>
<div id="second"><span>Second Base</span></div>
<div id="first"><span>First Base</span></div>
<div id="pitcher"><span>Pitcher</span></div>
<div id="catcher"><span>Catcher</span></div>
</div>
</body>
</html>

Posted by: pandy Jan 27 2012, 09:15 PM

QUOTE

Well, I did understand how it was working or so I thought. I am not quite grasping the error messages. When they say units are required do they mean something like unit of measurement (PX) or is that in reference to another idea that I am unaware of? Also, I do not understand when it says that only 0 can be a length? Did I not map my locations correctly?


Exactly. Units are basically always required in CSS unless the value is 0 because zero is zero, px, em or % doesn't matter.


QUOTE

Also, I am not understanding how I actually change the type to doctype. I am assuming this needs to be written towards the top, but after reading through the link you provided I am not sure the location and how to actually change to a doctype...


Put it as the very first line in the document, before HTML.
http://htmlhelp.com/tools/validator/doctype.html
The first one there, HTML 4.01 Strict with an URL, will be fine. There's also a short form without an URL (not included at the doctype page). That would trigger quirks mode. Copy the doctype, don't try to type it.

This is messy. Browsers don't understand doctypes. Doctypes are used for good form, to tell people, not browsers, what version of HTML the document is written in and they are also needed when you use the validator so it knows what doctype definition it should validate the document against. But then some 10 years ago an otherwise very clever person came up with the idea to let the browser he was developing have two rendering modes. In Standards Mode if would follow the spec as close as it could. In quirks it would be as buggy as the previous version. They choose the doctype, or more precisely exactly how it is written, as the trigger for these modes. All other browsers followed and added the same "feature". This was done in attempt not to break all old pages out there as the browsers got more standard compliant. Old tag soup pages usually don't have a doctype or they have a short one. End of the history lesson. wink.gif

To sum up, browsers don't "know" if the doctype fits the document or not. They just use them as triggers for these rendering modes. The validator knows though and will complain loudly if you use a doctype that doesn't fit the flavour of HTML you write.

You don't need to concern yourself with this right now. I tell you just so you know why you should use a doctype and that it's important that you use the right one.

Posted by: bnew10 Feb 1 2012, 04:09 PM

Excellent information...

QUOTE
Exactly. Units are basically always required in CSS unless the value is 0 because zero is zero, px, em or % doesn't matter.


Ah, makes perfect sense.

Take a look at my code now and let me know if it looks better...

CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;
charset=ISO-8859-1">
<title>Glove Guide</title>
<style type="text/css">
<!--

#gloveguide { width: 700px; height: 617px;
position: relative }
#left { width:35px; height: 35px;
position: absolute; top: 185px; left: 90px;}
#center { width:35px; height: 35px;
position: absolute; top: 65px; left: 330px;}
#right { width:35px; height: 35px;
position: absolute; top: 180px; left: 575px;}
#third { width:35px; height: 35px;
position: absolute; top: 325px; left: 155px;}
#short { width:35px; height: 35px;
position: absolute; top: 235px; left: 215px;}
#second { width:35px; height: 35px;
position: absolute; top: 213px; left: 410px;}
#first { width:35px; height: 35px;
position: absolute; top: 325px; left: 510px;}
#pitcher { width:35px; height: 35px;
position: absolute; top: 345px; left: 330px;}
#catcher { width:35px; height: 35px;
position: absolute; bottom: 5px; right: 330px;}
#left span, #center span, #right span, #third span, #short span,
#second span, #first span, #pitcher span, #catcher span
{ width: 10em;
font: bold 75% Arial, sans-serif;
color: white; background: grey;
border: 2px solid green;
display: none }

#left:hover span, #center:hover span, #right:hover span, #third:hover span,
#short:hover span, #second:hover span, #first:hover span, #pitcher:hover span,
#catcher:hover span
{ display: block }
-->
</style>
</head>
<body>
<div id="gloveguide"> <img
src="http://lib.store.yahoo.net/lib/hq4sports/gloveguide.jpeg"
usemap="#map" alt="Glove Guide" width="700px" height="617px">
<div id="left"><span>Left Field</span></div>
<div id="center"><span>Center Field</span></div>
<div id="right"><span>Right Field</span></div>
<div id="third"><span>Third Base</span></div>
<div id="short"><span>Short Stop</span></div>
<div id="second"><span>Second Base</span></div>
<div id="first"><span>First Base</span></div>
<div id="pitcher"><span>Pitcher</span></div>
<div id="catcher"><span>Catcher</span></div>
</div>
</body>
</html>



Thanks!

Posted by: pandy Feb 5 2012, 09:05 PM

It works? Great! smile.gif

Posted by: bnew10 Feb 8 2012, 04:04 PM

QUOTE(pandy @ Feb 5 2012, 09:05 PM) *

It works? Great! smile.gif


Thanks for your help, it is much appreciated!

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)