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,195 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: 301 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
--
"Old web developers don't die, they degrade gracefully..."
brady.k posted this at 06:45—25th May 2007.
He has: 1,383 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
Kyle Brady, President, Intuitive Industries LLC.
http://www.int-ind.com
[EMAIL=brady.k@gmail.com]brady.k@gmail.com[/EMAIL] - [EMAIL=brady.kyle@int-ind.com]brady.kyle@int-ind.com[/EMAIL]
dragonsjaw posted this at 15:25—25th May 2007.
She has: 113 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.
They have: 208 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.
~are you netsperienced?
[spacer recaps]
Meet me at The IT Contracting Network Coder's Corner
[recaps spacer]
View my profile on LinkedIn
brady.k posted this at 22:14—25th May 2007.
He has: 1,383 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...
Kyle Brady, President, Intuitive Industries LLC.
http://www.int-ind.com
[EMAIL=brady.k@gmail.com]brady.k@gmail.com[/EMAIL] - [EMAIL=brady.kyle@int-ind.com]brady.kyle@int-ind.com[/EMAIL]