473,385 Members | 1,712 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,385 software developers and data experts.

javascript / iframe

hello I am new in writing javascript, I am doing a web page that when an user rolls the mouse over a picture a text will be display in an specific part of the webpage(iframe) and when the user moves out the mouse the text will disapear.

Here is some of my code but at this point it is not clearing the text when the mouse is out, any help will be much apreciate.

Expand|Select|Wrap|Line Numbers
  1. <title>Parts of the Brain</title>
  2. <link href="brain.css" rel="stylesheet" type="text/css" />
  3.  
  4. <script type="text/javascript">
  5. function writeFrame(i){
  6.    frameWin=window.frames["parts"];
  7.    window.frameWin.document.write("<html><head><title>HEAD</title>");
  8.    window.frameWin.document.write("window<link rel='stylesheet' href='frame.css' type='text/css' /></head><body><h2>"+Head[i]);
  9.    window.frameWin.document.write("</h2><p>"+Summary[i]);
  10.    window.frameWin.document.write("</p></body></html>");
  11. }
  12.  
  13. Head = new Array();
  14. Head[0]="";
  15. Head[1]="Frontal Lobe";
  16. Head[2]="Parietal Lobe";
  17. Head[3]="Occipital Lobe";
  18. Head[4]="Temporal Lobe";
  19.  
  20. Summary = new Array();
  21. Summary[0]="";
  22. Summary[1]="The frontal lobe controls muscle movements, speaking, ";
  23. Summary[1]+="analytical, and artistic intelligence. Body image and identity is ";
  24. Summary[1]+="primarily located in the right frontal lobe. Organizational and ";
  25. Summary[1]+="analytical skills are located in the left frontal lobe.";
  26.  
  27. Summary[2]="The parietal lobe controls the sensation of touch. The left ";
  28. Summary[2]+="parietal lobe interprets signals from the right hand. The right ";
  29. Summary[2]+="lobe interprets signals from the left hand.";
  30.  
  31. Summary[3]="The occipital lobe interprets visual information from " ;
  32. Summary[3]+="the eye. The right occipital lobe receives signals from the left ";
  33. Summary[3]+="eye. The left lobe interprets signals from the right eye.";
  34.  
  35. Summary[4]="The temporal lobes control interpretation and long-term memory. ";
  36. Summary[4]+="They are also involved in the perception of sound and the processing ";
  37. Summary[4]+="auditory language."
  38.  
  39. </script>
  40. </head>
  41.  
  42. <body>
  43. <div id="main">
  44. <h1>Anatomy 101</h1>
  45. <p>Move your mouse pointer over the parts of the brain shown below. A
  46. description of the brain lobe will appear in a pop-up window to the
  47. left.</p>
  48.  
  49. <p id="brainp">
  50.    <iframe id="parts" name="parts" scrolling="no"></iframe>
  51.    <img src="brain.jpg" usemap="#Brain" alt="" />
  52. </p>
  53.  
  54. <address>Anatomy 101 • Prof. Jacob Terrell • Rm. 231 Groudle Hall •
  55. Office Hours: MT 3-5 p.m.</address>
  56. </div>
  57.  
  58. <map id="Brain" name="Brain">
  59.    <area shape="poly" alt="Frontal Lobe"
  60.     coords="101,25,101,34,107,42,116,54,128,63,132,72,133,85,134,97,134,105,140,109,147,115,154,118,160,125,163,130,165,136,165,146,179,146,189,143,198,137,206,129,213,120,218,105,216,88,211,72,202,59,189,49,178,40,166,35,150,30,138,28,129,26,119,26,113,24,106,24,101,24,101,24" 
  61.     href="#" onmouseover="javascript:writeFrame(1)" onmouseout="writeFrame(0)" />
  62.  
  63.    <area shape="poly" alt="Parietal Lobe" 
  64.     coords="36,60,41,73,48,87,66,90,84,94,95,94,110,98,128,102,133,106,133,90,131,70,124,61,117,55,112,48,106,41,101,34,99,31,100,25,94,25,86,25,81,28,75,32,71,32,65,33,60,38,52,44,44,49,40,54,36,58" 
  65.     href="#" onmouseover="writeFrame(2)" onmouseout="writeFrame(0)" />
  66.  
  67.    <area shape="poly" alt="Occipital Lobe"
  68.     coords="34,61,26,70,21,78,17,90,14,99,13,110,15,118,19,123,23,128,31,132,40,135,48,136,58,137,65,136,62,129,58,119,55,109,54,103,52,97,48,90,46,84,43,78,40,72,37,64" 
  69.     href="#" onmouseover="writeFrame(3)" onmouseout="writeFrame(0)" />
  70.  
  71.    <area shape="poly" alt="Temporal Lobe"
  72.     coords="49,88,53,100,57,110,61,124,64,135,68,139,80,142,90,145,102,150,111,156,121,160,130,164,144,164,154,159,158,154,162,146,163,139,163,131,157,121,147,114,137,108,127,104,108,99,94,95,83,95,75,93,65,91,57,89,50,89" 
  73.     href="#" onmouseover="writeFrame(4)" onmouseout="writeFrame(0)" />
  74.  
  75.    <area shape="default" nohref="nohref" alt="" />
  76. </map>
  77.  
  78. </body>
  79. </html>
