Text and Image Crawler modifs

**antonysmith** · 05-03-2010, 08:21 PM

I am using the "Text and Image Crawler" located here:
http://www.dynamicdrive.com/dynamici...wler/index.htm

With the "Cool DHTML Tooltip" located here:
http://www.dynamicdrive.com/dynamici...tmltooltip.htm

It work perfectly, onload it scroll from right to left and when I mouse over an image, it stop and the tooltip appear, when I mouse out, it scroll again from right to left and everything is perfect.

Now my goal is to add 2 buttons, 1 to the left and 1 to the right and when I mouse over the left one this will speed up (inc: 2), when I mouse out this will speed down to the default (inc: 1). And same thing for the right button.

Code:

marqueeInit({
    uniqueid: 'mycrawler',
    style: {
        'padding': '0px',
        'width': '990px',
        'height': '32px'
    },
    inc: 1, 
    mouse: 'pause', 
    direction: 'left'
});

Thanks in advance and hope you understand what I want to do.

**jscheuer1** · 05-04-2010, 12:58 PM

All crawlers on a page have access to them stored in the marqueeInit.ar array. This means they can be accessed via:

Code:

marqueeInit.ar[#]

Where # is the 0 based integer representing which crawler it is in the order they appear on the page. If you have only one, this is zero. So you can make up an image:

Code:

<img src="faster.gif" alt="" onmouseover="marqueeInit.ar[0].inc = 2;" onmouseout="marqueeInit.ar[0].inc = 1;">

Now you can have as many of these "buttons" as you want. To get one on the left and one on the right is just a matter of layout. I'd suggest something like (this is for button images that are about 40 x 15):

Code:

<div style="width:1090px;margin:0 auto;">
<div style="float:right;margin-top:9px;width:50px;text-align:right;">
<img src="faster.gif" alt="" onmouseover="marqueeInit.ar[0].inc = 2;" onmouseout="marqueeInit.ar[0].inc = 1;">
</div>
<div style="float:left;margin-top:9px;width:50px;">
<img src="faster.gif" alt="" onmouseover="marqueeInit.ar[0].inc = 2;" onmouseout="marqueeInit.ar[0].inc = 1;">
</div>
<div class="marquee" id="mycrawler">
<img src="../vfs/images/image_01_tbn.jpg" alt="">
<img src="../vfs/images/image_02_tbn.jpg" alt="">
<img src="../vfs/images/image_03_tbn.jpg" alt="">
<img src="../vfs/images/image_04_tbn.jpg" alt="">
<img src="../vfs/images/image_05_tbn.jpg" alt="">
<img src="../vfs/images/image_06_tbn.jpg" alt="">
<img src="../vfs/images/image_07_tbn.jpg" alt="">
<img src="../vfs/images/image_08_tbn.jpg" alt="">
<img src="../vfs/images/image_09_tbn.jpg" alt="">
<img src="../vfs/images/image_10_tbn.jpg" alt="">
</div>
<script type="text/javascript">
marqueeInit({
    uniqueid: 'mycrawler',
    style: {
        'padding': '0px',
        'width': '990px',
        'height': '32px',
	'margin': '0 auto'
    },
    inc: 1, 
    mouse: 'pause', 
    direction: 'left'
});
</script>
<div style="clear:both;"></div>

Notice I added a style (highlighted) to your init. For IE, this requires a valid URL DOCTYPE.