Sign In | Subscribe
Start learning today, and be successful in your academic & professional career. Start Today!
Loading video...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of Adobe Dreamweaver CS6
  • Discussion

  • Study Guides

  • Download Lecture Slides

  • Table of Contents

  • Transcription

  • Related Books

Bookmark and Share
Lecture Comments (2)

0 answers

Post by Candyce Mairs on January 28, 2014

You cannot use an imagemap if you are working with a .swf Flash file. If you look at the final code that Dreamweaver adds to the page, you will see there is an <img> tag on the page. Imagemap code attaches itself directly to the <img> tag using the usemap attribute. When you insert a Flash file there is no image tag available on the page.

If you want to do this using Flash, usually you will build the feature directly into the file using Flash. It is not done using HTML coding that is sitting on the web page like the img tag does.

0 answers

Post by pintu darji on January 26, 2014

is it possible to do image hot spot, in this panaroma view if this image is moving/scrolling horizontally, or
if this panorama view file is and externally loaded (.swf )file with rolloeover buttons made in flash????how to link it??
kindly explain

Image Maps/Hotspots

  • An image map or hotspot is a way to create multiple links within a single image
  • We will look at how to create these hotspots using Dreamweaver imagemap tools
  • We will create 3 hotspots to use each of the hotspot tools to the panorama image on specials.html
  • We will add a hotspot to link to the mirage, treasure island & venice hotels in vegas
  • Create 3 hotspots using each of the tools, make sure they do not overlap
  • To do this, first select the image, then click one of the hotspot tools within the Properties panel and draw a shape over the image area
  • Be sure to add the link and alternate text to these hotspots
  • Use mirage.com, treasureisland.com and venice.com as the links, these are not the actual links to these hotels
  • Be sure to name the map in the blank area directly above the tools
  • Test the links & show how the cursor changes
  • An imagemap or hotspot is away to create multiple links on a single image

Image Maps/Hotspots

Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.

  • Intro 0:00
  • Creating an Image Map 0:47
    • Select Image
    • Image Map/Hotspot Tools
    • Link Hotspot
    • More Hotspot Tools
  • Preview in Browser 8:37
  • Troubleshooting Image Hotspots 9:34
  • Summary 10:53

Transcription: Image Maps/Hotspots

We are now going to take a look at creating what I call multiple links for a single image.0000

By default, every image only has one link piece or area available, and that is for the entire image.0008

But what if I want to have a larger image, and within that image, it has multiple items in it; so I want to create links to different areas within that single image?0017

I have the Specials page open; and at the bottom of this page right now, I have this panorama view of Las Vegas.0031

And when I do that, I have quite a few different hotels available: so this one is the Mirage; this is Treasure Island; over here we have Venice; and because of that, what I want to be able to do is: if the user goes to the Venice area of this picture and clicks, they are taken to the Venice Hotel in Las Vegas; the same thing here with Treasure Island.0042

So, what I do is: if I select the image, notice, there is only one link area; but what we are going to do is add hotspots or create an image map for this image, so that I can add multiple links within the image.0071

There are a few tools available for you in Dreamweaver to do this.0089

Select the image first: so I have the image selected, so it's showing in my Properties area.0095

Then, what I am going to do is work with these pieces down here in the left-hand corner.0103

And first of all, I'm going to give this map a name: it's important to do that, because if you don't...you may end up having two image maps on the same page, and if you don't name them, then they will end up with the same name (or the possibility exists where that can happen), and they won't work.0109

And I have definitely had that situation happen.0129

So, what I am going to do now is: let me choose which one to do; let me do this one over here: this is the Mirage in Vegas.0133

I'm going to click the Rectangle Hotspot tool; and when I click on it and come up to my image, you can see it turns to a crosshair.0144

And what I am going to do is click on the left-hand side of the Mirage and drag; and this whole area is also a part of the Mirage--I'm going to try not to get that brick tower--that is part of Venice.0155

I'll click and drag; when I let go, you can see there is a little loose square that appears, and this is Dreamweaver reminding you to fill in this alternate area on your hotspot; so I'll say OK.0171

Now, my link here is where I would link to the specific area on the Web; if it is going outside my website, I need the http protocol; and since I am not exactly sure what that specific hyperlink is right now, I'll put in what I call a placeholder hyperlink.0186

Let me try miragehotel.com; and over here, I'll put Mirage Hotel.0208

So, we just set that up; now this is a link off of my website, so my target is going to open a new tab or a new browser for that particular hyperlink area.0219

And that is what I want; so I'll choose _blank.0231

