how to loop mouseover event

Forum Moderators: open

Message Too Old, No Replies

how to loop mouseover event

Tym99

5:37 pm on Sep 9, 2005 (gmt 0)

I'm trying to make a box that scroll horizontally when you hover over the arrows. However with the current code I have it only calls the function once. What I need is for it to loop the function as long as the mouseover event is true.

The dic is set to hide the overflow and the nested span is what I want I'm moving left and right. It's inside a table just for alignment purposes.

Additionally, my code doesn't work in IE and I'm not sure why.


 <script>
 count = 0;
 function moveIconBar(moveAmt) {
  moveIt = document.getElementById("iconBar");
  moveIt.style.marginLeft = count + "px";
  count = count + moveAmt;
 }
</script><body>
 <table border=0 cellpadding="0" cellspacing="0">
 <tr> 
  <td> <img onclick="moveIconBar(-5);" src="./images/leftArrowOff.gif"> </td>
  <td> 
<div style="width:155px;height:25px;overflow:hidden;"> <span id="iconBar"> 
  <!-- Icons appear here -->
   </span> 
</div></td>
  <td> <img onmouseover="moveIconBar(5);" src="./images/rightArrowOff.gif"> </td>
 </tr>
 </table>
</body>

Bernard Marx

9:06 pm on Sep 9, 2005 (gmt 0)

Check out the browser timer functions,

setTimeout

and

setInterval

(ep. the latter).

Stop the timer when the mouse leaves:

onmouseout

See how you get on.

Timers:
[howtocreate.co.uk...]

Animation:
[webreference.com...]

Tym99

4:31 am on Sep 10, 2005 (gmt 0)

Perfect! Thanks a lot. setInterval did the trick nicely. And I found the IE problem... left out the damn TYPE attribute.

One other question. Let's say I want to stop the span from scrolling one direction or the other once the end of the span is visible. Is that possible without knowing the exact width of the span? The reason I ask is that eventually the images displayed in the span will be determined by information in a database so more images may be added at some point in time and I don't want the code to be flexible in that regard. If that made any sense.