• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 231
  • Last Modified:

Layering of pics with ns

is there a possibility to layer various pics above each other with the ns like it is possible with "z-index" attribut of ie ???
0
oburgis
Asked:
oburgis
1 Solution
 
audrey090498Commented:
You can effectively layer images in NS using javascript like the one below. In this example, a drill bit punches through the background onMouseOver and reverses
onMouseOut. setTimeout allows you to adjust the delay between images to whatever you want.  Of course you can use the same script with single images and load them on top of one another with clicks or mouseOvers.

<head>
<script language="javascript">
<!--
drill = new Array();
for (i=0; i<=6; i++) {
drill[i] = new Image(); }
        drill[0].src = "nav6.gif";
        drill[1].src = "drill1.gif";
        drill[2].src = "drill2.gif";
        drill[3].src = "drill3.gif";
        drill[4].src = "drill4.gif";
        drill[5].src = "drill5.gif";
function drillout() {
setTimeout('document.drillanim.src = drill[0].src',0);
setTimeout('document.drillanim.src = drill[1].src',0);
setTimeout('document.drillanim.src = drill[2].src',75);
setTimeout('document.drillanim.src = drill[3].src',150);  
setTimeout('document.drillanim.src = drill[4].src',225);
setTimeout('document.drillanim.src = drill[5].src',300); }
function drillin() {
setTimeout('document.drillanim.src = drill[4].src',0);
setTimeout('document.drillanim.src = drill[3].src',75);
setTimeout('document.drillanim.src = drill[2].src',150);  
setTimeout('document.drillanim.src = drill[1].src',225);
setTimeout('document.drillanim.src = drill[0].src',300); }
//-->
</script>
</head>
<body>
<a href="#.html" onmouseover="(drillout())" onmouseout="(drillin())"><img name="drillanim" src="starts-without-drill.gif">

This is worth 100 points by the way.  Good luck.

0
 
vendrigCommented:
When just talking about z-order... I don't know how to do it in MSIE4, but it's probably a similar approach as in NSNav4.
First of all you make layers that contain data (like images). Like <LAYER name="lay0" LEFT=150 TOP=10> <IMG src="image0.gif"> </LAYER>
Then you can set their visibility with the property VISIBILITY (values: "HIDE", "SHOW" or "INHERIT" to take same value as parent layer). SHOW is of course default.
Setting the z-order is done with the property Z-INDEX (value: positive integer, highest number on top of stack). If you don't specify anything, the order in the HTML file is used (last layer defined is on top).
For simple cases you can use BELOW and ABOVE properties, e.g. <LAYER name="lay1" BELOW="lay0"> means lay0 is below lay1.
You can approach the layers as an object (document.layers[0] and so on) in JavaScript, so that you can change all properties dynamically. Hint: use SHIFT-RELOAD when testing this stuff in your browser.
0
 
oburgisAuthor Commented:
Adjusted points to 100
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now