?
Solved

Javascript Layer Show

Posted on 2005-03-14
10
Medium Priority
?
1,171 Views
Last Modified: 2010-08-05
I am trying to User a Imagemap to click and show a layer from an external htm file.  here is my code so far.

document.frames["layer1"].location="newlocation.html"
//loads htm file into the layer

//the Iframe
<IFRAME SRC="mission.htm" width=100% height=100% name="layer1" id="layer1"></IFRAME>

will this even work?  thanks
0
Comment
Question by:mark951
[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
  • 4
  • 2
10 Comments
 
LVL 32

Expert Comment

by:Batalf
ID: 13539841
Yes that should work.

You could also do by id

<IFRAME SRC="mission.htm" width=100% height=100% name="layer1" id="layer1"></IFRAME>

<script type="text/javascript">
document.getElementById('layer1').location.href="newlocation.html";
</script>

0
 

Author Comment

by:mark951
ID: 13539850
How do I get it to show up within a table on my current page when there is a mouse over event?
0
 
LVL 32

Expert Comment

by:Batalf
ID: 13539855
Example with image and image map:


<MAP NAME="map1">
<AREA
   HREF="#" onclick="document.getElementById('layer1').location.href='newlocation.html';"
   SHAPE=RECT COORDS="6,116,97,184">
</AREA>
</MAP>

<IMG SRC="testmap.gif"
   ALT="" BORDER=0 WIDTH=300 HEIGHT=300
   USEMAP="#map1">

<IFRAME SRC="mission.htm" width=100% height=100% name="layer1" id="layer1"></IFRAME>


0
Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

 
LVL 32

Expert Comment

by:Batalf
ID: 13539873
What do you mean by mouse over a event?

An example of a mouse over event could be to replace onclick with onmouseover in my example above.


And to let appear within your table, just put the

<IFRAME SRC="mission.htm" width=100% height=100% name="layer1" id="layer1"></IFRAME>

in one of your table cells.
0
 

Author Comment

by:mark951
ID: 13539976
This is what I did:
<script type="text/javascript">
document.frames["layer1"].location="mission.htm"
</script>

//My image map
 <area shape="rect" coords="83, 128, 202, 156" href="#" onclick="document.getElementById('layer1').location.href='mission.htm';">


//put the Iframe in the Cell where I want the mission page to be displayed on my main.asp page
<IFRAME SRC="mission.htm" width=100% height=100% name="layer1" id="layer1"></IFRAME>

I must have did something wrong b/c I get this error:
document.getElementById(...).location' is null or not an object
0
 
LVL 32

Accepted Solution

by:
Batalf earned 1000 total points
ID: 13542882
First of all, you don't need this part:

<script type="text/javascript">
document.frames["layer1"].location="mission.htm"
</script>

since mission.htm is allready set as source of the iframe.

Regarding the error document.getElementById(...).location' is null or not an object, check that you don't have other elements than the iframe with the id "layer1"

Batalf
0
 
LVL 15

Assisted Solution

by:VincentPuglia
VincentPuglia earned 1000 total points
ID: 13545319
Hi,

1) a return of 'null' means the object hasn't been created/displayed by the time the code tries to execute.

2) you shouldn't id an iframe 'layer1' ; it is misleading since an iframe is neither a layer, div, nor span.  

3) why are you using location?  try using 'src'
   onmouseover= 'document.frames["iframe1"].src="newlocation.htm"';

4) what browser are you using?


0

Featured Post

7 Extremely Useful Linux Commands for Beginners

Just getting started with Linux? Here's a quick start guide that has 7 commands that we believe will come in handy.

Question has a verified solution.

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

Introduction Since I wrote the original article about Handling Date and Time in PHP and MySQL several years ago, it seemed like now was a good time to update it for object-oriented PHP.  This article does that, replacing as much as possible the pr…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

777 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