![dreamweaver cc image map dreamweaver cc image map](https://d29rinwu2hi5i3.cloudfront.net/article_media/c8376448-52b3-4929-802e-7716efe25ba8/headline_sq_google_maps.jpg)
DREAMWEAVER CC IMAGE MAP CODE
Copy and paste the edited SVG code like so: Ĭurrently, the SVG document takes up the entire space of the viewport, and the paths are filled with black. There are several ways to integrate interactive SVG into a web page: as an object, an iframe, or with the code added directly into the page. Links in SVG are written in the same way in HTML, with the addition of an xlink prefix to href attribute: Īfter linking each path, look at the SVG file in a browser: the exact outline of the Alberta province becomes the hotspot area of the associated link, and scales with the document and viewport window. Images courtesy of laszlo-photo, hern42 and mybulldog (Flickr) via a Creative Commons licence Linking the SVG shapes It's then easier to add links and images to the code. It's straightforward to clean up the code: remove comments, prolog, doctype as well as any attributes we don't need. Cleaning up the codeĮxported from Illustrator, the code of the SVG file will look something like this: Today, most such tools support the SVG format.
![dreamweaver cc image map dreamweaver cc image map](https://cly7796.net/blog/wp-content/uploads/2016/11/create-a-dreamweaver-cc-image-map01-700x492.jpg)
Generally speaking, complex modifications to an SVG file are best left to a vector illustration tool, which can manipulate the file graphically. For this example, I'll use a map of my adopted country of Canada, simplified down to the western provinces for the sake of clarity. Such images also have the advantage of being freely available: Wikipedia has maps of every country in SVG format as does Régis Freyd's MapsIcon project. To illustrate this, we'll use a geographical map as the basis for our image map.