Viewers: in countries Watching now:
Take a look at the finished web site here.
Let's click on this item, let's switch to Code only view and in here we want to make one change that Dreamweaver will let us change in the CSS only in Code view not in the WYSIWYG environment. So inside of the a. videoLink img.play after left: 75, let's hit a space, we're going to type opacity: .5;. What this is going to do is take those Play icons that are semitransparent PNG files and make them have the transparency again.
So again this is one of those things in the introduction video that won't work in IE 7 or 8. So if you're concerned about how this looks in IE 7 and 8 then don't make this particular change. Once we've done that let's switch back out to Design view. Inside of Design view under the CSS Styles panel under video_gallery.css, let's scroll down, let's edit the CSS rule that says a.videoLink div.caption. Inside of here we're going to make a few changes. First, let's come over to the Box Properties. Let's change the Width to 165.
For the Padding we're going to set a Top and Right of 20, Bottom of 15, Left of 15, and then let's go to the Position settings and let's take the Bottom value of 0 and set that to null and for the Top value let's set that to 116. What this is going to do is take the caption div that's inside of the anchor link with the videoLink class and move the caption down to 116. Now since those thumbnails are only 115 pixels tall there going to be one pixel outside of the viewable area. Let's click OK.
Let's come up to a.videoLink, let's make one change inside of here. Let's come down to Positioning, let's come over to Overflow and set that value to hidden. So that way those divs holding the captions that are outside of the bounding area of the anchor link with the videoLink class will be hidden or masked from view. Let's click OK. Let's come up to Live view and now inside of the Live view I can see all the icons are semitransparent and the captions while still on the page are actually below the actual thumbnail areas and they're being masked up by the fact that we set the a.videoLink class to an Overflow of hidden.
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.