Image flip/Javascript

dragonsjaw posted this at 23:28 — 24th May 2007.

Joined: Oct 2000

Many years ago I used a couple of different jscripts to do image manipulation.

What I want is:
a large image
with thumbnails below
when moused over the thumbs the large image is replaced by the large thumb image.

I am wondering what new techniques are available for this type of thing?

I want simple, easy to manage, as I will be doing this on several pages
(a real estate type site)

I don't have or know Flash, so that is out.

Any ideas?

Like I said, I have cumbersome javascripts that I do it, but there is a lot of coding I would like to eliminate.

thanks for any input.

"Nothing worth having comes without some kind of fight- 'Got to kick at the darkness 'til it bleeds daylight." - Bruce Cockburn

demonhale posted this at 01:05 — 25th May 2007.

He has: 3,278 posts

Joined: May 2005

I would suggest javascript too, but there is also a css mouse-over event for divs you can use for this too... you can check out javascriptkit.com and dynamicdrive.com for a bunch of scripts and effects you can try...

webwiz posted this at 03:12 — 25th May 2007.

He has: 629 posts

Joined: May 2007

Does this[1] do what you want? It uses CSS only.
Add :focus and (for IE) :active states to the :hover rule to make it work with the keyboard (TAB).

[1]

Lots more like it. Google is your friend.

Cordially, David.

Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;

kb posted this at 06:45 — 25th May 2007.

He has: 1,380 posts

Joined: Feb 2002

Ok, here's what I would do:

Step One:
-Put your 'actual' image (normal size) in a directory like /img/actuals
-Create, or script it out, a thumnail version to reside in /img/thumbs [with the same name and extension as the actual image]

Step Two:
-Create a div containing a placeholder and a link wrapped around it
<div class="img_on_page"><a href="#" class="img_pop"><img src="/img/thumbs/placeholder.jpg" /></a></div>'

Step Three:
-You have two choices:
a) Try and do it mostly using CSS
-or-
b) Do most of it using JavaScript

Step 3 (version a):
-use the a:hover and a:over [IE equivalent] attributes for the link
-in this case your CSS would be something like:

a {
  background-image: url('/img/thumbs/this_pic.jpg');
}
a:hover, a:over {
  background-image: url('/img/actual/this_pic.jpg');
}

'
...the only problem with this is the obvious one: each link would need it's own styling.

Step 3 (version b):
-implement some Javascript:

<div id="blank_one"></div>
<div class="img_on_page"><a href="#" onMouseover="blow_up(1)"><img src="/img/thumbs/the_image.jpg" /></a></div>

'
JavaScript

function blow_up(img_id) {
  document.getElementById('blank_one').style.visibility = 'visible';
  document.getElementById('blank_one').style.display = "block";
  document.getElementById('blank_one').innerHTML = "<img src='/img/actual/the_image.jpg' />";
}

Now, that should get you started. You'll have to use some system to keep track of IDs and which image they're referencing. In this example, I assumed that you will float the "blank_one" div over top of the page (using CSS: z-index: [somelargenumber];), and just have to orient it to where you want.

This is untested, and not even a whole solution, but it's a good generalization. I'm pretty sure this won't cover the large image going back to the thumbnail, so you'd have to write something to reverse the process.

Good luck

dragonsjaw posted this at 15:25 — 25th May 2007.

She has: 120 posts

Joined: Oct 2000

Thanks for all your replys and ideas.
I was hoping for something really quick and easy as this code will be running on several pages.

So far in my many searches this:
http://www.dynamicdrive.com/dynamicindex4/thu
mbnail2.htm

seems to be closest to what I need, the mouse over part.

I will play around with this one and the others I have (both css and js type) and see what ends up being the fastest and easiest.

thanks..

"Nothing worth having comes without some kind of fight- 'Got to kick at the darkness 'til it bleeds daylight." - Bruce Cockburn

decibel.places posted this at 19:33 — 22nd June 2008.

He has: 1,494 posts

Joined: Jun 2008

Dynamic Drive has some great scripts and I use them (modified for specific purposes of course) regularly.

I like especially the image scrollers, flips and carousels (yeh I know Yui has a carousel too, not even sure if they are different at all) I grabbed a few to make a quick demo page for client to choose styles.

yes, I do write from scratch when I have to, but even chefs use prepared stock at times...

Pre-written scripts save you time and if working for someone else, either save them $$ or get you a better time/$$ ratio depending if working by hour or flat rate.

Just make sure they are not bloated, too much script trying to anticipate all possibilities.

kb posted this at 22:14 — 25th May 2007.

He has: 1,380 posts

Joined: Feb 2002

Ok, well what I described IS quick and easy.

Sometimes writing your own is easier to install than someone else's...