Web Hosting - Dedicated Servers
Dedicated Server Hosting
Web Hosting eCommerce Hosting Reseller Hosting Reseller Hosting Dedicated Server
Register Your Domain Name Todaywww

Dreamweaver - Image Maps

User Rating: / 0
PoorBest 

Image Maps

Dreamweaver offers web designers the capability of creating image maps on the fly. All the tools required are built in. All that is required is to bring the image in and define the different clickable areas.

For this example we'll use the following image:

Once the image has been imported, you'll see a few Map options if you expand the Properties Toolbar:

You can start your work by giving the map a name in the blank field to right of the word Map (a name is required). Then start defining your areas by selecting one of the hotspot tools (the blue shapes on the toolbar). Simply click and drag around the area you would like to make 'hot'. For this example, we'll use the Square Hotspot Tool:

Once the area has been drawn, the Properties Toolbar changes:

The 'Link' field is where you enter the url you wish to link to. For this example, we entered http://www.w3nation.com/. The 'Target' field is just like the standard target for any link. You can use the Presets included in Dreamweaver, or give the target your own name by typing in the field. The 'Alt' field is the Alternative text that will be displayed if graphics are turned off. Here is the information as we entered it for the sample:

and here is the result:

W3Nation Home

To complete the map, just do the same for all the other areas you wish to be clickable. Here is our finished imagemap:

W3Nation Home HTML Learning Center Yackety Cat Cool Resources

If you have Invisible Elements turned on, you will see an icon that looks like this next to your image map:

Do NOT delete this! This contains the coordinates of your imagemap. If you delete this, the map will not work.

 


Adobe Creative Suite and DreamWeaver are the perfect web design tools to build your new website with your AUSWEB Hosting.

Get your Adobe DreamWeaver designed website up and running today with an AUSWEB Hosting plan. Click the order button below and follow our signup page!


Newer news items:
Older news items:




If you found this tutorial helpful, you can bookmark it with your favourite tracker.

Reddit!Del.icio.us!Google!Live!Facebook!Slashdot!Netscape!Technorati!Blinklist!Yahoo!Ma.gnolia!Squidoo!
 
< Prev   Next >
 
 
RedHat Linux
cPanel Hosting
plesk windows
Fantastico SiteBuilder
 

AUSWEB Web Hosting PTY LTD © 2008 Network Info Data CenterPrivacy PolicySLA Terms and Conditions