Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
So we are basically going to be overriding some of these values here if the autoplay class exists. So what we're going to set in here is opacity, so type opacity: .4 for 40% and then a semicolon. Now Internet Explorer doesn't support the opacity tag, so we're going to come down here. We're going to use the filter attribute. So type filter: alpha, beginning and ending parenthesis, semicolon and then inside we're going to type opacity=40.
There is a slightly newer variation of the opacity setting for IE 8 and 9, but I do want to target IE 7 since we do have transparency and PNG support in IE 7, so we're going to use the filter attribute. Filter also works in IE 6; however, lot of the other transparency we're using in this course are not supported an IE 6, so we're targeting IE 7 and higher with this marquee. Now with this in place, let's grab this entire rule. Command+C or Ctrl+C to Copy, Command+V or Ctrl+V to Paste, and what we're going to do is come down here and change the rule to the .selected on the anchor tag.
We're going to change the .4 to 1 and we're going to change the 40 to 100 for IE. So basically what's happening here is if the navigation is in its selected state, since we overrode all of those items as 40% we need to set this one back to 100. This will give us our semitransparent navigation with the selected item being 100% as we looked at in the introduction video. With this change, let's choose File > Save.
Let's come over to our HTML file. Let's look in Code view, and in Dreamweaver we can't assign multiple classes to an objects in the WYSIWYG interface, but we can do it in the code. So I want to find the div class ="marquee_ container". This is the main marquee container. Hit a Space, type autoplay. Let's choose File > Save and then Preview in Browser. What we'll see inside of our browser, we hit Reload, is now our navigation that is not in its selected state is now semitransparent.
So if I roll over these, I can see that they are semitransparent. If I click on one of them, they still work. The selected item becomes 100% and the other ones remain semitransparent. So now we have the visual state of our autoplay in place. In the next movie we're going to start to setup our debug area.
Get unlimited access to all courses for just $25/month.Become a member
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.