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

Compounding MouseOver

P: 12
I'm trying to create a design which mimics the Radiohead website in the action on this page, but the problem is that they use PHP for the effect and I have no idea about PHP. I'm very amateur: fairly confident with HTML and can scrape together codes with JavaScript with a lot of research and cursing, but for the life of me I can't see how to mouseover image or text A, get image or text B, mouseover B, get image or text C, and so on. I'm sure it can be done without needing to learn PHP but the text I am using so far doesn't recognise the second mouseover. It recognises the second a tag, certainly, as the text comes up as a link, but when I mouseover the second phrase it does nothing.

[HTML]<html>
<head>
<script language=javascript>

var first_text = '<a href=# onMouseOver=document.write(second_text);>1</a> ';
var second_text = first_text + '<a href=# onMouseOver=document.write(third_text);>2</a> ';
var third_text = first_text + second_text + '3';

</script>
</head>
<body>
<script>

document.write(first_text);

</script>

</body>
</html>[/HTML]

Can anybody help? I have a feeling that I've explained this badly...
Feb 6 '07 #1
Share this Question
Share on Google+
23 Replies

acoder
Expert Mod 15k+
P: 16,027
Welcome to The Scripts.

That cannot work. You are using a circular reference where second_text has not been defined and you are using it in first_text and second_text contains first_text which in turn contains second_text (and you end up in a spin!)

Instead define an array which contains all links/text and loop through them changing the mouseover on each mouseover or use a div/span and change the innerhtml.
Feb 6 '07 #2

P: 12
Alright. Remember that I know very little about this. Pretty much all of my JavaScript is cut and pasted together until it works, so starting from scratch is pretty much doomed to failure. In view of this, I have all of no chance of being able to use that successfully without a foolproof guide of how such things are meant to go. What I really need flatpacked for me is how you create a link which creates another link on mouseover which creates another link on mouseover ad infinitum. Like a mouseover menu, but with only one option on each level. I've been looking these up but they all seem to require utilities to be uploaded first, and I don't have the option of using external files. I handle my mouseover events in <a href> tags, which obviously you can't place within one another, so I have a grand total of no idea of how to extract this and put it into a JS script, and endless research into the matter has only left me more confused.

If anybody has the time to put together a few steps of The Idiot's Guide etc., I would be eternally grateful. I may marry you.
Feb 7 '07 #3

dorinbogdan
Expert 100+
P: 839
Try this orientative sample in IExplorer, and please let me know if it helps or not.
[HTML]<html>
<head>
<title>Untitled Document</title>
<script language="javascript">
window.onload = function (){
var c1 = document.getElementById("c1");
c1.attachEvent("onmouseover", show);
}
function show(){
var sender = window.event.srcElement;
var r = sender.parentElement;
if (r.cells.length >= 10) return;
var c = r.insertCell(-1);
c.id = "c" + r.cells.length;
c.innerHTML = "text" + r.cells.length;
c.attachEvent("onmouseover",show);
c.attachEvent("onmouseout",reset);
r.appendChild(c);
sender.detachEvent("onmouseover",show);
sender.detachEvent("onmouseout",reset);
}
function reset(){
var c = window.event.srcElement
var r = c.parentElement;
var i = 0;
var len = r.cells.length;
for (i=len-1;i>=1;i--){
r.removeChild(r.cells(i));
}
c = document.getElementById("c1");
c.attachEvent("onmouseover", show);
}
</script>
</head>

<body>
<table id="t1" border = "1">
<tr id="r1">
<td id="c1">text1</td>
</tr>

</table>
</body>
</html>[/HTML]
Feb 7 '07 #4

P: 12
It does... how do I replace the text1, text2 etc? Sorry.
Feb 7 '07 #5

acoder
Expert Mod 15k+
P: 16,027
Replace with what? You can replace the text1 in the following line
[HTML]<td id="c1">text1</td>[/HTML]
to
[HTML]<td id="c1">whatever you want</td>[/HTML]
The code makes use of the number after "text" and after "c" (c1, c2, etc.) You can adapt the code to your needs.
Feb 7 '07 #6

acoder
Expert Mod 15k+
P: 16,027
BTW, dorinbogdan, thanks for sharing the code and welcome to The Scripts.
Feb 7 '07 #7

