Images: Thumbs and Rollovers?

  • the_atom
  • Beginner
  • Beginner
  • User avatar
  • Posts: 64
  • Loc: Scotland

Post 3+ Months Ago

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!
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

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.
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

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
  • She God
  • Student
  • Student
  • User avatar
  • Posts: 72
  • Loc: California (Land Of The Cackling Sun)

Post 3+ Months Ago

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.))
  • rjmthezonenet
  • Expert
  • Expert
  • User avatar
  • Posts: 526
  • Loc: St. John's, Newfoundland, Canada

Post 3+ Months Ago

She God wrote:
Wouldn't having such huge rollovers make the size of the page rather large?


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...
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

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
  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

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]
  • rjmthezonenet
  • Expert
  • Expert
  • User avatar
  • Posts: 526
  • Loc: St. John's, Newfoundland, Canada

Post 3+ Months Ago

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
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

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:

Code: [ Select ]
<script language="JavaScript1.2" type="text/javascript">
<!--Hide from older browsers
//begin preload script
   var count = 0;

   function preLoad() {
   one = new Image();
   one.onload = loadCheck;
   one.src = "image1.jpg";


   two = new Image();
   two.onload = loadCheck;
   two.src = "image2.jpg";

   three = new Image();
   three.onload = loadCheck;
   three.src = "image3.jpg";
 
   four = new Image();
   four.onload = loadCheck;
   four.src = "image4.jpg";
 
   five = new Image();
   five.onload = loadCheck;
   five.src = "image5.jpg";
 
   six = new Image();
   six.onload = loadCheck;
   six.src = "image6.jpg";
 
   seven = new Image();
   seven.onload = loadCheck;
   seven.src = "image7.jpg";
 
   eight = new Image();
   eight.onload = loadCheck;
   eight.src = "image8.jpg";

   }
   function loadCheck() {
   count++;
   if(count == 8){
   preLoad();
   }
   }
//end hiding from older browsers -->
</script>
</head>
<body onload="preLoad()">
  1. <script language="JavaScript1.2" type="text/javascript">
  2. <!--Hide from older browsers
  3. //begin preload script
  4.    var count = 0;
  5.    function preLoad() {
  6.    one = new Image();
  7.    one.onload = loadCheck;
  8.    one.src = "image1.jpg";
  9.    two = new Image();
  10.    two.onload = loadCheck;
  11.    two.src = "image2.jpg";
  12.    three = new Image();
  13.    three.onload = loadCheck;
  14.    three.src = "image3.jpg";
  15.  
  16.    four = new Image();
  17.    four.onload = loadCheck;
  18.    four.src = "image4.jpg";
  19.  
  20.    five = new Image();
  21.    five.onload = loadCheck;
  22.    five.src = "image5.jpg";
  23.  
  24.    six = new Image();
  25.    six.onload = loadCheck;
  26.    six.src = "image6.jpg";
  27.  
  28.    seven = new Image();
  29.    seven.onload = loadCheck;
  30.    seven.src = "image7.jpg";
  31.  
  32.    eight = new Image();
  33.    eight.onload = loadCheck;
  34.    eight.src = "image8.jpg";
  35.    }
  36.    function loadCheck() {
  37.    count++;
  38.    if(count == 8){
  39.    preLoad();
  40.    }
  41.    }
  42. //end hiding from older browsers -->
  43. </script>
  44. </head>
  45. <body onload="preLoad()">


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

Code: [ Select ]
if(count == 8){

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)
  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

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.
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

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.
  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

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
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

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!
  • the_atom
  • Beginner
  • Beginner
  • User avatar
  • Posts: 64
  • Loc: Scotland

Post 3+ Months Ago

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 :oops: )
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!
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

If you're doing hundreds of images, you pbly need to look into dynamically populating the system for browsing the images. IMO
  • Axe
  • Genius
  • Genius
  • User avatar
  • Posts: 5739
  • Loc: Sub-level 28

Post 3+ Months Ago

Yeah, not too many people are gonna be too happy with you after going to a page that takes a week to load, especially if they're only going to end up looking at a handful of the "hundreds" of images that the page forces you to download, heh.

What is wrong with having a popup? or having a frameset with the thumbnails scrolling in one frame, and the full size image preview (on click, not mouseover) in the other?
  • the_atom
  • Beginner
  • Beginner
  • User avatar
  • Posts: 64
  • Loc: Scotland

Post 3+ Months Ago

Na!!!
Think I'll stick with the devil I know and do it one by one. I know it may seem like a loada work but I'll manage. Patience is one virtue I do have!
  • rjmthezonenet
  • Expert
  • Expert
  • User avatar
  • Posts: 526
  • Loc: St. John's, Newfoundland, Canada

Post 3+ Months Ago

the_atom wrote:
Think I'll stick with the devil I know and do it one by one. I know it may seem like a loada work but I'll manage.


You could use a little script. We have a thumbnail script discussion just last week. Search around in the scripting forum.
  • the_atom
  • Beginner
  • Beginner
  • User avatar
  • Posts: 64
  • Loc: Scotland

Post 3+ Months Ago

Problem sorted!
Thanks for all your help!
Thread now closed.
  • Axe
  • Genius
  • Genius
  • User avatar
  • Posts: 5739
  • Loc: Sub-level 28

Post 3+ Months Ago

and it only took 21 months, congrats! ;)
  • the_atom
  • Beginner
  • Beginner
  • User avatar
  • Posts: 64
  • Loc: Scotland

Post 3+ Months Ago

CHEEKY!! :lol:

Truth is - I'm in a sorting mood and thought I'd go through all my forum stuff and tie up any odds and ends!
There are so many folks who don't finish a thread - me incuded obviously!
Least I've done my bit!

(All that and my site's STILL not complete! Too busy doing stuff for others!
That's my excuse!:roll: )
  • the_atom
  • Beginner
  • Beginner
  • User avatar
  • Posts: 64
  • Loc: Scotland

Post 3+ Months Ago

http://www.photosapien.com/
Just checked out above - you genius you!
Well impressed with some of the photography - AND the site!
You are a busy guy! Good on ya!

Post Information

  • Total Posts in this topic: 22 posts
  • Users browsing this forum: No registered users and 47 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.