Connecting Tech Pros Worldwide Help | Site Map

javascript / iframe

Newbie
 
Join Date: Jul 2009
Posts: 1
#1: Jul 26 '09
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
JosAH's Avatar
Expert
 
Join Date: Mar 2007
Posts: 10,611
#2: Jul 26 '09

re: javascript / iframe


I moved this thread over from the Java forum to the Javascript forum: Java != Javascript.

kind regards,

Jos
Canabeez's Avatar
Member
 
Join Date: Jul 2009
Location: Israel
Posts: 85
#3: Jul 26 '09

re: javascript / iframe


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.  
Reply