Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
So we've learned that we can use slices inside of Illustrator to actually kind of chop up a document into pieces, and have it so that you can assign URLs to each of those pieces, meaning that a user can go to a specific graphic or page and click on different parts of that page and be directed to different URLs. However, there may be times when you want to do that without having to actually slice up an image. Well, Illustrator has the ability to define we call hot spots. These are also referred to as image maps in HTML, and I want to show you how to set them up inside of Illustrator.
It's actually pretty straightforward and easy to do, and even if you're not using HTML, as we'll see in a moment, they can still prove to be helpful. For example, I have some kind of a banner here, and I want to make it as that when you click on each of these different tours that you are directed to a certain URL. So, the first thing I'm going to do here inside of Illustrator is go up to my Window menu, and I'm going to choose to open up my Attributes panel. You know in the world of print, we use the Attributes panel to specify things like overprints. However, we can also use the Attributes panel to define these image maps.
I'm going to start by first selecting this object right here. It's actually a symbol, but I want this area, or the region defined by the symbol to be actually become some kind of a hot spot that I can click on. So inside the Attributes panel, since I've something selected, I can choose something here called Image Map. Now currently it's set to None, but I can click on the pop-up here and set this to be Rectangle. Now I need to just define what the URL is, in other words, where this person gets directed to when they click on that object or that area. So I'm going to type a web address here, just for simplicity sake here.
Let's just go to lynda.com. I can now click on another object here, and I could specify an image map for that also. I'm choosing rectangle here, by the way, but if the shape itself were not in the shape of a rectangle, I could choose Polygon, which will be great for circles, for example, or other nonrectangular shapes. But this case is pretty straightforward. So we're going to use rectangle and instead of having to type in the URL again, I can just click on a pop-up here and see any recent URL, or web addresses that I've typed into Illustrator. So I'm going to choose again lynda.com for this one and just for this one as well, just to save some time here.
I think you get the idea. Now I'm ready to test this, if I wanted to. Now there is a button over here called browser. This'll actually not test the graphic on my screen, but it will actually test to see if that URL is a working URL. So I want to make sure that I didn't have any typing mistakes, for example, I can click on the browser button that will launch, let's say in this case here with lynda.com. And if I go to page successfully, I know that I've entered the right URL. But for now I'm going to choose File > Save for Web & Devices, and I am going to choose to now preview this in a web browser.
Now it doesn't really make a difference what file format I save this image in; it could to be GIF or JPEG or PNG or anything for that matter. It's just the image that kind of lives on the web page itself. In the HTML though, if you scroll down over here to the bottom, you'll see that there are these maps that exist and area shapes that define certain coordinates that are hot spots, and the URLs were those we are actually going to. You'll notice if I move my cursor now over these images, I have the ability to click on them, and I'll be directed to the URL that I specified. Of course, in order for this to work, I need to supply the HTML and the image as well.
If I just sent somebody to GIF, for example - in this case here, it's being exported as a GIF file - it's not good enough, because the information for the hot spots exist inside the HTML. However, you can use the same methods that we just did now to define these hotspots for other file types also that can have these clickable regions stored inside of the image itself, and that's specifically for SWF and SVG files. So just to show you, if I closed this browser, and I must go back to Illustrator here for a second. If we choose to export this image as a SWF, I can also choose to preview this in a browser, and you can see that when I mouse over them, they are clickable regions as well.
Of course, I can send this SWF to anybody, and the URLs will work correctly, because they are now specified inside of the SWF itself. So if you're using SWF or SVG files this is a great method for defining hotspots. If you're using HTML, you can use the previous method that we tried. But ultimately, this is another way to find clickable regions in your artwork other than using slicing.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.