Hey YouTube, it’s TechSupportGoneBad. And not too long ago, I got a request on how to make a video on how to make Rollover Images so here it is.
So, let’s get started. We’ll just go right into the tutorial here. Well first of, you want to make two images, the Before Image and the After Image. So here, I have two images both staying home. One has the text in green, the background in black and then the other one has the text in black, the background in green.
Now, you can get really fancy with this. You could do all the stuff but I just did a really simple color change and also this is mainly used for navigation buttons like when you put your mouse over one of the buttons like home, about me, whatever contact, whatever you put your mouse over that it will let’s say highlight it, make it bold, underline it, I’ll just do stuff like that. And this is all how you do it.
Now in this case, the effect I want is a simple color change, but you could do for example, you can make a before picture without underline and then the after picture will look exactly the same except they will be underlined. So, when someone goes on your website, hovers over that text, it will get underlined. And you could use the stuff like that and you could also use it for just normal images like let’s say they rollover and it will say like, “Click me,” or something like that and it could be linked to somewhere, but again this is mainly used for navigation buttons. So that’s why I have home written here.
So, you’re going to need photoshop or some simple image editing tool like paint. I’m pretty sure you could do it with paint if you want it to be something simple like this. And then you’re going to need Dreamweaver. So here on my website, open up in Dreamweaver, very, very simple process. Now, what you’re going to do is first of all make sure that these two are in your website folder. In this case, they’re not just because I just wanted to do this real, quick but when you’re doing this you want to make sure that it’s in your website’s folder and you upload both these images to your website holster or else it will become a broken link and it will just show you a little broken image picture and it won’t show the image at all.
So, once you’ve got it in your website folder, you want to click insert or go to insert and then go down to let’s see, right here, image objects and click on Rollover Image. I just forgot what I was doing there for a second. Now, you don’t really have to name the image or I'm just going to name it Home and just browse for the original image first. In this case, they’re all at my desktop. Okay so here I have Home I and it’s just telling me that it’s outside of the room folder of my TechSupportGoneBad website so I'm just going to press OK, it’s okay. I just don’t really need it to copy to my website because I don’t want to upload that. And then Home II and then you want to click Preload Rollover Image so once they’d go on your site, it automatically will load up the Rollover Image. You always want to check because then if it doesn’t preload it, and their internet isn’t that fast, once they go on, the image is going to take a while for it to change. So, that’s not good. And then—the alternate text and you could put Go to URL so I'm just going to make it go to the homepage of my website and then just press OK. And it will put the image wherever you selected it.
And I'm just going to save this real quick to my desktop as Test and update links, yes. And then you want to press F12 to on preview with your default web browser so press that. Give it a second here. It’s loading up. And now, it’s going to preload this so it’s going to take a little bit longer but it will be worth it. And it’s pretty much loaded so I’ll just go ahead and there it is. As you could see I don’t know if it’s going to log or not but as you see once you go over it, it changes the color switch so very, very simple to do and gives it a great professional look on your website. So, hope you guys enjoyed the tutorial. Hope it helped you out. Very simple to do, again, gives you a professional look on your website and yeah I hope it helped you guys out. If you like this tutorial, please subscribe at my YouTube channel at youtube.com/techsupportgonebad. And take a look at my website at techsupportgonebad.com. You can get some exclusive content here. At the site there you could get some exclusive content. You could check out my tutorials and I’ve got a bunch of freebies like MySpace layouts, website templates, YouTube backgrounds all made by me so just make sure to check that out and don’t forget to subscribe. Until next time, I’ll see you guys later.
Transcription by:
Scribe4you Transcription Services