Image map rollover with hotspots on rollover image

#1

Hey folks:

I have been shrugging with this in Flash and have now decided to scrap that
idea work with Dreaweaver Css and/ or Javascript

This is what I want to do:

I have this image of a person with their hand extended forward. I want the
fingers to be the site navigation.
I have two copies of this image.... Image 1 with a small hand and image 2 with
a slightly enlarged hand.
Ideally I would want the image 1 to be swaped for image 2 (large hand) upon
rollover.
I would then want image 2 to have hotspots on the individual fingers to
operate disjointed rollovers eslewhere on the page.

Is this possible with image swap?
or, do I have to use layers?

How would I implement this keeping in mind that image 1 and 2 are placed on
top of each other with image to 2 being on the top.

Any help would be greatly appreciated

J

#2

Quote:

Is this possible with image swap?
or, do I have to use layers?

You would have to use layers if you don't want to create some custom
javascript to do it. Have the image in the layer be the one with the
hotspots to your destination. Show the layer on rollover.

The tricky part is NOT to try to hide the layer onmouseout except in the NEW
IMAGE in the layer.

So -

Original image - onmouseover show the layer
NEW image - apply hotspots, and onmouseout hide the layer

--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================

"jordydme" <webforumsuser (AT) macromedia (DOT) com> wrote

Quote:

Hey folks:

I have been shrugging with this in Flash and have now decided to scrap
that
idea work with Dreaweaver Css and/ or Javascript

This is what I want to do:

I have this image of a person with their hand extended forward. I want the
fingers to be the site navigation.
I have two copies of this image.... Image 1 with a small hand and image 2
with
a slightly enlarged hand.
Ideally I would want the image 1 to be swaped for image 2 (large hand)
upon
rollover.
I would then want image 2 to have hotspots on the individual fingers to
operate disjointed rollovers eslewhere on the page.

Is this possible with image swap?
or, do I have to use layers?

How would I implement this keeping in mind that image 1 and 2 are placed
on
top of each other with image to 2 being on the top.

Any help would be greatly appreciated

J

#3

Murray:

Thanks for the reply many days ago. Using some of your suggestions, I finally
got things shaping up. I am having an issue though.

I have been trying to work this issue out since last night with no luck. When
I rollover the main "hand image" on my page the display is just like I want it
in FF but in IE the rollover image displays several pixels lower ion the page.
I want both images to line up identically as in Firefox. I am also having the
same issues with the disjointed circular rollovers to the right of the hand.

I tried messing around with zeroing out the padding, margin and borders in the
body tag but haven't had any luck.

I am a little confused on one point. I understand that an Ap Div is not in the
document flow and hovers above the document. But where does the ApDiv reference
from? Ideal I want it to reference from the wrapper but I don't know if that is
what's going on.

http://highschoolforthehumanities.or...dexSample.html

Any help would be greatly appreciated,

Thanks
MS

Here is my CSS:

<code>@charset "utf-8";
body {
background: #999999;
margin: 0; /* it's good practice to zero the margin and padding of the body
element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text
is then set to the left aligned default in the #container selector */
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
line-height: 1.25em;
color: #FFFFFF;

}
h1 {
font-size: 1.5em;
color: #FFFFFF;
line-height: 1.05em;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
h2 {
font-size: 1.25em;
color: #B6A892;
}

img {border:none}

p {padding-bottom: 10px;}

ul {
list-style-position: outside;
list-style-image: url(../images/bullet.gif);
list-style-type: none;
}

#container {
width: 950px;
background: #3f3f3f;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the
page */
text-align: left; /* this overrides the text-align: center on the body
element. */
margin-top: 30px;
}

