Jump to content

Image Effect


son
 Share

Recommended Posts

There's no specific name for that. It's just a dynamic idea they came up with.They have a box with a larger version of the image inside. The overflow property is set to hidden. They use Javascript to detect the position of the mouse over the first image, and use scrollTo() to scroll to the right position based on where the mouse is on the first image.

Link to comment
Share on other sites

There's no specific name for that. It's just a dynamic idea they came up with.They have a box with a larger version of the image inside. The overflow property is set to hidden. They use Javascript to detect the position of the mouse over the first image, and use scrollTo() to scroll to the right position based on where the mouse is on the first image.
What do you mean by inside? The larger cutout appears to right of image you hover over. Bit lost...Son
Link to comment
Share on other sites

What do you mean by inside? The larger cutout appears to right of image you hover over. Bit lost...Son
Click "View Source", or open up the page with Firefox after disabling CSS and JavaScript, and you'll see that the large image appears right below the small one.With CSS, they hide the big image. With JavaScript, they isolate the image in a separate, newly creted box, and then unhide the image, scrolling to a certain part of it.Such utilities are reffered to as "zoomers", becaus they "zoom" on an image. A recent article at sitepoint showcased a few such plug-ins for jQuery. If you use jQuery anyway, those would be fine editions. The one I like in particular (accessibility wise) is jqZoom.
Link to comment
Share on other sites

Click "View Source", or open up the page with Firefox after disabling CSS and JavaScript, and you'll see that the large image appears right below the small one.With CSS, they hide the big image. With JavaScript, they isolate the image in a separate, newly creted box, and then unhide the image, scrolling to a certain part of it.Such utilities are reffered to as "zoomers", becaus they "zoom" on an image. A recent article at sitepoint showcased a few such plug-ins for jQuery. If you use jQuery anyway, those would be fine editions. The one I like in particular (accessibility wise) is jqZoom.
How do you disable CSS in Firefox? I know it only for JavaScript...Son
Link to comment
Share on other sites

How do you disable CSS in Firefox? I know it only for JavaScript...Son
If you have the "Web Developer" extension, it's in "CSS > Disable Styles > All Styles". Otherwise, use "View"... errr... I'm not sure of the English name (my Firefox is in Bulgarian)... look two menus above "View Source". There should be "None" and "Standard". Click "None".
Link to comment
Share on other sites

"Page Style"
Page Style did the trick:-) Will try to find lots of info on zoomers next, as I am not using jQuery. Just would like to have it on my custom-build website and learn how to do it...Son
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...