Image Crawler Script v1.5 and stationary image together?

**mlegg** · 09-14-2012, 06:02 PM

1) Script Title: Image Crawler Script v1.5

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...wler/index.htm

3) Describe problem: I want to be able to use the Image Crawler along with a stationary image for a website banner. My test page is here:
http://nationalkitchencabinets.com/bannerslide.html

When you see the bannerslide.html page above, you will see the my logo image is on the top left, where I want it to be and the image slider is below. I want that to be to the right of my logo image. Is this possible?

**jscheuer1** · 09-15-2012, 02:04 AM

Get rid of this, you're not using it:

Code:

<script type="text/javascript">
marqueeInit({
	uniqueid: 'mycrawler',
	style: {
		'padding': '0px',
		'width': '521px',
		'background': '#FFFFE0',
		
	},
	inc: 8, //speed - pixel increment for each iteration of this marquee's movement
	mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
	moveatleast: 4,
	neutral: 150,
	savedirection: true
});
</script>

Modify the remaining HTML and script code as shown (additions/changes highlighted):

Code:

<body>
<div style="overflow: hidden; width: 960px;">
<img src="images/KSLogo2.jpg" style="display: block; float: left;">
<div class="marquee" id="mycrawler2">
<img src="images/B1LBanner.jpg" /> 
<img src="images/B2Banner.jpg" /> 
<img src="images/D1Banner.jpg" /> 
<img src="images/D2Banner.jpg" />
</div>                                

<script type="text/javascript">
marqueeInit({
	uniqueid: 'mycrawler2',
	style: {
		'padding': '0px',
		'width': '519px',
		'height': '198px'
	},
	inc: 5, //speed - pixel increment for each iteration of this marquee's movement
	mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
	moveatleast: 2,
	neutral: 150,
	savedirection: true,
	random: true
});
</script>
</div>

The two inline styles for the div and the img tags may go in a stylesheet if you create selectors (id or class) for those elements.

In the head of the page put a style section:

Code:

<style type="text/css">
.marquee0 {
	width: 519px;
	float: left;
}
</style>

Or add it's rules to an existing stylesheet for the page.

The browser cache may need to be cleared and/or the page refreshed to see changes.

**mlegg** · 09-15-2012, 03:59 PM

Thanks, Can I take this a step further now and use a transparent .gif background 960px wide with the wording for the company and behind it have 960px width images scroll?
here would be the transparent logo words

then I would add some wide kitchen images to scroll under that. Is that possible?

**jscheuer1** · 09-15-2012, 06:26 PM

With the same proviso on where these and the inline styles for the img and div tags can go as before, replace:

Code:

<style type="text/css">
.marquee0 {
	width: 519px;
	float: left;
}
</style>

with:

Code:

<style type="text/css">
.marquee0 {
	width: 100%;
	float: left;
}
</style>

And replace:

Code:

<div style="overflow: hidden; width: 960px;">
<img src="images/KSLogo2.jpg" style="display: block; float: left;">
<div class="marquee" id="mycrawler2">
<img src="images/B1LBanner.jpg" /> 
<img src="images/B2Banner.jpg" /> 
<img src="images/D1Banner.jpg" /> 
<img src="images/D2Banner.jpg" />
</div>                                

<script type="text/javascript">
marqueeInit({
	uniqueid: 'mycrawler2',
	style: {
		'padding': '0px',
		'width': '519px',
		'height': '198px'
	},
	inc: 5, //speed - pixel increment for each iteration of this marquee's movement
	mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
	moveatleast: 2,
	neutral: 150,
	savedirection: true,
	random: true
});
</script>
</div>

with (Note: the img tag has been moved, its src and style changed, events added, the div tag's styles are different, the init has had its width removed):

Code:

<div style="position: relative; width: 960px; overflow: hidden;">
<div class="marquee" id="mycrawler2">
<img src="images/B1LBanner.jpg" /> 
<img src="images/B2Banner.jpg" /> 
<img src="images/D1Banner.jpg" /> 
<img src="images/D2Banner.jpg" />
</div>                                

<script type="text/javascript">
marqueeInit({
	uniqueid: 'mycrawler2',
	style: {
		'padding': '0px',
		'height': '198px'
	},
	inc: 5, //speed - pixel increment for each iteration of this marquee's movement
	mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
	moveatleast: 2,
	neutral: 150,
	savedirection: true,
	random: true
});
</script>
<img src="http://i45.tinypic.com/2hxlkpx.gif" style="display: block; position: absolute; top: 0 left: 0;" 
onmousemove="this.parentNode.getElementsByTagName('div')[1].onmousemove(event);" 
onmouseout="this.parentNode.getElementsByTagName('div')[1].onmouseout(event);" alt="">
</div>

The browser cache may need to be cleared and/or the page refreshed to see changes.

**djr33** · 09-15-2012, 07:55 PM

Well, I'll just add that I'd be cautious about using such a huge image on a webpage. There's no technical reason why you can't do that-- it just slows things down and so forth.
I'm not sure what the height is, though. If it's only 200px high, then I guess 960x200 isn't too bad. But the image you showed looks roughly square, so that would be very large (maybe 960x650?).
Often, it's best to use text rather than images, but it's up to you.

**mlegg** · 09-15-2012, 08:27 PM

http://nationalkitchencabinets.com/bannerslide.html is the test page now, the banner image is 960 x 198. I like this a lot.

**jscheuer1** · 09-15-2012, 08:32 PM

Good point. But it's not the dimensions of the image, it's the byte size. Converted to a non-alpha channel .png and optimized, it can come in at 18.3K - not so bad:

You could perhaps get further savings, not by making it less tall, it pretty much needs the full height - rather by making it more narrow and centering it.

Edit: I just tried that, and apparently all of those empty transparent pixels require little or no extra bytes, so the image in this post is about the best you're going to get byte wise. It's easier to work with in the layout anyway.

**djr33** · 09-15-2012, 08:47 PM

Oh, I didn't realize that was the image, with a border on the sides. I thought that was a small scale version. Sure, that one should be fine.

**jscheuer1** · 09-15-2012, 09:30 PM

Originally Posted by mlegg

http://nationalkitchencabinets.com/bannerslide.html is the test page now, the banner image is 960 x 198. I like this a lot.

Yes it does look nice. I see you changed the image's color. Here's a version of it at 18.1 K:

Yours is about 30 K. Not too bad either way, but 18.1 is a lot better for slower connections. Don't worry about older browsers. It's a non-alpha .png so will not challenge IE 6 and less.