#header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will
avoid margin collapse - an unexplainable space between divs. If the div has a
border around it, this is not necessary as that also avoids the margin collapse
*/
padding: 10px 0; /* using padding instead of margin will allow you to keep
the element away from the edges of the div */
}
#mainContent {
background: #3f3f3f;
padding-top: 10px;
}
#mainContent p{
text-align: justify;
}
#mainContent h1, h2 {
padding-bottom: 10px;
padding-left: 180px;
padding-right: 152px;
}
#subheadingContainerLft ul {
padding-left: 198px;
margin-left: 0px;

}
#subheadingContainerLft h2 {
padding-left: 180px;
padding-right: 0px;

}
#subheadingContainerLft {
float:left;
width: 450px;
}
#subheadingContainerRt {
float: left;
width: 475px;
}
#subheadingContainerRt h2 {
margin-left: 0px;
padding-left: 0px;
}
#subheadingContainerRt ul {
padding-left: 18px;
margin-left: 0px;
}

#robertContainer {
float:left;
margin-top: 0;
margin-left: 50px;
width: 590px;
height: 340px;
margin-right: 0px;
padding-right: 0px;
}

#4

Quote:

I rollover the main "hand image" on my page the display is just like I
want it
in FF but in IE the rollover image displays several pixels lower ion the
page.

This is just not working the way you think it is. Try changing the width of
your browser viewport. It falls apart. This is due to your use of absolute
positioned containers.

Quote:

I am a little confused on one point. I understand that an Ap Div is not in
the
document flow and hovers above the document. But where does the ApDiv
reference
from?

Absolute positioning is always referenced from the nearest positioned
ancestor. In your case, there is no nearest positioned ancestor, and so the
body tag is the default reference. This forces the absolutely positioned
elements to always take their offsets from the 0,0 coordinate of the page,
i.e., the upper, left-hand corner. That's not what you want.

To fix this, make your div#container by position:relative. Now, move ALL
your content within the div#container. You will see magic happen when you do
this.

--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================

"jordydme" <webforumsuser (AT) macromedia (DOT) com> wrote

Quote:

Murray:

Thanks for the reply many days ago. Using some of your suggestions, I
finally
got things shaping up. I am having an issue though.

I have been trying to work this issue out since last night with no luck.
When
I rollover the main "hand image" on my page the display is just like I
want it
in FF but in IE the rollover image displays several pixels lower ion the
page.
I want both images to line up identically as in Firefox. I am also having
the
same issues with the disjointed circular rollovers to the right of the
hand.

I tried messing around with zeroing out the padding, margin and borders in
the
body tag but haven't had any luck.

I am a little confused on one point. I understand that an Ap Div is not in
the
document flow and hovers above the document. But where does the ApDiv
reference
from? Ideal I want it to reference from the wrapper but I don't know if
that is
what's going on.

http://highschoolforthehumanities.or...dexSample.html

Any help would be greatly appreciated,

Thanks
MS

Here is my CSS:

code>@charset "utf-8";
body {
background: #999999;
margin: 0; /* it's good practice to zero the margin and padding of the
body
element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The
text
is then set to the left aligned default in the #container selector */
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
line-height: 1.25em;
color: #FFFFFF;

}
h1 {
font-size: 1.5em;
color: #FFFFFF;
line-height: 1.05em;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
h2 {
font-size: 1.25em;
color: #B6A892;
}

img {border:none}

p {padding-bottom: 10px;}

ul {
list-style-position: outside;
list-style-image: url(../images/bullet.gif);
list-style-type: none;
}

#container {
width: 950px;
background: #3f3f3f;
margin: 0 auto; /* the auto margins (in conjunction with a width) center
the
page */
text-align: left; /* this overrides the text-align: center on the body
element. */
margin-top: 30px;
}

