Improve company productivity with a Business Account.Sign Up

x
?
Solved

Javascript IE4 and Nav Layers

Posted on 1998-12-06
3
Medium Priority
?
339 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 200 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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

By following these Magento e-commerce development tips, you can increase your website's conversion and profitability. Read this post for more details.
This article is about the challenges faced by Android app developers.
This video teaches users how to migrate an existing Wordpress website to a new domain.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

606 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