PDA

View Full Version : 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/dynamicindex2/crawler/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:


<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):


<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:


<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
http://i45.tinypic.com/2hxlkpx.gif

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:


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

with:


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

And replace:


<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):


<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:

http://home.comcast.net/~jscheuer1/side/images/2hxlkpx-o_o.png

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.

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
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:

http://home.comcast.net/~jscheuer1/side/images/logo-words-o_o.png

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.

mlegg
09-15-2012, 10:09 PM
thanks, I didn't think of seeing if a .png would be smaller. I uploaded it now and it all looks good.

jscheuer1
09-16-2012, 02:48 AM
Well, yes. The .png and .gif formats are each rich and capable of a number of things, mostly different from each other. There's one area of near overlap - the ability to render a lossless image within the confines of a 256 color palette. I say near overlap because they each do it a bit differently. If such an image is large and/or relatively complex like this one, .png is usually the better format for achieving the smallest possible file size. However, the largest amount of file size savings here was achieved by reducing the number of colors in the palette and optimizing that palette for best representation of the original image. As far as I know, only a specialized program can do that easily. Even without that though, .png is still slightly smaller bite wise with this sort of image if you strip out everything that's not required like comments, gamma, etc.

djr33
09-16-2012, 02:53 AM
If you want a very small filesize, you can use JPG, but as a lossy format the smaller filesizes will result in a visibly lower quality image. 18kb isn't too bad for that, so using the PNG and retaining full quality is probably a good idea. PNGs don't usually result in such small files, but that's because there isn't a lot of detail in the image (most of it is white space, which can be stored easily as an area rather than as individual pixels).

Out of curiosity I tried to reduce the size more, and you can get it to around 18kb as a JPG, but it's not quite as crisp as the PNG, so there's no real point in switching formats. At a minimal quality level, it can get down to around 9kb but it's visibly blurry/choppy, so I wouldn't recommend that.

jscheuer1
09-16-2012, 03:01 AM
JPEG won't work here anyway. The image must have transparency.

djr33
09-16-2012, 03:48 AM
I missed that. When you said "non-alpha channel", you meant there's a single-color transparency (as in a gif). I see. I thought you had removed transparency/didn't need it.

mlegg
09-16-2012, 07:07 PM
John do I change this line to make the images move faster?

inc: 5, //speed - pixel increment for each iteration of this marquee's movement
and if so, do I go with a higher number or lower? :confused:

jscheuer1
09-16-2012, 09:49 PM
With a 'cursor driven' crawler the inc property specifies the top speed which is achieved when the cursor is over the left or right edge of the crawler. It also proportionally governs the speed of the crawler at all other times when the cursor is over it and it's moving. As the cursor approaches the center, the movement slows. Once the cursor enters the neutral zone whose width is specified by the neutral property and is centered over the crawler, all movement stops. Increasing the inc property will make the speed of the crawler higher when the mouse is over the crawler and not in the neutral zone.

For 'cursor driven' crawlers I usually use an inc property of 10 or 20.

When the cursor is off of the crawler the speed is governed by the moveatleast property. Increasing it will make the crawler move faster when the mouse is off of it. This property only applies to 'cursor driven' crawlers and I usually set it to 1 or 2.

As a side note. If your crawler isn't 'cursor driven', the inc property governs its speed at all times it's moving with no variability.

mlegg
09-17-2012, 01:54 AM
any thoughts on whether an arched text banner or plain straight lines?
http://nationalkitchencabinets.com/bannerslide4.html has arched text, like some cabinets
http://nationalkitchencabinets.com/bannerslide3.html has straight lines

jscheuer1
09-17-2012, 06:01 AM
I prefer:

http://nationalkitchencabinets.com/bannerslide.html

for two reasons:

I like the white on brown anti-aliasing as opposed to brown on white anti-aliasing.


I like the smaller byte size of the image.

I'm not sure about the physical size (width in these cases) of the image. I can tell you that if the browser window is narrower than the page, it makes a better initial impression with a narrower image.

On the straight vs. arched front, with the wide images straight looks a little better to me because it's easier to take in visually (more legible). On the narrower image I don't think it would make so much of a difference. But since I don't see a narrow straight example I can't be sure. That said, with narrow I think the arched would be better because it gives it more visual distinctiveness. At that width arched doesn't seem detract so much from legibility.