473,385 Members | 2,069 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

home > topics > javascript > questions > compounding mouseover

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

Compounding MouseOver

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
23 2710
acoder
16,027 Expert Mod 8TB
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
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
839 Expert 512MB
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
It does... how do I replace the text1, text2 etc? Sorry.
Feb 7 '07 #5
acoder
16,027 Expert Mod 8TB
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
16,027 Expert Mod 8TB
BTW, dorinbogdan, thanks for sharing the code and welcome to The Scripts.
Feb 7 '07 #7
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
16,027 Expert Mod 8TB
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
839 Expert 512MB
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
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
839 Expert 512MB
Ok, I'll try to look today and hope to find a workaround.
Feb 12 '07 #12
dorinbogdan
839 Expert 512MB
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
839 Expert 512MB
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
839 Expert 512MB
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
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
Ugh. Problem: Firefox doesn't show a single thing.
Feb 12 '07 #17
dorinbogdan
839 Expert 512MB
Ok, I tested on IE only.
I'll try today to implement it on Firefox too.
Feb 13 '07 #18
acoder
16,027 Expert Mod 8TB
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
839 Expert 512MB
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
16,027 Expert Mod 8TB
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
839 Expert 512MB
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
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
839 Expert 512MB
I think that Javascript is the most easy language.
I learned its basics in 2 weeks.

God bless you.
Feb 26 '07 #24

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

Similar topics

14
Need to know if this is even possible (mouseover mayhem, long)
by: J. Makela | last post by:
Hallo. This should be a pretty entertaining question for you *real* javascript writers.. I, being the lowly photoshop guy at an ad agency made the mistake of actually saying "HTML" in a...
Javascript
2
Optimizing code for span mouseover invocation.
by: Alex | last post by:
On my page I have a lot string like this: <span onmouseover="callMe(this)" onmouseout="callMe(null)" >abc1</span> <span onmouseover="callMe(this)" onmouseout="callMe(null)" >abc2</span> <span...
Javascript
3
HTML image map mouseover help
by: Annette Acquaire | last post by:
I have and image map with a dozen hotspot links on it that I'm trying to get to open a new image over existing one on mouseover of each COORD. The only thing I was able to do was swap image on...
HTML / CSS
1
mouseover only works correctly on second mouseover.
by: dave345 | last post by:
This javascript issue is in an app using C# / .Net 2.0 running on XP. First post, please mention if I mess up any conventions of this forum. I’ve got a mouseover event that only works properly...
Javascript
0
How to turn on java script in a villaon keypad mobile phone
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
Java
0
Batch import of multiple excel files into the database
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
Data Management
0
Merging data from multiple Excel files
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
Data Management
0
Migrating Website to Cloud - Emmanuel Katto
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
General
0
BarryA
Navigating the Data Structures and Algorithms (DSA)
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...
Algorithms / Advanced Math
1
Is that possible of reading the .csv file in column wise and the column have different lengths ?
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...
C / C++
0
How to build RAID in BIOS?
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...
Computer Hardware
0
Changing the language in Windows 10
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
Windows Server
0
Oralloy
Problem With Comparison Operator <=> in G++
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,...
C / C++

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.

BYTES.COM © 2024
About Bytes
Terms Of Use
Privacy Policy
Sitemap
Advertise on Bytes:
Post a Job
Sponsored Posts
Platinum & Gold Sponsors
Hire Now!