Solved

Layering of pics with ns

Posted on 1998-09-05
3
221 Views
Last Modified: 2010-04-09
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
Comment
Question by:oburgis
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 

Accepted Solution

by:
audrey090498 earned 100 total points
ID: 1837369
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
 
LVL 2

Expert Comment

by:vendrig
ID: 1837370
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
 

Author Comment

by:oburgis
ID: 1837371
Adjusted points to 100
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

726 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question