How to Create a Clickable Image Map With Dreamweaver

Video Transcript

"Hi everyone my name is David Casuto from San Francisco Computer Tutors and in this tutorial we are going to show you how to create an image map using Dreamweaver. Basically an image map is a certain area that you designate as clickable like let's say a map and you want to click on a certain state and you want that particular clickable item to go to another web page. So using our Story Street example here I'm just going to basically make this tree circle a different link than the rest of these so what I am going to do is I am going to come over here on my properties panel and properties panel is not open yet so come over here to windows and choose properties and I am going to click on my image and you see over here that it says map right, and I've got three different shapes here. When I move my mouse over it it says I have my rectangle hot spot tool. I've got my oval hot spot tool and I've got my polygon hot spot tool. This makes it nice and easy so I have my circle tool so I am just going to click on that and I am going to draw a circle around the area that I want to actually be my hot spot. So it says here please describe the image map in the alt field in the properties and specter and this description will help visually impaired people use tools that read web pages to them so I'm just going to go ahead and put that in there and I'm going to call this a Story Street Home Page. Then up here is where I put in my link where the pound sign is so my Story Street Home Page I'm just going to put in the whole thing here just so you can see how it would look if you were going to do an external one so storystreet.net. So if it was going to be something that was already in your site root it would just be for example index.html or it would be contact us at html without the http or www or anything like that. So now I can also move this around if I would like to and I can also reshape it if I want to and things like that. If I didn't like what I did the first time you can just go ahead and drag it in and out. I've got my perfect circle there and now I'm going to go ahead and test it to see if it works. Go to preview in Safari and click on my globe there and I'm going to go ahead and save it and now you can see when I click on that it is going to take me right to Story Street so it is as easy as that. See that. No link, no link and then finally I got right over the circle and I've created what is called a hot spot so think of some ways that you can do that. It is pretty easy but a really nifty trick. Well that concludes our exercise in Dreamweaver on creating image maps. Hope you enjoyed that. Once again my name is David Casuto from San Francisco Computer Tutors and you can look me up on yelp.com under San Francisco Computer Tutors and I hope to hear from you soon. Thanks."