The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

2 Pages V < 1 2  
Reply to this topicStart new topic
> HTML Image Map Hover Function
bnew10
post Jan 27 2012, 06:00 PM
Post #21


Newbie
*

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



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




User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
bnew10
post Jan 27 2012, 06:01 PM
Post #22


Newbie
*

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



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 27 2012, 07:08 PM
Post #23


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 15,195
Joined: 9-August 06
Member No.: 6



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


--------------------
"Never go to excess, but let moderation be your guide."
- Cicero

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
bnew10
post Jan 27 2012, 07:38 PM
Post #24


Newbie
*

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



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...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Jan 27 2012, 07:52 PM
Post #25


WDG Member
********

Group: Root Admin
Posts: 7,998
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



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.


--------------------
Darin McGrew
WDG Member since 1998
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 27 2012, 07:54 PM
Post #26


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 15,195
Joined: 9-August 06
Member No.: 6



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/validat...;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?


--------------------
"Never go to excess, but let moderation be your guide."
- Cicero

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
bnew10
post Jan 27 2012, 08:09 PM
Post #27


Newbie
*

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



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/validat...;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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
bnew10
post Jan 27 2012, 08:18 PM
Post #28


Newbie
*

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



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/validat...;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...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
bnew10
post Jan 27 2012, 09:11 PM
Post #29


Newbie
*

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



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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 27 2012, 09:15 PM
Post #30


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 15,195
Joined: 9-August 06
Member No.: 6



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.


--------------------
"Never go to excess, but let moderation be your guide."
- Cicero

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
bnew10
post Feb 1 2012, 04:09 PM
Post #31


Newbie
*

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



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!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 5 2012, 09:05 PM
Post #32


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 15,195
Joined: 9-August 06
Member No.: 6



It works? Great! smile.gif


--------------------
"Never go to excess, but let moderation be your guide."
- Cicero

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
bnew10
post Feb 8 2012, 04:04 PM
Post #33


Newbie
*

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



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

It works? Great! smile.gif


Thanks for your help, it is much appreciated!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

2 Pages V < 1 2
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: 23rd July 2014 - 12:52 PM