PDA

View Full Version : Thumbnail expansion


soundchaseruk
06-28-2011, 04:05 PM
How can i get a thumbnail to expand on the current page as the mouse hovers over it and then drops back as thumbnail when mouse moves on ?

Also I want to make a horizontal slideshow. Can DW or PS do this ?

gentleone
06-28-2011, 04:29 PM
How can i get a thumbnail to expand on the current page as the mouse hovers over it and then drops back as thumbnail when mouse moves on ?
With a bit of jQuery you can - http://www.sohtanaka.com/web-design/fancy-thumbnail-hover-effect-w-jquery/
and with the CSS3 transform property in particular the scale function
http://gazpo.com/2011/02/css3-transforms/

Also I want to make a horizontal slideshow. Can DW or PS do this ?
Perhaps if you ask it nicely to them. Just kidding...I'm not sure if there is a DW extension (I never used them myself) and in Photioshop you can design a nice slideshow, but further then that PS doesn't go.
Google for jQuery slideshow and you'll be bombed with cool, nice and beautiful ready-to-go slideshows.

soundchaseruk
06-28-2011, 06:55 PM
many thanks. Looks like more learning for me. I also found in DW that the behaviour tab can make thumbnail jump out when mouse over, but the resolution was obviously worse. I shall try the horizontal scrolling slideshow. Thank you

gentleone
07-02-2011, 08:42 AM
the resolution was obviously worse.
Just like both methods I gave you require to make your image to the size you want the hover to appear. So if the original image size is for example 150px by 150px, but if you hover it you want it to be 300px by 300px then make the image 300px by 300px. In the HTML you define then an img tag with width and height of 150px by 150px.