How to Create a Mouse-Over Effect With Dreamweaver

Video Transcript

"Hello everyone, my name is Dave Casuto from San Francisco Computer Tutors and in this video tutorial, we're going to show you how to create a mouse-over effect using Dreamweaver. When you move your mouse over something, you're going to have a different effect. Maybe you want the image to change color, maybe you want to have the border around it change color, maybe you want to have the words do different things. So we're going to show you how to do that in just a few easy steps so stay tuned. OK rollover buttons add nice little interactivity to your buttons when someone rolls over them, it changes form. So the thing you're going to want to know beforehand is to create your buttons in Photoshop or another photo or image editing program and you're going to want to have two different images for your rollover. One for your upstate and one for your overstate. OK your upstate is the state that your user sees it when it comes on without any mouse activity and your overstate is when someone just moves their mouse over it. OK so I've actually got two buttons that I've created, one for my, one for each state that I have now inside my root folder. So how do we actually do this? So I've got my table setup here and what you want to do is you want to go up to your insert panel and then you should be in your common tab and then move your mouse over where it says images and then click down to go to rollover image. So now you'll see here we have original image and rollover image. So the original image is going to be your image in your upstate. So I'm going to click on browse and it's going to take me into my folder and you'll see here I have a bunch of different images that one is called home_up and the other is called home_over. So I'm going to click on home_up and then it gives me a nice little preview of it, I'm going to click on choose and it says the file's outside the root folder, I'm going to say yes to bring it actually into my root folder and then I'm going to say save and we'll go ahead and replace. So if yours is already actually in your root folder, you shouldn't have that problem. OK and then I'm going go ahead and click on browse and the same thing should be for this one too, it should actually be in the folder that you started with. So now I'm going to go ahead and choose my home_over, click on choose and it's going to say do you want to copy this file in there right now again, I'm going to say yes, say save, I'm going go and replace it, OK and then I'm going to go ahead and possibly put in some alternate text OK, Home Button and then when clicked, just go to index.html OK? Standard for your home and let's go ahead and click OK and then there it is. And now it's now sitting there in the upstate so I'm going to go ahead and test it out in my browser. Come up to preview in Safari, it's going to ask me if I want to save it and I'm going to go ahead and click save, yes, and now the moment of truth, click on my mouse-over, move my mouse over it, and there it is. OK well that concludes our exercise on creating mouse-over effects. I hope you enjoyed it. Once again my name is Dave Casuto from San Francisco Computer Tutors here in San Francisco. You can look me up on yelp.com for reviews and other kinds of information about me and my services under San Francisco Computer Tutors. Thank you very much."