layer problems

[Rick]

I can't seem to get a layer to be active when I mouse over it.
I have set the behavior to image swap.
I have also tried the change property to visible.
Am I leaving out a step.

I can make it visible by using the image swap on the whole image, but
because it is a different size and gets distored I would like to use a layer
that is the same size as the picture.

Thanks

 

[Murray]

Am I leaving out a step.

Most likely, since none of these steps seem to go together.

Show me your code, please.

 

[Rick]

Sure,
Here it is.
http://geekhelp911.com/test.htm

Hover over computer repair.

Thanks

 

[Murray]

OK - the first rule is that you must not put any absolutely positioned
elements directly into table cells -

<table border="0" id="table1" cellpadding="0" style="border-collapse:
collapse">
<tr>
<td>
<div style="position: absolute; width: 100px; height: 100px; z-index: 1;
left: 145px; top: 41px; visibility: hidden" id="layer1"
onmouseout="FP_changePropRestore()"
onmouseover="FP_changeProp(/*id*/'layer1',1,'style.visibility','visible')">

So, your first task is to cut that <div> and its contents completely out of
the page code, and paste it back immediately above the </body> tag, e.g.,

<div style="position: absolute; width: 100px; height: 100px; z-index: 1;
left: 145px; top: 41px; visibility: hidden" id="layer1"
onmouseout="FP_changePropRestore()"
onmouseover="FP_changeProp(/*id*/'layer1',1,'style.visibility','visible')">
<img border="0" src="MCj01496900000[1]small.gif" width="80"
height="119"></div>
</body>

Since it's absolutely positioned its placement on the page will not depend
on its location in the code.

Then get the behavior off of the layer tag and onto the image where it
belongs. First change this -

<div style="position: absolute; width: 100px; height: 100px; z-index: 1;
left: 145px; top: 41px; visibility: hidden" id="layer1"
onmouseout="FP_changePropRestore()"
onmouseover="FP_changeProp(/*id*/'layer1',1,'style.visibility','visible')">

to this -

<div style="position: absolute; width: 100px; height: 100px; z-index: 1;
left: 145px; top: 41px; visibility: hidden" id="layer1">

Then, select this image - geekhelp911sliced_02.jpg - and apply a Change
Property behavior to it, to change the visibility property of that layer
(layer1) from hidden to visible.

See what happens when you do that.

The problem you were having is that if the layer is hidden, you cannot
trigger any event with it! In addition to that, event handlers applied to
<div> tags may cause you browser compatability problems, so it's best to
stay away from that.

Finally, I would not advise the use of brackets in file/pathnames -
MCj01496900000[1]small.gif. The best bet is to stick with text characters
and numbers only (hyphens and underscores are OK too).

 

[Rick]

Thank you for the complete response.
I have made the changes you suggested with no difference in the page.

http://geekhelp911.com/test.htm

It sounds like something is still missing.

Thanks again...

OK - the first rule is that you must not put any absolutely positioned
elements directly into table cells -

<table border="0" id="table1" cellpadding="0" style="border-collapse:
collapse">
<tr>
<td>
<div style="position: absolute; width: 100px; height: 100px; z-index: 1;
left: 145px; top: 41px; visibility: hidden" id="layer1"
onmouseout="FP_changePropRestore()"
onmouseover="FP_changeProp(/*id*/'layer1',1,'style.visibility','visible')">

So, your first task is to cut that <div> and its contents completely out of
the page code, and paste it back immediately above the </body> tag, e.g.,

<div style="position: absolute; width: 100px; height: 100px; z-index: 1;
left: 145px; top: 41px; visibility: hidden" id="layer1"
onmouseout="FP_changePropRestore()"
onmouseover="FP_changeProp(/*id*/'layer1',1,'style.visibility','visible')">
<img border="0" src="MCj01496900000[1]small.gif" width="80"
height="119"></div>
</body>

Since it's absolutely positioned its placement on the page will not depend
on its location in the code.

Then get the behavior off of the layer tag and onto the image where it
belongs. First change this -

<div style="position: absolute; width: 100px; height: 100px; z-index: 1;
left: 145px; top: 41px; visibility: hidden" id="layer1"
onmouseout="FP_changePropRestore()"
onmouseover="FP_changeProp(/*id*/'layer1',1,'style.visibility','visible')">

to this -

<div style="position: absolute; width: 100px; height: 100px; z-index: 1;
left: 145px; top: 41px; visibility: hidden" id="layer1">

Then, select this image - geekhelp911sliced_02.jpg - and apply a Change
Property behavior to it, to change the visibility property of that layer
(layer1) from hidden to visible.

