Solved

Javascript IE4 and Nav Layers

Posted on 1998-12-06
3
295 Views
Last Modified: 2013-12-25
I have the following script -

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <script language="JavaScript">
<!--
function alter(){
document.layers["Layer1"].src="Images/TagLines/01in.gif"; width="240"; height="358"
}
//-->
</script>
</head>

<body bgcolor="#FFFFFF">

<div id="Layer1" style="position:absolute; left:159px; top:93px; width:246px; height:317px; z-index:1"><img src="Images/TagLines/02in.gif" width="240" height="358"></div>

<div id="Layer2" style="position:absolute; left:160px; top:20px; width:132px; height:57px; z-index:2">

<form method="post" action=""><input type="button" name="button" value="Change" onClick="alter()"></form>

</div>

</body>
</html>

This works great in Navigator but IE4 says document.layers
.Layers1 is not an object.

I want to alter the image source for a layer in both Nav
and IE4. How can I do this ?
0
Comment
Question by:MoonlightMedia
  • 2
3 Comments
 
LVL 1

Expert Comment

by:ddoyle
ID: 1856937
Add this code to the top of your file

<script language="JavaScript1.2">

   if (document.layers) {n=1;ie=0}
   if (document.all) {n=0;ie=1}

   if (n) mylayer = document.layers1
   if (ie) mylayer = Layers1.style

</script>


Then, further down in your code you can do something like this:

<div ID=mylayer>
.
</div>

<script language="JavaScript1.2">
if (n) {
mylayer.visibility = "hide";
}
if (ie) {
mylayer.visibility = "hidden";
}
</script>

0
 

Author Comment

by:MoonlightMedia
ID: 1856938
 Although this may allow me to reference the layer, it does not allow me to
alter the source image of the layer which you can see by the script is the
original intent. Just hiding the layer isn't a solution for what I need.
  The full implimentation of the script will cause the source image of the layer
to be altered dependant on the selected index of a list box. I have this running
completely in Netscape.
  From your answer, it looks as if I should do some reading regarding style sheets.
Is this a correct assumption ? Could you please explain the reference
" mylayer=Layers1.style ".
0
 
LVL 1

Accepted Solution

by:
ddoyle earned 100 total points
ID: 1856939
As I thought I illustrated in the example provided, the object models differ from Netscape to IE.  You should be able to put your code into a function like so.

<script language="JavaScript1.2">

function alter(){
   if (document.layers) {n=1;ie=0}
   if (document.all) {n=0;ie=1}

   if (n){
      document.layers1["Layer1"].src="Images/TagLines/01in.gif";
    }
   if (ie) document.images("MyImage").src="xxx.gif";
}
</script>

Assuming the body looks something like this:
<body bgcolor="#FFFFFF">

<div id="Layer1" style="position:absolute; left:159px; top:93px; width:246px; height:317px; z-index:1"><img ID="MyImage" src="Images/TagLines/02in.gif" width="240" height="358"></div>

<div id="Layer2" style="position:absolute; left:160px; top:20px; width:132px; height:57px; z-index:2">


This has nothing to do with Style Sheets, but everything to do with the DHTML object model.  So, you should read up on DHTML.  I would not get one of those books which just devote a chapter or so to it.  I would get a book on specifically DHTML if you really want to learn it.

0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Popularity Can Be Measured Sometimes we deal with questions of popularity, and we need a way to collect opinions from our clients.  This article shows a simple teaching example of how we might elect a favorite color by letting our clients vote for …
Both Easy and Powerful How easy is PHP? http://lmgtfy.com?q=how+easy+is+php (http://lmgtfy.com?q=how+easy+is+php)  Very easy.  It has been described as "a programming language even my grandmother can use." How powerful is PHP?  http://en.wikiped…
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

706 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now