Dreamweaver CS4 Tutorial - 9 - Image Hotspots Video Lecture | How to create Responsive Websites with DreamWeaver - IT & Software

what's up in this tutorial I'm gonna
show you how to create hot spots inside
of images that will be linked to an
external URL or internal if you like as
you can see I've already made an image
map and I'm gonna run through the exact
steps that I went through to create that
here we have an image of dooba and we
have the main main islands right here so
say I want to link to maybe a better
image or a street view or something of
this particular area you're going to go
in your properties for the image and
you're going to give the image map a
name so in this case I'm just going to
say map name you click enter and you see
that right here it says use map and then
it says map name after you do that you
will see a rectangle hotspot tool a
circle hotspot tool and a polygon
hotspot tool and I'm gonna show you how
to use each one of these so first click
on the polygon and go inside of your
image and start to click around the
image that you want to make a hotspot
just like this
and you saw that it popped up with a
warning when I first started doing that
that warning was basically saying to set
up your alt properties inside of that
particular hotspot
and I'm just going to type something in
for that and you can also set a link
here I'm just going make it to Google
comm you know even though it's not where
I really wanted to go it's a sample of
where it needs to go and you can also
set your target so think of this almost
as a little link inside your image so
now I'm going to do a similar thing to
these other three man-made islands this
time I'm going to use the circle hotspot
tool and I'm going to create a little
circle around this and it says exactly
what I said in the last one make sure
you put some alt text in there and I'm
just going to leave the link the same
and I'm gonna say target it's blank
I'm gonna use the circle hotspot tool
again and you can see that it's not
exactly over the whole area that I want
to link someone to go down here and I'm
gonna click on this little pointer so we
can move it around there we go
and I'm gonna do the same thing except
this time I'm going to use the rectangle
hotspot tool I'm gonna drag it over it's
gonna tell me that the description and
the alt will help the visually impaired
people and there we go and now all you
have to do is go back and it's it's
there so if you looked at this web page
inside your browser
then you can see that once you scroll
over this particular area you have a hot
spot
it's going to take you right to Google
it's gonna open up in a new blank tab
and this one is not going to do anything
because it doesn't have a link but
that's exactly how you put hot spots
inside images and thanks for watching
this tutorial and make sure you guys
subscribe