Images: Thumbs and Rollovers?

Hiya folks! This is my very first post so I hope it's in the correct place and that I've worded it right!

I'm a keen learner in web design. The first site I designed was my own and now I want to revamp it. It's been the same for a couple of years now and I'm bored with it.

What I want to do is this:-
1. Use thumbnail images as links to the big images.
2. Have the enlarged image appear when the cursor is placed over the thumb or the thumb is clicked.

Problem is, I do not want the big image to open up in a new window or page. I don't want the visitor to leave the thumbnail page. The big image can either appear as a rollover image or on the same page.
It sounds simple enough doesn't it but I just don't know how to do it!

I know how to do rollovers when the image sizes are the same or similar, but not when the rollover image is much bigger than the thumb. Can this be done?

I have more to say on this subject which I'll get to later - I hope this is enough info to start with.

I value your response!

note: Please keep it kinda simple!

You can accomplish this many ways. It really depends on what the focus of the project is and how much effort and/or dollars (which I'll assume is exactly $0) you want to put into it.

The first thing you need is a specific visual design of what you want to achieve. Then you can deconstruct it and create your solution.

My preference would be Flash. DHTML would be my second choice.

There are programs that will generate thumbs and larger images, but I'm not sure there's one that would do exactly what you want it to do.

I did this once. Oddly, I haven't logged in as a Tripod member in close to two years, but apparently the page is still there - HUGE surprise. If you check the galleries at the bottom of the page below and view source (you'll have to right click in the popup window and click view source) you'll see the DHTML javascript code that does what I think you're asking about. Just move your mouse over the thumbnails and the big image appears. To make the big images disappear, move your mouse into and out of them. Forgive the Tripod pop-ups. This is probably the most horrendous example of anything I've ever done, but I did it when I was first learning and it was probably at least 5 or 6 years ago, however, I know the script works on almost all browsers. I actually forgot about this page until you posted your question.

Anyway, here's the effect (if you can weed your way through the Tripod pop-ups):
http://members.tripod.com/~bkoz/zoomain.html

Wouldn't having such huge rollovers make the size of the page rather large? I mean the point of thumb nails is so the user doesn't have to wait for all the images to load, they can just click the ones they want.

If you really hate the idea of the user leaving the page, you can use frames I suppose. Thumbs in one frame, to the left, and when you click each thumb it loads the new image within the next frame. Would that be ok, or are you really set on rollovers?

((Heh I clicked your page ATNO and It STILL loading. I'm about to leave class, I don't think i'll be seeing your first gallery.))

SG has a point. You have two choices: preload the rollovers, or load on demand. Preloading will significantly fatten your page. Load on demand will introduce enough lag time to confuse users. Users are happy with choosing from thumbnails and loading secondary pages...

I know...preloading large images like that definitely has it's downsides. Especially for modem users. I remember specifically that's why I put in the pop-up windows and only used one or two images, because at the time I was on 33.6K dialup and it used to tick me off how long it would take the images to load. It's still a good script none-the-less. On broadband, those images slam open and are instantly accessable, but I pity those still on dialup. Like I said, it's probably the most horrendous example I've ever done, but it works for the solution to the question in general

Has anybody else noticed that IE seems a little unreliable when it comes to preloading images? I've tried any number of preloading functions and it always works fine in Mozilla and Opera, but IE seems to fail to do it properly half the time.

Anyway, here's an example that uses rollovers and preloading. I used Dreamweaver's built-in preload function to save time, but it doesn't seem to work any better than the others I've tried. It opens instantly for me, but I'm on a high speed connection. If you have a dial-up, you'll see the delay, and of course the rollovers won't work at all if javascript is disabled. I'd either go with frames or just link the thumbs to the fullsize images as already mentioned.

[link removed - page no longer exists]

RichB: I have a great deal of experience with the code generated by Adobe ImageReady (ships with Photoshop). I haven't received a single complaint or noticed any problems in a few hundred thousand hits. Some of the images are a composite of twenty or more images with onMouseOver and onMouseClick events... if anything would have cracked, it would have been those examples.

I can send you the code if you like... but, not the web page. Its an embarrasement! LOL

Rich B...'nuther nice example there. In answer to your question, I've never had issues with IE preloads. Your example worked fine for me, as I'm on broadband as well.

Here's what I've been using for those with dialup for preloads:



Just adjust the file names for the images and make sure this line:


equals the total number of images. (I assume there will be some delay for modem users, but at least the page displays in full regardless)

(*add or remove images as needed but adjust the count value accordingly)

It must just be something with my copy of IE because I've tried many different preloading scripts including ones identical to that and always had the same issue. Even on broadband I get a brief hourglass when mouseover any rollover script that uses preloading - regardless of whether I created it, or found it on the web. Even sites like time.com that use tiny images give me an hourglass even with a 3 Mbps downstream connection.

Anyway, thanks for letting me know - I'd always wondered if it was a local thing or not, because I never really noticed it using other connections. I'd always assumed that was because the other connections at school/work were very high speed, but now that I have cable here I think it must be some sort of local issue because I still get the hourglass and status bar indication of downloading even with the high speed connection.

I've switched to Mozilla anyway, so it's not much of an problem for me unless other people were seeing the same thing.

Script in action:
http://housesunlimitedinc.com/ (works fine in IE with broadband -- no clue how it goes with dialup)

It's hard for me to tell anymore, since I haven't had dialup for a couple years. I haven't even had a land-line phone since I got cell. I nixed landline shortly after getting cable.

Yep, flickering hourglass and status bar downloading messages for me when I view it with IE, perfect in Mozilla and Opera. Same thing as always.

I'm about to ditch this old OS and do a full install of WinXP Pro soon. This thing has been patched so many times I think it's held together with duct tape at this point

OK...gotcha. Must be a local problem. I did get that in times past, but no longer, so I do know what you're talking about.
Luck!

What can I say? You guys are amazing. I've spent ages trying to find a way of doing this and I think you've sussed it literally overnight! The page examples are almost spot on, especially the zoo one.
I have hundreds of images I want to display and I've already made many tiny thumbs in preparation.
I'm going to try these ideas until I find one that works for me (or that is simple enough for me to do i should say )
A while ago I was introduced to an example which I liked but I can't get it to work! It's a bit too complicated for moi. When I pasted the code into FP it changed completely! It's at:
http://www.huntingground.freeserve.co.u ... 3_v3.htm&2

Also, some useful info:
So far I've been using Front Page 2000 as my editor. I know many folks say it's a bit restricting compared to the likes of Dreamweaver but I'm kinda used to it. I hope to upgrade to 2002 soon.
I also have Broadband which I couldn't live without now.

Thanks again good peeps!

If you're doing hundreds of images, you pbly need to look into dynamically populating the system for browsing the images. IMO