See what happens when you do that.

The problem you were having is that if the layer is hidden, you cannot
trigger any event with it! In addition to that, event handlers applied to
<div> tags may cause you browser compatability problems, so it's best to
stay away from that.

Finally, I would not advise the use of brackets in file/pathnames -
MCj01496900000[1]small.gif. The best bet is to stick with text characters
and numbers only (hyphens and underscores are OK too).

--
Murray
============

Sure,
Here it is.
http://geekhelp911.com/test.htm

Hover over computer repair.

Thanks

 

[Murray]

<tap><tap>

(Is this thing on?)

</head>
<div style="position: absolute; width: 100px; height: 100px; z-index: 1;
left: 145px; top: 41px; visibility:hidden" id="layer1"
onmouseout="FP_changePropRestore()"
onmouseover="FP_changeProp(/*id*/'layer1',1,'style.visibility','visible')">
<img border="0" src="MCj01496900000[1]small.gif" width="80"
height="119"></div>
<body>

Note that I recommended you put this immediately above </body>, and you put
it above <body>. That's a bad idea.

Note also that I recommended you add the behavior to the <img> tag - well,
that was a mistake. You should add it to the <a> tag that surrounds the
image, except in your case, there was no "surround" there, since the closing
</a> was missing -

<a href="repair.htm">
<img border="0" src="geekhelp911sliced_02.jpg" width="264" height="114"
id="img1"></td>

which is a clear error of coding. It should be this -

<a href="repair.htm">
<img border="0" src="geekhelp911sliced_02.jpg" width="264" height="114"
id="img1"></a></td>

Try reading my previous post again and give this a second shot (adjusting
for my noted mistake about the <a> tag).

--
Murray
============

Thank you for the complete response.
I have made the changes you suggested with no difference in the page.

http://geekhelp911.com/test.htm

It sounds like something is still missing.

Thanks again...

OK - the first rule is that you must not put any absolutely positioned
elements directly into table cells -

<table border="0" id="table1" cellpadding="0" style="border-collapse:
collapse">
<tr>
<td>
<div style="position: absolute; width: 100px; height: 100px; z-index:
1;
left: 145px; top: 41px; visibility: hidden" id="layer1"
onmouseout="FP_changePropRestore()"
onmouseover="FP_changeProp(/*id*/'layer1',1,'style.visibility','visible')">

So, your first task is to cut that <div> and its contents completely out
of
the page code, and paste it back immediately above the </body> tag, e.g.,

<div style="position: absolute; width: 100px; height: 100px; z-index:
1;
left: 145px; top: 41px; visibility: hidden" id="layer1"
onmouseout="FP_changePropRestore()"
onmouseover="FP_changeProp(/*id*/'layer1',1,'style.visibility','visible')">
<img border="0" src="MCj01496900000[1]small.gif" width="80"
height="119"></div>
</body>

Since it's absolutely positioned its placement on the page will not
depend
on its location in the code.

Then get the behavior off of the layer tag and onto the image where it
belongs. First change this -

<div style="position: absolute; width: 100px; height: 100px; z-index:
1;
left: 145px; top: 41px; visibility: hidden" id="layer1"
onmouseout="FP_changePropRestore()"
onmouseover="FP_changeProp(/*id*/'layer1',1,'style.visibility','visible')">

to this -

<div style="position: absolute; width: 100px; height: 100px; z-index:
1;
left: 145px; top: 41px; visibility: hidden" id="layer1">

Then, select this image - geekhelp911sliced_02.jpg - and apply a Change
Property behavior to it, to change the visibility property of that layer
(layer1) from hidden to visible.

See what happens when you do that.

The problem you were having is that if the layer is hidden, you cannot
trigger any event with it! In addition to that, event handlers applied
to
<div> tags may cause you browser compatability problems, so it's best to
stay away from that.

Finally, I would not advise the use of brackets in file/pathnames -
MCj01496900000[1]small.gif. The best bet is to stick with text
characters
and numbers only (hyphens and underscores are OK too).

--
Murray
============

Sure,
Here it is.
http://geekhelp911.com/test.htm

Hover over computer repair.

Thanks



:

Am I leaving out a step.

Most likely, since none of these steps seem to go together.

Show me your code, please.

--
Murray
============

I can't seem to get a layer to be active when I mouse over it.
I have set the behavior to image swap.
I have also tried the change property to visible.
Am I leaving out a step.

I can make it visible by using the image swap on the whole image,
but
because it is a different size and gets distored I would like to use
a
layer
that is the same size as the picture.

Thanks