P: 12
Well, that's the thing... I can replace text1 with whatever I want, but I'd like each extra box to contain different words, and I don't know how to do that with the existing script.
Feb 8 '07 #8

acoder
Expert Mod 15k+
P: 16,027
In function show(), look for the following line:
Expand|Select|Wrap|Line Numbers
  1. c.innerHTML = "text" + r.cells.length;
and change that to your text. r.cells.length is the current number of cells, so it'll keep increasing till it gets to 9.

To show different text, declare an array, e.g.
Expand|Select|Wrap|Line Numbers
  1. var myArray = {"test1", "my text", "and so on...", ... }
Then use r.cells.length to index the array, but remember that you cannot exceed the length of the array, otherwise you will get an error. To prevent that, change the line:
Expand|Select|Wrap|Line Numbers
  1. if (r.cells.length >= 10) return;
to
Expand|Select|Wrap|Line Numbers
  1. if (r.cells.length >= myArray.length) return;
to prevent exceeding the length of the array.

Hope that solves your problem. If not, feel free to post again.
Feb 8 '07 #9

dorinbogdan
Expert 100+
P: 839
I optimized the first sample.
You can set the desired texts in the strings[] array.
Let me know if need more features or enhancements.

[HTML]<html>
<head>
<title>Untitled Document</title>
<style>
.spacer {font-size:1px}
.custom {font-size:18px}
</style>
<script language="javascript">

var strings = new Array();
strings[0] = "first text ...";
strings[1] = "second text ...";
strings[2] = "third text ...";
strings[3] = "fourth text ...";
strings[4] = "fifth text ...";
strings[5] = "sixth text ...";
strings[6] = "seventh text ...";
strings[7] = "eigth text ...";
strings[8] = "nineth text ...";
strings[9] = "10th / last.";
var max = strings.length-1;
window.onload = function(){
var r = document.getElementById("r1");
var c;
for (i=0;i<=max;i++){
c = r.insertCell(-1);
c.innerHTML = strings[i];
c.id = "c" + i;
c.style.display = "none";
c.attachEvent("onmouseover",show);
c.attachEvent("onclick",reset);
c.className = "custom"
c.style.cursor = "pointer";
if (i==0) c.style.display = "block";
if (i==max) c.attachEvent("onmouseout",reset);
}
r = document.getElementById("toprow");
r.cells(0).colSpan = max+1;
r = document.getElementById("bottomrow");
r.cells(0).colSpan = max+1;

}
function show(){
var sender = window.event.srcElement;
if (sender.id == "c" + max) {
sender.style.color = "red";
return;
}
sender.style.color = "blue";
var nextid = (1 + parseInt(sender.id.substr(1)));
var nextCell = document.getElementById("c"+ nextid);
nextCell.style.display = "block";
}
function reset(){
var r = document.getElementById("r1");
if (r.cells==null) return;
var i = 0;
for (i=max;i>=1;i--){
r.cells(i).style.display = "none";
}
r.cells(0).style.color = "black";
}
</script>
</head>

<body>
<table id="t1" height="50px" border = "1" cellspacing="0" cellpadding="1">
<tr id="toprow" class="spacer" height="1" onmouseover="reset()"><td>&nbsp;</td></tr>
<tr height="50px" id="r1">
<!-- <td id="c0" style="display:block" onmouseover="show()">first text ...</td>
........
-->
</tr>
<tr id="bottomrow" class="spacer" height="1" onmouseover="reset()"><td>&nbsp;</td></tr>

</table>

</body>
</html>[/HTML]
Feb 8 '07 #10

P: 12
Thanks both of you, that's great. I'm using the second code for now as it requires the least brainpower from me. I'm using it in the "TryIt" editor on the w3schools website to test, but there are two problems:

1. The status bar says, "Error on page" when the mouse is placed over the writing. I don't know where that's coming from, but it might have something to do with the next bit;

2. When I introduce nested tables into it (to produce the translucency effect as on the Radiohead page) the mouseover effect becomes extremely flaky. I've tried to add a mouseout event that produces the same effect, to heighten the amount of times that it actually works, but it doesn't seem to have worked very well. I have no idea why, but as soon as tables are introduced -- repositioned or not -- most of the time, the new box doesn't appear, and there doesn't seem to be any logical pattern in the times when it does appear.

