?
Solved

Javascript IE4 and Nav Layers

Posted on 1998-12-06
3
Medium Priority
?
329 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
[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
  • 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

Technology Partners: 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

An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
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.
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).
Suggested Courses

770 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