#header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div
will
avoid margin collapse - an unexplainable space between divs. If the div
has a
border around it, this is not necessary as that also avoids the margin
collapse
*/
padding: 10px 0; /* using padding instead of margin will allow you to
keep
the element away from the edges of the div */
}
#mainContent {
background: #3f3f3f;
padding-top: 10px;
}
#mainContent p{
text-align: justify;
}
#mainContent h1, h2 {
padding-bottom: 10px;
padding-left: 180px;
padding-right: 152px;
}
#subheadingContainerLft ul {
padding-left: 198px;
margin-left: 0px;

}
#subheadingContainerLft h2 {
padding-left: 180px;
padding-right: 0px;

}
#subheadingContainerLft {
float:left;
width: 450px;
}
#subheadingContainerRt {
float: left;
width: 475px;
}
#subheadingContainerRt h2 {
margin-left: 0px;
padding-left: 0px;
}
#subheadingContainerRt ul {
padding-left: 18px;
margin-left: 0px;
}

#robertContainer {
float:left;
margin-top: 0;
margin-left: 50px;
width: 590px;
height: 340px;
margin-right: 0px;
padding-right: 0px;
}

#5

An ancestor is a container that CONTAINS the element in question. Thus the
#container div in your case - that's why I said to move everything inside
it, and make it position:relative.

This may help you understand positioning a bit -

There are 4 different types of positioning:
Absolute
Relative
Fixed
Static

Here is a brief explanation of each kind of positioning (with regard to
placement of elements on the page only)....

Position:absolute (or A/P elements)
-----------------------
This does several things -
1. It 'removes' the element from the flow of the code on the* page so that
it can no longer influence the size or position of any other pa*ge element
(except for those contained within it, of course).

2. The absolutely positioned element takes its position from the position of
its closest PA*RENT *positioned* element - in the absence of any explicitly
positioned parent, this will default to the <body> tag, which is always
positioned
*at 0,0 in the browser viewport.

This means that it doesn't matter where in the HTML code the laye*r's code
appears (between <body> and </body>), its location on the screen will not
change (this assumes that you have not positioned the A/P element within
a table or another A/P element, of course). Furthe*rmore, the space in
which
this element would have appeared were it not positi*oned is not preserved
on the screen. In other words, absolutely positioned elements don't take
up any space on the page. In fact, they FLOAT over the page.

Position:relative (or R/P elements)
----------------------
In contrast to absolute positioning, a relatively positioned page element is
*not* removed from t*he flow of the code on the page, so it will use the
spot
where it would have* appeared based on its position in the code as its
zero point reference. If* you then supply top, right, bottom, or left
positions
to the style for this *element, those values will be used as offsets from
its
zero point.

This means that it DOES matter where in the code the relativ*ely positioned
element appears (, as it will be positioned in that location (*factoring in
the offsets) on the screen (this is true for any placement in the code).
Furthermore, the space where this e*lement would have appeared is
preserved in the display, and can therefore* affect the placement of
succeeding elements. This means that the taller a relatively
positioned element is, the more space it forces on the page.

Position:static
-------------------
As with relative position, static positions also "go with *the flow". An
element with a static position cannot have values for offset*s (top, right,
left, bottom) or if it has them, they will be ignored. Unless explicitly
positioned, all div elements default to static positioning.

Position:fixed
------------------
A page element with this style will not scroll as the page c*ontent scrolls.
Support for this in elements other than page backgrounds is *quirky

There are several other things you need to know:

1. ANY page element can be positioned - paragraphs, tables, images, lists,
etc.
2. The <div> tag is a BLOCK level tag. This means that if it is not
positioned or explicitly styled otherwise, a) it will always begin on a new
line on the screen, and b) it will always force content to a new line below
it, and c) it will always take up the entire width of its container (i.e.,
width:100%).
3. The placement of A/P elements *can* affect the BEHAVIOR of other
elements
on the page. For example, a 'layer' placed over a hyperlink will mask that
hyperlink.

You can see a good example of the essential difference between absolute and
relative positioning here -

http://www.great-web-sights.com/g_layersdemo.asp

You can see a good demonstration of why using layers for a page layout tool
is dangerous here -

http://www.great-web-sights.com/g_layer-overlap.asp

--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================

"jordydme" <webforumsuser (AT) macromedia (DOT) com> wrote

Quote:

