Start learning with our library of video tutorials taught by experts. Get started
Take a look at the finished web site here.
Hi! This is Chris Converse and this is a course on creating some animated rollovers for your web site using jQuery. So I want to start by opening up the Final Project inside of the exercise files and take a look at what we're going to be creating throughout the course. In the first option we're going to be using jQuery to simply change elements that are already on the screen, and we're actually going to use content from a previous course called, Creating an Interactive Video Gallery as content for the course. Of course, you can use these same techniques in any web site targeting any HTML elements. Now in the video course we had captions that were over top of these thumbnails.
In this course, we're going to take those captions and move them off the stage, so that we can't see them over top of the individual thumbnails and when I roll my cursor inside of the thumbnails we're going to animate those captions up. We're also going to take the Play icons set their transparency to about 50%, and then we're going to bring the Opacity of those up as well. In addition, if captains have different heights we're actually going to move the Play icon so that it overlaps the caption box by the same amount each time. So when I rollover the next thumbnail which is a three line caption you'll notice the icon will move up as well.
If I roll into a caption that's only got one line of copy the icon will move down again to make the relationship of the Play icon and the caption the same. Now in the second option we're going to change the background picture of the thumbnail as well. So let me open up option_ 2 inside of our browser. Now the first thing you'll notice in the lower left is we have a timer that's constantly counting and if I roll my cursor inside of the thumbnails we'll see that the background graphic of the thumbnail is changing in addition to the animation of the play icon and the animation of the caption.
Now as I roll into each one of these we'll be switching the background graphics using CSS changes from jQuery and this will give us a little bit of a more dynamic feel for the individual keyframes for the video. Now since we're standardizing on jQuery here we do get the same user experience across different platforms. If we move over here into Windows 7 running IE 9, I'm going to take option_2 and just drag that into a browser and take a look at the same user experience running on Windows and IE 9.
The next we'll move over to Windows XP. Now over in XP we're going to get the same user experience inside of IE 7 and 8 as well. However, there is one thing that we can't support inside of 7 and 8 and that is setting transparency on an already semitransparent PNG file. So one thing you'll notice when I roll into each one of these icons is once the icon has some transparency applied to it through CSS and through jQuery we'll get this black halo that shows around the outside of the PNG file. When I roll away the PNG file will pick up its semi-transparency, but we won't be able to get rid of that black halo.
There are currently no FAQs about Create Animated Rollovers with jQuery and Dreamweaver.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.