JavaScript and Layers

by Ben Ocean <beno(at)cnw.com>
Date:	Tue, 25 Apr 2000 08:26:33 -0700
To:	hwg-techniques(at)mail.hwg.org
	todo: View Thread, Original
Hi, all;
I'm trying to create a MouseOver effect where OnMouseOver an image slides
to the side, revealing a small navbar underneath. Works fine with one
image, except I can't get the image to stay *slid over* for a short
period of time, to enable the user to utilize the navbar underneath! This
can be seen at:
http://TheWebsons.com/indexx.html
Then there's the problem with more than one image. I thought that if I
arranged everything in layers, I could move one image without moving the
rest. But, no! Move the top one and all the others follow suit! Then the
JavaScript freezes on the lower ones (although, interestingly enough,
when I just had *2* images, the bottom one did move!) This can be seen
at:
http://TheWebsons.com/indexxx.html
Below my signing off is the code. When responding to the list, please
delete all unnecessary code (mercy to the server!). TIA,
BenO

<HTML>
<HEAD>
<script language="JavaScript1.2">
<!--

function move(x, y) {
object1.style.pixelLeft += x;
object1.style.pixelTop  += y;};

function move2(x, y) {
object2.style.pixelLeft += x;
object2.style.pixelTop  += y;};

function move3(x, y) {
object3.style.pixelLeft += x;
object3.style.pixelTop  += y;};

-->
</script>
<style type="text/css">
.car { position: absolute; top: 10; left: 182 }
.branch_cars { position: absolute; top: 70; left: 50 }
.truck { position: absolute; top: 100; left: 182 }
.branch_trucks { position: absolute; top: 143; left: 50 }
.commercial { position: absolute; top: 190; left: 182 }
.branch_commercial { position: absolute; top: 216; left: 50 }
.rv { position: absolute; top: 280; left: 182}
.branch_rv { position: absolute; top: 289; left: 50 }
</style>
<TITLE> type_Document_Title_here </TITLE>
</HEAD>
<BODY bgcolor="#ffffff">
<span class="branch_cars">
<img src="image/branch_cars.gif" usemap="#map1" border="0">
<map name="map1">
<area shape="rect" coords="0,5,100,25" href="Cars/New/">
<area shape="rect" coords="0,37,100,57" href="Cars/Pre-Owned/">
</map>
</span>
<span class="car">
<LAYER class="NS" visibility="hide" top="50" name="object1" left="50" onmouseover="move(132, 0)" onmouseout="move(-132, 0)" z-index="4">
<script language="JavaScript1.2">
<!--

document.write('<DIV ID="object1" style="Position : Absolute ;Left : -132px ;Top : 20px ;Width : 0px ;Z-Index : 20">')

-->
</script>
<table border="0" cellpadding="0" cellspacing="0" width="202"  onmouseover="move(132,0)" onmouseout="move(-132, 0)">
    <tr>
        <td align="center" rowspan="100">
		<a href="Cars/"><img src="image/car.jpg" width="202" height="148" border="0"></a>
	</td>
    </tr>
</table>
</span>
</layer>

<span class="branch_trucks">
<img src="image/branch_cars.gif" usemap="#map2" border="0">
<map name="map2">
<area shape="rect" coords="0,5,100,25" href="Trucks/New/">
<area shape="rect" coords="0,37,100,57" href="Trucks/Pre-Owned/">
</map>
</span>

<span class="truck">
<LAYER class="NS" visibility="hide" top="200" name="object2" left="100" onmouseover="move2(132, 0)" onmouseout="move2(-132, 0)" z-index="3">
<script language="JavaScript1.2">
<!--

document.write('<DIV ID="object2" style="Position : Absolute ;Left : -132px ;Top : 20px ;Width : 0px ;Z-Index : 19">')

-->
</script>
<table border="0" cellpadding="0" cellspacing="0" width="202"  onmouseover="move2(132,0)" onmouseout="move2(-132, 0)">
    <tr>
        <td align="center" rowspan="100">
		<a href="Trucks/"><img src="image/truck.jpg" width="202" height="148" border="0"></a>
	</td>
    </tr>
</table>
</span>
</layer>
 
<span class="branch_commercial">
<img src="image/branch_cars.gif" usemap="#map3" border="0">
<map name="map3">
<area shape="rect" coords="0,5,100,25" href="Commercial/New/">
<area shape="rect" coords="0,37,100,57" href="Commercial/Pre-Owned/">
</map>
</span>

<span class="commercial">
<LAYER class="NS" visibility="hide" top="230" name="object3" left="150" onmouseover="move3(132, 0)" onmouseout="move3(-132, 0)" z-index="2">
<script language="JavaScript1.2">
<!--

document.write('<DIV ID="object2" style="Position : Absolute ;Left : -132px ;Top : 20px ;Width : 0px ;Z-Index : 18">')

-->
</script>
<table border="0" cellpadding="0" cellspacing="0" width="202"  onmouseover="move3(132,0)" onmouseout="move3(-132, 0)">
    <tr>
        <td align="center" rowspan="100">
		<a href="Commercial/"><img src="image/commercial.jpg" width="202" height="148" border="0"></a>
	</td>
    </tr>
</table>
</span>
</layer>
</BODY>
<br>
</html>
HWG hwg-techniques mailing list archives, maintained by Webmasters @ IWA