Muray,

Thanks for the reply. I am shocked that I never thought to resize the
browser
window to test the layout integrity, glad you pointed that out to me, what
a
mess. I have been working all morning on this with no luck. I have tried
your
Css suggestions and just get more of a mess. I read a bit about layer
positioning on your website as well. I have been reading my books on CSS
to try
and wrap my head around these concepts and have been having great
difficulty.

I partially understand the bit about referencing from the body tag o,o
coordinates because there are no other ancestors but what dictates the
nearest
ancestor? Is an ancestor the nearest div that is assigned a relative
position
as well?

I tried adding the position:relative; in place of the absolute attribute
to my
div#container and things stayed the same. I then changed the absolute
positioning attribute of the top layer (hand image w/ hotspots) to
relative to
see if would reference from the div#container as the nearest relatively
positioned ancestor? but it just increased the margin between the banner
and
the top of the view port. I am thoroughly confused. Am attaching updated
code
for the html and the css.

http://highschoolforthehumanities.or...dexSample.html

#6

Murray,

thanks for the info. I looked it over thoroughly and checked the demo links as
well. I think I now understand this on paper but but my design is still
breaking upon resizing of the view port. . My understanding is that the
#container needs to be set to relative , which it now is. And the
#robertContainerTopLayer div set to absolute so it will reference it's
position from the nearest relatively positioned ancestor (#container).
Unfortunately when I rollover the the hidden layer image
(#robertContainerTopLayer ) does not reposition itself as I change the browser
view port. Is this a DW behaviors issue??

You also said :

[Q]To fix this, make your div#container by position:relative. Now, move ALL
your content within the div#container. You will see magic happen when you do
this.[/Q]

I do believe that all of my content has always been inside the #container,
hasn't it? I am feeling pretty frustrated. Thanks for all your time Murray.

MS

#7

Quote:

Unfortunately when I rollover the the hidden layer image
(#robertContainerTopLayer ) does not reposition itself as I change the
browser
view port.

That's because you didn't follow my instructions to put ALL of them inside
#container.

Quote:

I do believe that all of my content has always been inside the #container,
hasn't it?

No. The absolutely positioned elements are not within #container.

--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================

"jordydme" <webforumsuser (AT) macromedia (DOT) com> wrote

Quote:

Murray,

thanks for the info. I looked it over thoroughly and checked the demo
links as
well. I think I now understand this on paper but but my design is still
breaking upon resizing of the view port. . My understanding is that the
#container needs to be set to relative , which it now is. And the
#robertContainerTopLayer div set to absolute so it will reference it's
position from the nearest relatively positioned ancestor (#container).
Unfortunately when I rollover the the hidden layer image
(#robertContainerTopLayer ) does not reposition itself as I change the
browser
view port. Is this a DW behaviors issue??

You also said :

[Q]To fix this, make your div#container by position:relative. Now, move
ALL
your content within the div#container. You will see magic happen when you
do
this.[/Q]

I do believe that all of my content has always been inside the #container,
hasn't it? I am feeling pretty frustrated. Thanks for all your time
Murray.

MS

#8

[q]Originally posted by: Newsgroup User

Quote:

Unfortunately when I rollover the the hidden layer image
(#robertContainerTopLayer ) does not reposition itself as I change the
browser
view port.

That's because you didn't follow my instructions to put ALL of them inside
#container.

Quote:

I do believe that all of my content has always been inside the #container,
hasn't it?

No. The absolutely positioned elements are not within #container.

--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================

"jordydme" <webforumsuser (AT) macromedia (DOT) com> wrote

Quote:

Murray,

thanks for the info. I looked it over thoroughly and checked the demo
links as
well. I think I now understand this on paper but but my design is still
breaking upon resizing of the view port. . My understanding is that the
#container needs to be set to relative , which it now is. And the
#robertContainerTopLayer div set to absolute so it will reference it's
position from the nearest relatively positioned ancestor (#container).
Unfortunately when I rollover the the hidden layer image
(#robertContainerTopLayer ) does not reposition itself as I change the
browser
view port. Is this a DW behaviors issue??

You also said :

[Q]To fix this, make your div#container by position:relative. Now, move
ALL
your content within the div#container. You will see magic happen when you
do
this.[/Q]

I do believe that all of my content has always been inside the #container,
hasn't it? I am feeling pretty frustrated. Thanks for all your time
Murray.

MS

[/q]

Murray:

Thanks for all the help, man do I feel really stupid. I spent a ridiculous
amount of time on this today, over ten hours as embarrassing as that sounds and
that's just today. I totally thought I was following your instructions. All I
can say is thanks for lending a hand. I hope I can return the favor to someone
else at some point.

The layout doesn't break apart now but there is still a IE/ FF discrepancy in
the vertical position of the apDivs . Looks like the Ad divs are rendering
higher up on the page. Margin/ padding type of issue? What do you think?

#9

Quote:

higher up on the page. Margin/ padding type of issue? What do you think?

A/P elements are not affected by either margins or paddings. But other
content is, and it's probably that other content that is being pushed on the
page. Looking in FF, note how much MORE space is to the left of the arm
than in IE. That's where I would begin to work on fixing this.

--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================

"jordydme" <webforumsuser (AT) macromedia (DOT) com> wrote

Quote:

Murray:

Thanks for all the help, man do I feel really stupid. I spent a ridiculous
amount of time on this today, over ten hours as embarrassing as that
sounds and
that's just today. I totally thought I was following your instructions.
All I
can say is thanks for lending a hand. I hope I can return the favor to
someone
else at some point.

The layout doesn't break apart now but there is still a IE/ FF discrepancy
in
the vertical position of the apDivs . Looks like the Ad divs are rendering
higher up on the page. Margin/ padding type of issue? What do you think?

#10

[q]Originally posted by: Newsgroup User

Quote:

higher up on the page. Margin/ padding type of issue? What do you think?

A/P elements are not affected by either margins or paddings. But other
content is, and it's probably that other content that is being pushed on the
page. Looking in FF, note how much MORE space is to the left of the arm
than in IE. That's where I would begin to work on fixing this.

--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================

"jordydme" <webforumsuser (AT) macromedia (DOT) com> wrote

Quote:

Murray:

Thanks for all the help, man do I feel really stupid. I spent a ridiculous
amount of time on this today, over ten hours as embarrassing as that
sounds and
that's just today. I totally thought I was following your instructions.
All I
can say is thanks for lending a hand. I hope I can return the favor to
someone
else at some point.

The layout doesn't break apart now but there is still a IE/ FF discrepancy
in
the vertical position of the apDivs . Looks like the Ad divs are rendering
higher up on the page. Margin/ padding type of issue? What do you think?

[/q]

Murray,

Thanks for pointing that out. I have been playing with it. From what I can
see, by shortening the amount of text in top paragraph, the lower placed static
positioned divs move up the page with the flow of the layout and the (as you
said) the apDivs are unaffected, so they stay in place.. thus creating the
alignment issue of the two images.So does this mean that I am dealing with some
margin/ padding issues between FF and IE with the rest of my layout excluding
apDivs?

I tried Zeroing out all of the margin and padding in the body tag but to no
avail. I also looked over the two displays in ff and IE as you suggested and I
am not sure what you you meant when you said, " Looking in FF, note how much
MORE space is to the left of the arm than in IE." I looked it over and assumed
you meant space from the left of the hand (when looking at the screen) to the
left of the #container? I wasn't really sure what you were refering to.

Lastly, should I be referencing the position of my ApDv from the image
container (div#robertContainer) that sits below it? I would set that div to
relative position and then the apDivs would reference position from that? Then
what todo about the relative position of the main #container div? Keep it
relative?
Man this can get complicated :-(

Thanks for sticking with me....up past 2am last night

Jordy