Javascript effect?

**salewit** · 11-24-2003, 08:49 PM

I know this probably isn't the best place to ask this, but I'm looking for a particular effect that I simply can not find. I'm pretty sure its done with Javascript, but not certain. I've searched numerous sites including Hotscripts, but can't find it.

Is anyone familiar with it?

Here are a couple of examples:

http://reviews.cnet.com/Canon_PowerS...l?tag=topprods

On this page, rolling over the thumbnails (of the camera views) changes the larger image. I don't necessarily need a rollover to do this... clicking on the thumbnail would work too.

http://cgi.ebay.com/ws/eBayISAPI.dll... ategory=4090

This is pretty much exactly what I'm looking for. All the main images should be pre-loaded.

Thanks
Sam

**jason** · 11-24-2003, 09:40 PM

Yes, this is JavaScript, and its pretty easy to do. First, to preload the images, add code to a script block in the <head> of your page that looks something like this:

Code:

if(document.images) {
    imgA = new Image();
    imgA.src = "images/imagea.jpg";

    imgB = new Image();
    imgB.src = "images/imageb.jpg";
}

Add lines for each of the images you want to include. Make sure each has a unique name (imgC, imgD, etc.).

Next, give the large image that you want to change a unique ID as well. Also, specify the image that you wnat to appear when the page first loads for this image's src:

<img src="images/imgA.jpg" alt="Changing Images" id="imgMAIN">

In the code block that you created above, add this function after the closing } for the list of image preloaders:

Code:

function changeImg(img) {
    if(document.images) {
        imgMAIN.src = img.src;
    }
}

If you didn't use imgMAIN as the id in the img tag above, be sure to change the imgMAIN.src to WhateverYouUsed.src in the code above.

Now, add the smaller image "buttons" as you would any images on a regular page. Add a link to each of them that looks like this:

<a href="javascript:void('');" onmouseover="changeImg(imgA);">

(This will make the rollover effect from CNet. If you wnat the click view from EBay, change onmouseover to onmouseup.) Also be sure to change the imgA to whatever you used for the image you want to display in the preloader section.

I'm quite tired right now, so I don't know how much sense I am making, but should be about all there is to it. If any of this doesn't make sense (or doesn't work), let me know and I'll look at it when I ma more awake (and sober)

.

--Jason

**salewit** · 11-24-2003, 09:57 PM

Thanks a lot Jason! I didn't realize it was an easy thing to do.

I think everything you wrote made sense. I'll work on it tonight. I also have a Javascript book for reference, but it looks fairly straightforwward even though I know zero JS.

Thanks again.
Sam

**jason** · 11-25-2003, 06:31 AM

Yes, it is pretty easy. Its just a rollover, except that the image that's changing is not the one that the mouse is over. Other than that, its all the same.

One mistake that I found in what I posted last night: the link that I gave you for the button images should be

<a href="javascript:void('');" onmouseover="changeImg(imgA);">

(I had a space between java and script in my original example.)

If you run into any problems, I should be on the boards a couple times tonight. I can't guarantee anything for the rest of the week because I'll be visiting family, but I figure I'll be stopping in at least once a day. If I'm not around, though, I'm sure others will be willing to help you out.

I was just looking at your site. It looks like a beautiful place. I like to hike and camp and all that stuff, and Lake Minnewaska is only about 4 hours from me. I'll have to keep it in mind for a long weekend trip or something.

--Jason

[EDIT]
The board seems to add the space between java and script itself (it happened again in this post). I guess its a security measure to keep posters from inserting mailiious JS code in their posts. Anyway, just make sure you don't include the space when you make your pages.

**gerilya** · 11-25-2003, 07:37 AM

Javascript

**jason** · 11-25-2003, 07:43 AM

Originally posted by gerilya
Javascript

Well, that's one (nerdy) way to do it...

(Click on the 'Quote' button on Gerilya's post to see the trick)

--Jason

**gerilya** · 11-25-2003, 11:45 AM

By the way, I consider it a bug because smart processor would actually disallow only something like <script language=Javascrip t . There are many ways to distinguish between malicious HTML and "innocent" text, but I guess these guys are not deep into regular expressions

**salewit** · 11-25-2003, 08:58 PM

Originally posted by jason
I was just looking at your site. It looks like a beautiful place. I like to hike and camp and all that stuff, and Lake Minnewaska is only about 4 hours from me. I'll have to keep it in mind for a long weekend trip or something.

Thanks again for the help. I've got the whole family thing going on too so I doubt I'll be dealing with it in the next few days. But I will definitely get into it later.

Yeah the lake was (is) a beautiful place. I used to live in that hotel, and living there (and yes working too) was spectacular beyond belief. Living there was somewhat like "The Shinging" in the winter without the nastiness. But its all gone now. Most in the area are happy to see it owned by the State of NY. I miss the buildings, horses, and all that other stuff.

Sam

LinkBack

Thread Tools

Display

Javascript effect?

Bookmarks

Bookmarks

Posting Permissions