Now, I'll continue creating these; I am going to go over to the next hotspot tool, and normally you want to create your hotspot tool based on the shape of the object.0235

Since most of mine are more or less square, what I will do is approximate the shape of these objects.0248

I'll click this one here, the Circle hotspot tool; now, the Circle hotspot tool (I'm going to show it to you right here)--it is kind of a strange one.0255

If I click and move, it will tend to kind of flip over on you and roll around; so what I tend to do with this one is just get it approximately the size you want and let go.0264

It is reminding you of that alternate text here, so I'll say OK; and I am going to go down to the arrow tool (think of that as your editing tool), and with that, I can move it; I can resize it (I'll make this a little bit bigger); and you can see, this isn't working out too poorly for Treasure Island Hotel in Vegas.0278

Let me open that up just a little bit further; always err on the side of a little bit too big, instead of too small, when you are setting these up (I'll show you why in a minute).0300

But we want to make it a little bit bigger; as long as it is not overlapping another hotspot, we are fine.0313

I'll move this one over, and I think I could make it even a little bit bigger here--make it a little bit easier for the user to find it.0321

This one is Treasure Island Hotel; now I started typing Treasure Island...have to remember that protocol.0331

I'll do treasureislandvegas.com.0343

In my alternate text, I'll do Treasure Island hotel in Las Vegas.0350

Now, I also want this one to open in a new window; so I'll choose target of _blank.0360

We are down to this last structure over here; and this is Venice in Las Vegas.0367

Venice is complete with gondolas and everything in Vegas, in case you haven't been there; but what I am going to use for this one is the last tool we haven't tried.0375

Now, this last tool is designed so that, if either one of these two shapes don't work out for you, you use the Polygon tool.0388

It is really a strange one; so what I am going to do is create a hyperlink around this area for Venice.0399

If I click on the Polygon tool, what you want to do is just click around the object.0410

Now, the idea on this one is it is going to look weird; so I'll warn you, as I start clicking (I'll get the alternate reminder, and)--I'm going to go straight up; and you want to just click around the border of the image and then go straight across.0417

Here is my Venice piece; do you see how it goes kind of strange?0434

There we go: as soon as I get it more or less drawn...because this big building behind it isn't necessarily a part of what I want to highlight...0444

I'll go down here for the link, and this is going to be venicehotel.com.0455

What did I not do?--go and hit the Home key; on your keyboard, there is always a Home and an End key; if you are in the middle of a URL like this, and you want to get to the beginning or the end, hit the Home key--it comes in really handy.0464

I'm going to add my http://; I'll add my target of _blank; and here is the Venice hotel in Las Vegas.0482

Now, these won't be fully functional hyperlinks; I am just using them as an example.0501

I didn't bother going out to the actual correct hotel names; feel free to do that and correct these if you like, but I am going to save my page.0509

What I want to do is show you what happens in the browser.0520

Now, the idea behind these image maps is: notice, you can't even tell there is anything there; but as soon as I move my cursor into an area of the page, you can see it turns to a hand.0525

Now, it looks like I am getting (or I was getting) Prague clock in Old Town; that is a title, and somehow, that title is pulling into this image; so I'm going to have to fix that.0542

These are the reasons why you always want to take the time to test everything in your browser.0556

When I am outside this image (or the hotspot for the image, specifically), my cursor is a pointer; as soon as I move in, it turns to a hand.0562

But let me go back and correct my image here; now, watch just what happened.0574

This can happen to you: when I used the Polygon tool, when I was done, I did not move off of it; and because of that, when I click on anything in this image, it is going to start really messing up this shape.0582

What I am going to do is Ctrl or Command, Z, and move back to my arrow tool; and it's all corrected.0598

Now, let me click on this image; and I must have a title in this image.0608

Remember, it was a tool tip; so let's take a look at the code.0613

And it definitely says a title of Prague clock in Old Town; so I'm going to change this and make it say Las Vegas Panorama.0617

There we go; now I'll put it back in the browser once by doing a save, and just make sure (let me put it in Safari this time) that that actually corrected it.0630

There we are; so my hotspots are working, and my hover and title are working, as well.0644

That is how you can create hotspots within Dreamweaver; these can only be used on an image, and the blue or teal color that is showing up here is just within Dreamweaver to show you there is a hotspot there.0654

You are fully able to edit these using the arrow; I can click on it and grab a point and edit it.0670

That is a hotspot, or actually, adding multiple hotspots using each one of the hotspot tools built into Dreamweaver.0680

A hotspot adds multiple links within a single image, and you select the image, and the tools are there for you to make multiple links within that image.0689

That is a hotspot within Dreamweaver.0702