Dynamic Drive has some great

netsperience — Sun, 22 Jun 2008 19:33:05 +0000

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.

brady.k — Fri, 25 May 2007 22:14:02 +0000

Ok, well what I described IS quick and easy.

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

dragonsjaw — Fri, 25 May 2007 15:25:33 +0000

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

brady.k — Fri, 25 May 2007 06:45:26 +0000

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

Image flip/ no JavaScript needed

webwiz — Fri, 25 May 2007 03:12:16 +0000

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.

demonhale — Fri, 25 May 2007 01:05:11 +0000

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