thank you
Jul 26 '09 #1
2 3969
JosAH
11,448 Expert 8TB
I moved this thread over from the Java forum to the Javascript forum: Java != Javascript.

kind regards,

Jos
Jul 26 '09 #2
Canabeez
126 100+
Why don't you do the same with a DIV instead of an IFRAME, that will be easier and less code. In this case you can miss all the <HTML><HEAD> etc., here, just replace your <IFRAME> with:
Expand|Select|Wrap|Line Numbers
  1. <div>
  2.    <h2 id="myHead"></h2>
  3.    <div id="myDiv"></div>
  4. </div>
  5.  
Add (at the header):
Expand|Select|Wrap|Line Numbers
  1. <link rel="stylesheet" href="frame.css" type="text/css" />
  2.  
And your function will look like:
Expand|Select|Wrap|Line Numbers
  1. function writeFrame(i)
  2. {
  3.    document.getElementById('myHead').innerHTML = Head[i];
  4.    document.getElementById('myDiv').innerHTML = Summary[i];
  5. }
  6.  
Jul 26 '09 #3

Sign in to post your reply or Sign up for a free account.

Similar topics

7
by: Lorenzo Vaina | last post by:
Can i get the content of an URL and put it in a variable using javascript? I want js execute different operations varying a file that is on internet. Thanks, regards.
2
by: Robert Oschler | last post by:
I have an IFrame whose document is created completely by Javascript code at runtime. The document in the IFrame accesses Javascript functions in the top level document. This works fine most of...
3
by: webguru | last post by:
I am trying to be able to pass a parameter in my URL to a subpage that will load the file specified in the paramater into an IFRAME. I have hardly used Javascript, and am trying to figure out how...
5
by: Tudor Tihan | last post by:
Hi, This is my first post here, so please be kind. I have tryed to make a javascript html page loader by using an invisible <IFrame> and some javascript variable text passing between...
8
by: chrisdude911 | last post by:
how do i add video into a javascript web page with my own custom buttons?
18
by: Chris Ianson | last post by:
Hi geniuses (or is that genii, or genies) The challenge is as above really. I have a page with an iframe in it, and need to call a JS function in the *parent* page, *from* inside the iframe. ...
16
by: Phlip | last post by:
Javascripters: I have a page with an iframe inside. Let's say the iframe looks like this: <script src="/javascripts/prototype.js" type="text/javascript" /> .... <iframe id='grinder'...
15
by: Phlip | last post by:
Javascripters: I have an outer page and an inner iframe. The outer page calculates some javascript, and wants the inner frame to run it. The inner frame should hit a page on the same (private)...
5
by: brad | last post by:
I'll post my code below. My goal is to grab the selected text in an iFrame from javascript (really any way possible). When I highlight text in the iFrame and click the link outside of the iFrame, I...
9
by: gwong123 | last post by:
Hey, I need to convert this javascript code into iframe. The javascript goes into a server and brings out an ad banner. The X's is the server IP. <script language="javascript"...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.