What exactly is the technique to have an embedded video play on a mouseover/rollover of an image? Examples would be on this page, in which rollover the thumbnail images causes a window to appear playing a piece of video.
I'm a designer who is very rusty and not up to date on web design (I moved over into design in tv/film). However, I used to hand code and still touch html every now and then, though not much javascript or php. If someone could at least point me in the right direction, then I can determine if this is something I can handle or if I need to bring in a web pro.
Hi Naveen. Hover/rollover is probably not the best way to do here. Consider all the touch screens/mobiles etc. that don't really have hovering. A better approach would be to take the user to a new page to view the video if they click the image, and then to enhance this effect with JS such that, instead of being taken to a new page, the video pops up over the page in a modal window. That's very common, and there are lots of free scripts out there for this sort of thing. For example, there's PrettyPhoto.
I do intend to have the user be taken to another page with the video once they click on the image.
However, I very much want to have the video playing in a box during the hover state. I'm helping to build a small stock footage site, and for better or for worse, this is the standard for those kinds of sites. For example, see here: http://www.istockphoto.com/search/li...61895#1309991d
There are other sites, such as www.pond5.com, where you will see the same result. Hovering over the image will produce a small box showing the video. It's actually the best way to preview video when searching through a lot of files, so I very much feel we need it on the site I'm designing.
Any help achieving this result is greatly appreciated! Thanks again!
Reply With Quote
Bookmarks