Creating a what? Have you ever gone to a web site and there was an image of say, a country, and when you moved your mouse over a particular area of the image some information popped up? Although there are now many newer technologies to create similar effects, you were most likely looking at some type of Image Map.
These days creating an Image Map is pretty simple if you have a good web development program, such as Dreamweaver, FrontPage or In-Design and the like. But let me tell you, back in the days when we web devs were all writing code out in NotePad (I know, some of you die-hards still do!<smile>), creating an image map was no picnic. This is because you need to decipher the exact coordinates of the area of the image that you want activated when the user mouses over that hot spot. Figuring that stuff out was a tricky process...and we had to do it in the snow, barefoot!<smirk>
Now it's pretty simple because the software does all the work for you. For this article, I'll be using Dreamweaver MX 2005 (DW). And as usual, your mileage may vary depending on what program you're using. But remember to check the Help files, because there's probably some nice instructions on the specifics for your program. This article will give you the gist of the process.
First you need to figure out what image you plan to use and what information you want displayed when your users hover their mouse. And maybe you want to allow them to click on the area to go to another web page, so plan as much of this out in advance.
Here's the image I'll use for this little demo.
This is a static image (one solid image that doesn't change), but I'll be adding information to various parts of the image so users can get different information when they move their mouse over different parts of the picture. In a future article, we'll get fancier and do some image roll-overs that will cause the image display to change.
In Dreamweaver, make sure that you have the Properties panel displayed by clicking on the image and clicking Modify > Selection Properties. DW will know that this is an image so it will display the properties panel for images. Notice that in the lower/left of the panel there is an area labeled Map. These are the image mapping tools.
You have three drawing tools, a square, a circle and a polygon tool.
Image Map may actually be a legacy term, since hot spot seems to be the more common term these days. So when you mouse over the tools, the tool tip that displays calls them hot spot tools. I say potato, you say potaato.
Since the states in this USA map are all of various shapes, I'll be using the polygon tool most of the time. I click on this tool and start to click out my lines around the states I want to mark, one by one. Since I live in Illinois, I'll start there. And that state is pretty tricky, so I have to carefully click, move, click, move around the border of the state. As I do so, you can see in the image below that somewhat of a net appearance is being displayed over the area I'm targeting. To finish off the area once my cursor gets back to the top, I double click and that closes off the tool.
Once finished, if I click away from the image, you can see below that Illinois is encased in this hot spot net.
I click on the area again to select it and the Properties panel displays the properties to set a hot spot.
A common use of an image map is to click on that spot and have it jump to another spot on the same page. This is why the Link input has a default Anchor Name marker (the # sign). When you want to jump to a spot on the same HTML page, you can just link to that Anchor Name spot on the page (like a bookmarked location). This assumes, however, that you've taken the time to actually add an anchor name to some area on the page. You can do this through the menus in DW by clicking Insert > Named Anchor or by hitting Ctrl + Alt + A. The HTML code would be like this:
<a name="myAnchorName"></a>
However, if you wanted the link to go to some entirely different page, you would add a normal hyperlink to a page and the # sign wouldn't be needed.
Your Target is the target window in which you want the link to be displayed. In other words, if you wanted the user to click and have the linked page to open in a new browser window, you'd select "_blank". Leaving it field empty defaults to use the same browser window.
But the important part in this demo is the Alt tag input box. This is the information that is displayed when a user moves over the image. Normally, all images have an Alt tag input and you should always add Alt (alternative) content describing the image. This is important for blind users and for anyone who may have a slower connection and chooses to turn off the image display. Rather than wasting time displaying all the images, they would just see an outline of the image and be able to read the alternative or Alt tag information that you've supplied for this image.
The image map or hot spot process works the same way, but it allows you to add several alt tags to the same image by selecting a particular spot within a larger image and marking that spot with its own alt text. In my map, I'll click to select the hot spot net I've drawn around the state of Illinois and in the Alt input box I'll write a little content describing what state this is.
Now when I view this web page in a browser (in DW, you can hit F12 to preview your page), I can mouse over the state of Illinois and learn about it, as you can see below.
I move to another state and go through the routine again. Although this time I select Colorado because it's much easier to draw!<grin>
After adding the alt tag to this area, you can see that this state is now coded to display information about it.
Image maps can be really useful to help you provide details about the specific points in an image. And as you can see below, you can enter a lot of gibberish about the particular location.
In fact, I don't think there is a limit. Well, other than what you can fit on a page.
In the code, shown below, you can see the coordinates for the markers. Obviously, the state of Illinois has a ton of them since I added a ton of clicks (handles) around the state as I attempted to create the net around it.
Although, it would have been more efficient if I'd have added fewer handles, or rather just enough to make the shape the way I needed without adding too many extras. Excess code is always less efficient.
This can also come in quite handy if you want to identify people in a photo. Rather than, or maybe in addition to, adding their names under the photo, you might want to add a circle hot spot around their head. Then the users (if they knew to do this) can mouse over the image to see who is who. To enhance the effect further, you can link the hot spot so that when the user clicks on someone's head, a new window opens with that person's bio. That's cool! But you'll have to make some type of notation on the page or many people might not figure out that this is an added feature.
Name That Dog Butt!
(Can you tell who is who? Move your mouse over the image to see their names.)
By the way, if you've placed a hot spot net around an image and realize that you missed the mark a bit, you can click on the arrow tool, select the hot spot and move it as needed. Alternatively, you can nudge it tiny bits by selecting it and tapping on your directional arrow keys. Or, you can move it in larger increments by holding down the Ctrl key as you tap on the same arrow keys. Oh, and if you can't read the information I added in the picture above fast enough (before the display disappears), try moving your mouse around the hot spot a tiny bit while you read, as that will hold the display open longer.
|
