By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,497 Members | 1,258 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,497 IT Pros & Developers. It's quick & easy.

javascript / iframe

P: 1
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
Share this Question
Share on Google+
2 Replies


Expert 10K+
P: 11,448
I moved this thread over from the Java forum to the Javascript forum: Java != Javascript.

kind regards,

Jos
Jul 26 '09 #2

Canabeez
100+
P: 126
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

Post your reply

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