The current code is:
Expand|Select|Wrap|Line Numbers
  1. <html>
  2.     <head>
  3.         <title>Untitled Document</title>
  4.         <style>
  5.  
  6. body {
  7. background-color: #216779
  8. }
  9.  
  10. td.one {
  11. font-family: arial;
  12. font-size: 16px;
  13. color: #216779;
  14. font-weight: bold;
  15. border-width: 1;
  16. border-color: black;
  17. border-style: solid;
  18. background-color: white;
  19. filter: alpha(opacity=80);
  20. padding-top: 10px;
  21. padding-left: 8px;
  22. padding-right: 20px;
  23. padding-bottom: 8px;
  24. }
  25.  
  26. td.two {
  27. font-family: arial;
  28. font-size: 16px;
  29. color: #216779;
  30. font-weight: bold;
  31. border-width: 1;
  32. border-color: black;
  33. border-style: solid;
  34. background-color: white;
  35. filter: alpha(opacity=80);
  36. position: absolute;
  37. left: 20px;
  38. top: 55px;
  39. padding-top: 10px;
  40. padding-left: 8px;
  41. padding-right: 20px;
  42. padding-bottom: 8px;
  43. }
  44.  
  45. td.three {
  46. font-family: arial;
  47. font-size: 16px;
  48. color: #216779;
  49. font-weight: bold;
  50. border-width: 1;
  51. border-color: black;
  52. border-style: solid;
  53. background-color: white;
  54. filter: alpha(opacity=80);
  55. position: absolute;
  56. left: 30px;
  57. top: 110px;
  58. padding-top: 10px;
  59. padding-left: 8px;
  60. padding-right: 20px;
  61. padding-bottom: 8px;
  62. }
  63.  
  64. td.four {
  65. font-family: arial;
  66. font-size: 16px;
  67. color: #216779;
  68. font-weight: bold;
  69. border-width: 1;
  70. border-color: black;
  71. border-style: solid;
  72. background-color: white;
  73. filter: alpha(opacity=80);
  74. position: absolute;
  75. left: 130px;
  76. top: 105px;
  77. padding-top: 10px;
  78. padding-left: 8px;
  79. padding-right: 20px;
  80. padding-bottom: 8px;
  81. }
  82.  
  83. td.five {
  84. font-family: arial;
  85. font-size: 16px;
  86. color: #216779;
  87. font-weight: bold;
  88. border-width: 1;
  89. border-color: black;
  90. border-style: solid;
  91. background-color: white;
  92. filter: alpha(opacity=80);
  93. position: absolute;
  94. left: 220px;
  95. top: 120px;
  96. padding-top: 10px;
  97. padding-left: 8px;
  98. padding-right: 20px;
  99. padding-bottom: 8px;
  100. }
  101.  
  102. td.six {
  103. font-family: arial;
  104. font-size: 16px;
  105. color: #216779;
  106. font-weight: bold;
  107. border-width: 1;
  108. border-color: black;
  109. border-style: solid;
  110. background-color: white;
  111. filter: alpha(opacity=80);
  112. position: absolute;
  113. left: 200px;
  114. top: 150px;
  115. padding-top: 10px;
  116. padding-left: 8px;
  117. padding-right: 20px;
  118. padding-bottom: 8px;
  119. }
  120.  
  121. td.seven {
  122. font-family: arial;
  123. font-size: 16px;
  124. color: #216779;
  125. font-weight: bold;
  126. border-width: 1;
  127. border-color: black;
  128. border-style: solid;
  129. background-color: white;
  130. filter: alpha(opacity=80);
  131. position: absolute;
  132. left: 3px;
  133. top: 200px;
  134. padding-top: 10px;
  135. padding-left: 8px;
  136. padding-right: 20px;
  137. padding-bottom: 8px;
  138. }
  139.  
  140. td.eight {
  141. font-family: arial;
  142. font-size: 16px;
  143. color: #216779;
  144. font-weight: bold;
  145. border-width: 1;
  146. border-color: black;
  147. border-style: solid;
  148. background-color: white;
  149. filter: alpha(opacity=80);
  150. position: absolute;
  151. left: 3px;
  152. top: -5px;
  153. padding-top: 10px;
  154. padding-left: 8px;
  155. padding-right: 20px;
  156. padding-bottom: 8px;
  157. }
  158.  
  159. td.nine {
  160. font-family: arial;
  161. font-size: 16px;
  162. color: #216779;
  163. font-weight: bold;
  164. border-width: 1;
  165. border-color: black;
  166. border-style: solid;
  167. background-color: white;
  168. filter: alpha(opacity=80);
  169. position: absolute;
  170. left: 3px;
  171. top: -5px;
  172. padding-top: 10px;
  173. padding-left: 8px;
  174. padding-right: 20px;
  175. padding-bottom: 8px;
  176. }
  177.  
  178. td.ten {
  179. font-family: arial;
  180. font-size: 16px;
  181. color: #216779;
  182. font-weight: bold;
  183. border-width: 1;
  184. border-color: black;
  185. border-style: solid;
  186. background-color: white;
  187. filter: alpha(opacity=80);
  188. position: absolute;
  189. left: 3px;
  190. top: -5px;
  191. padding-top: 10px;
  192. padding-left: 8px;
  193. padding-right: 20px;
  194. padding-bottom: 8px;
  195. }
  196.  
  197. A:link {height: 16; color: #216779; text-decoration: none; }
  198. A:visited {height: 16; color: #216779; text-decoration: none; }
  199. A:active {height: 16; color: #216779; text-decoration: none; }
  200. A:hover {height: 16; color: #214dfe; text-decoration: none; }
  201.  
  202.         </style>
  203.     <script language="javascript">
  204.  
  205.         var strings = new Array();
  206.         strings[0] = "<table><tr><td class=one><a href=#>This is my<br>first sentence</a></td></tr></table>";
  207.         strings[1] = "<table><tr><td class=two><a href=#>This is<br>my second sentence</a></td></tr></table>";
  208.         strings[2] = "<table><tr><td class=three><a href=#>And this<br>is my third</a></td></tr></table>";
  209.         strings[3] = "<table><tr><td class=four><a href=#>Fourth line<br>of text</a></td></tr></table>";
  210.         strings[4] = "<table><tr><td class=five><a href=#>fifth</a></td></tr></table>";
  211.         strings[5] = "<table><tr><td class=six><a href=#>After<br>the sixth<br>which is<br>a very<br>wonderful section</a></td></tr></table>";
  212.         strings[6] = "<table><tr><td class=seven><a href=#>will come line number seven</a></td></tr></table>";
  213.         strings[7] = "eigth text ...";
  214.         strings[8] = "nineth text ...";
  215.         strings[9] = "10th / last.";
  216.         var max = strings.length-1;
  217.         window.onload = function(){
  218.             var r = document.getElementById("r1");
  219.             var c;
  220.             for (i=0;i<=max;i++){
  221.                 c = r.insertCell(-1);
  222.                 c.innerHTML = strings[i];
  223.                 c.id = "c" + i;
  224.                 c.style.display = "none";
  225.                 c.attachEvent("onmouseover",show);
  226. c.attachEvent("onmouseout",show);
  227.                 c.attachEvent("onclick",reset);
  228.                 c.style.cursor = "pointer";
  229.                 if (i==0) c.style.display = "block";
  230.                 if (i==max) c.attachEvent("onmouseout",reset);
  231.             } 
  232.             r = document.getElementById("toprow");
  233.             r.cells(0).colSpan = max+1;
  234.             r = document.getElementById("bottomrow");
  235.             r.cells(0).colSpan = max+1;
  236.  
  237.         }
  238.         function show(){        
  239.             var sender = window.event.srcElement;
  240.             if (sender.id == "c" + max) {
  241.                 sender.style.color = "red";
  242.                 return;
  243.             }
  244.             var nextid = (1 + parseInt(sender.id.substr(1))); 
  245.             var nextCell = document.getElementById("c"+ nextid); 
  246.             nextCell.style.display = "block";
  247.         }
  248.         function reset(){
  249.             var r = document.getElementById("r1");
  250.             if (r.cells==null) return;
  251.             var i = 0;
  252.             for (i=max;i>=1;i--){
  253.                 r.cells(i).style.display = "none";
  254.             }
  255.             r.cells(0).style.color = "black";
  256.         }
  257.     </script>
  258.  
  259.     </head>
  260.  
  261. <body>
  262. <table id="t1" height="50px" border = "0" cellspacing="0" cellpadding="1" style="position: relative; left: 0px; top: 0px">
  263.  
  264. <tr height="50px" id="r1">
  265. <!--
  266. <td id="c0" style="display:block" onmouseover="show()" onmouseout="show()" border=0>This is my first sentence</td>
  267. -->
  268. </tr>
  269.  
  270.  
  271. </table>
  272. </body>
  273. </html>
  274.  
  275.  
Obviously it isn't finished yet but I thought I'd address the problems with the code before changing it further.
Feb 11 '07 #11

dorinbogdan
Expert 100+
P: 839
Ok, I'll try to look today and hope to find a workaround.
Feb 12 '07 #12

dorinbogdan
Expert 100+
P: 839
Using the same CSS and HTML code from your latest sample, replace the script with this code :

Expand|Select|Wrap|Line Numbers
  1.     <script language="javascript">
  2.  
  3.         var strings = new Array();
  4.         strings[0] = "<table><tr><td id='cc0' class=one><a href=#>This is my<br>first sentence</a></td></tr></table>";
  5.         strings[1] = "<table><tr><td id='cc1' class=two><a href=#>This is<br>my second sentence</a></td></tr></table>";
  6.         strings[2] = "<table><tr><td id='cc2' class=three><a href=#>And this<br>is my third</a></td></tr></table>";
  7.         strings[3] = "<table><tr><td id='cc3' class=four><a href=#>Fourth line<br>of text</a></td></tr></table>";
  8.         strings[4] = "<table><tr><td id='cc4' class=five><a href=#>fifth</a></td></tr></table>";
  9.         strings[5] = "<table><tr><td id='cc5' class=six><a href=#>After<br>the sixth<br>which is<br>a very<br>wonderful section</a></td></tr></table>";
  10.         strings[6] = "<table><tr><td id='cc6' class=seven><a href=#>will come line number seven</a></td></tr></table>";
  11.         //strings[7] = "eigth text ...";
  12.         //strings[8] = "nineth text ...";
  13.         //strings[9] = "10th / last.";
  14.         var max = strings.length-1;
  15.         window.onload = LoadMe;
  16.         function LoadMe(){
  17.             var r = document.getElementById("r1");
  18.             var c;
  19.             for (i=0;i<=max;i++){
  20.                 newcell = r.insertCell(-1);
  21.                 newcell.innerHTML = strings[i];
  22.                 c = document.getElementById("cc" + i);
  23.                 c.style.display = "none";
  24.                 c.attachEvent("onmouseenter",show);
  25.                 c.attachEvent("onclick",reset);
  26.                 c.style.cursor = "pointer";
  27.                 if (i==0) c.style.display = "block";
  28.                 if (i==max) c.attachEvent("onmouseleave",reset);
  29.             } 
  30.  
  31.         }
  32.         function show(){
  33.             var sender = window.event.srcElement;
  34.             if (sender.id == "cc" + max) return;
  35.             var nextid = (1 + parseInt(sender.id.substr(2))); 
  36.             var nextCell = document.getElementById("cc"+ nextid); 
  37.             nextCell.style.display = "block";
  38.         }
  39.         function reset(){
  40.             var i = 0;
  41.             for (i=max;i>=1;i--){
  42.                 document.getElementById("cc" + i).style.display = "none";
  43.             }
  44.  
  45.         }
  46.     </script>
  47.  
  48.  
Currently, the reset works only when leave the last cell or when click any cell.
Feb 12 '07 #13

dorinbogdan
Expert 100+
P: 839
To correctly reset the chain when leave any cell, insert at the end of LoadMe() function the following line:

Expand|Select|Wrap|Line Numbers
  1. document.getElementById("t1").attachEvent("onmouseleave",reset);
  2.  
Feb 12 '07 #14

dorinbogdan
Expert 100+
P: 839
Small update:
You can remove the line:

Expand|Select|Wrap|Line Numbers
  1.  if (i==max) c.attachEvent("onmouseleave",reset); 
in LoadMe() function, since it is no more necessary.
.
Feb 12 '07 #15

P: 12
You are absolutely magic. Thank you so much. If you want to be credited in the final design just tell me what to say.
Feb 12 '07 #16

P: 12
Ugh. Problem: Firefox doesn't show a single thing.
Feb 12 '07 #17

dorinbogdan
Expert 100+
P: 839
Ok, I tested on IE only.
I'll try today to implement it on Firefox too.
Feb 13 '07 #18

acoder
Expert Mod 15k+
P: 16,027
Ugh. Problem: Firefox doesn't show a single thing.
Two problems that I've noticed. mouseenter and mouseleave are only supported by IE. Secondly srcElement is IE-specific, use both srcElement and target.

See this page for details. See this page too for mouse events.
Feb 13 '07 #19

dorinbogdan
Expert 100+
P: 839
I hope this enhanced version (that supports both IE and Firefox) to be appropriate:


Expand|Select|Wrap|Line Numbers
  1. <html>
  2.     <head>
  3.         <title>Titled Document</title>
  4.         <style>
  5.  
  6. body {
  7. height:100%;
  8. background-color: #216779
  9. }
  10.  
  11. td.one, td.two, td.three, td.four, td.five, td.six, td.seven {
  12. font-family: arial;
  13. font-size: 16px;
  14. color: #216779;
  15. font-weight: bold;
  16. border-width: 1;
  17. border-color: black;
  18. border-style:solid;
  19. background-color: white;
  20. filter: alpha(opacity=80);
  21. -moz-opacity:.80;
  22. padding-top: 10px;
  23. padding-left: 8px;
  24. padding-right: 20px;
  25. padding-bottom: 8px;
  26. height:auto;
  27. }
  28.  
  29. td.two {
  30. position: absolute;
  31. left: 20px;
  32. top: 55px;
  33. }
  34.  
  35. td.three {
  36. position: absolute;
  37. left: 30px;
  38. top: 110px;
  39. }
  40.  
  41. td.four {
  42. position: absolute;
  43. left: 130px;
  44. top: 105px;
  45. }
  46.  
  47. td.five {
  48. position: absolute;
  49. left: 220px;
  50. top: 120px;
  51. }
  52.  
  53. td.six {
  54. position: absolute;
  55. left: 200px;
  56. top: 150px;
  57. }
  58.  
  59. td.seven {
  60. position: absolute;
  61. left: 3px;
  62. top: 200px;
  63. }
  64.  
  65. A:link {height: 16; color: #216779; text-decoration: none; }
  66. A:visited {height: 16; color: #216779; text-decoration: none; }
  67. A:active {height: 16; color: #216779; text-decoration: none; }
  68. A:hover {height: 16; color: #214dfe; text-decoration: none; }
  69.  
  70.  
  71.         </style>
  72.     <script language="javascript">
  73.         var classes = new Array();
  74.         var strings = new Array();
  75.         strings[1] = "<a href=#>This is my<br>first sentence</a>";
  76.         classes[1] = "one";
  77.         strings[2] = "<a href=#>This is<br>my second sentence</a>";
  78.         classes[2] = "two";
  79.         strings[3] = "<a href=#>And this<br>is my third</a>";
  80.         classes[3] = "three";
  81.         strings[4] = "<a href=#>Fourth line<br>of text</a>";
  82.         classes[4] = "four";
  83.         strings[5] = "<a href=#>fifth</a>";
  84.         classes[5] = "five";
  85.         strings[6] = "<a href=#>After<br>the sixth<br>which is<br>a very<br>wonderful section</a>";
  86.         classes[6] = "six";
  87.         strings[7] = "<a href=#>will come line number seven</a>";
  88.         classes[7] = "seven";
  89.         //strings[8] = "eight text ...";
  90.         //classes[8] = "eight";
  91.         //strings[9] = "nineth text ...";
  92.         //classes[9] = "nine";
  93.         //strings[10] = "10th / last.";
  94.         //classes[10] = "ten";
  95.         var max = strings.length-1;
  96.         var isIE = false;
  97.         var isInitSate = true;
  98.         window.onload = LoadMe;
  99.         function LoadMe(){
  100.             var b = detectBrowser();
  101.  
  102.             if (b == false) return;
  103.             var t = document.getElementById("t1");
  104.  
  105.             var c;
  106.             for (i=1;i<=max;i++){
  107.                 c = t.insertRow(-1).insertCell(-1);
  108.                 c.id = "cc" + i;
  109.                 c.className = classes[i];
  110.                 c.innerHTML = strings[i];
  111.                 c.style.display = "none";
  112.                 c.onclick = reset;
  113.                 c.onmouseover = show;
  114.                 c.style.cursor = "pointer";
  115.                 if (i==1) c.style.display = "block";
  116.             }
  117.             document.getElementById("b1").onmouseover = reset;
  118.  
  119.  
  120.         }
  121.         function show(e){
  122.             var sender; 
  123.             if (isIE) {
  124.                 sender = window.event.srcElement;
  125.                 window.event.cancelBubble = true;    
  126.             } else{
  127.                 sender = e.target;
  128.                 e.stopPropagation();
  129.             } 
  130.  
  131.             if (sender.id == "cc" + max || sender.id == "") return;
  132.             var nextid = (1 + parseInt(sender.id.substr(2))); 
  133.             var nextCell = document.getElementById("cc"+ nextid); 
  134.             nextCell.style.display = "block";
  135.             isInitState = false;
  136.         }
  137.         function reset(e){
  138.             if (!isIE) e.stopPropagation();
  139.             var i = 0;
  140.             for (i=max;i>1;i--){
  141.                 document.getElementById("cc" + i).style.display = "none";
  142.             }
  143.             isInitState = true;
  144.         }
  145.         function detectBrowser(){
  146.             var browser=navigator.appName;
  147.             var version=parseFloat(navigator.appVersion);
  148.             if ((browser=="Netscape" || browser=="Microsoft Internet Explorer")
  149.             && (version>=4))  
  150.             {
  151.                 isIE = (browser=="Microsoft Internet Explorer");
  152.                 return true;
  153.             }
  154.             else 
  155.             {
  156.                 alert(browser + " browser is not supported by this page!")
  157.                 return false; 
  158.             }
  159.  
  160.         }
  161.     </script>
  162.  
  163.     </head>
  164.  
  165. <body id="b1">
  166. <table id="t1" style="position: relative; left: 0px; top: 0px">
  167.  
  168. </table>
  169. </body>
  170. </html>
  171.  
If need to add more text cells (i.e. td.eight...)
1. update the general <style> section that begins with: td.one, td.two...
2. add a particular <style> section: td.eight{...}
3. update the strings[] and classes[] arrays in the <script> section.

Thanks.
Feb 13 '07 #20

acoder
Expert Mod 15k+
P: 16,027
Good work there.

Just two points:
I would use object detection rather than browser detection, e.g. if IE supports srcElement, just use:
Expand|Select|Wrap|Line Numbers
  1. if (e.srcElement) ...
If it's not supported, it will return false so you can put the other browsers' code in the else statement.

Secondly, it's a great job making all the effort to get a working solution, but personally I prefer to point in the right direction: links, tutorials, code snippets, etc.
Feb 13 '07 #21

dorinbogdan
Expert 100+
P: 839
Thank you for suggestions.
I was hurried to provide a working sample.
And I'm sure that it still can be better optimized.
Feb 13 '07 #22

P: 12
Thank you, that's excellent.

I do prefer to learn rather than just being told what to write, but my knowledge of Javascript is really so pitiful that it would take me far too long to learn enough to be able to implement this feature -- and that's time I simply don't have right now. So I'm grateful to both of you, for trying to point me in the right direction and for giving me a complete code to use. Maybe some day I'll be able to look back at that code and understand how to get there in the first place...

Again, cheers.
Feb 26 '07 #23

dorinbogdan
Expert 100+
P: 839
I think that Javascript is the most easy language.
I learned its basics in 2 weeks.

God bless you.
Feb 26 '07 #24

Post your reply

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