Copy link to clipboard
Copied
I am trying to use an SVG exported from Illustrator and imported to Dreamweaver. And somewhere in that process, I must select areas (rectangles) which connect to URL tags.
Can anyone help with this?
Rick
Copy link to clipboard
Copied
See here https://helpx.adobe.com/au/illustrator/how-to/export-svg.html
Copy link to clipboard
Copied
Responsive Image Map with vector shape (rect) hotspots.
Copy & paste code below into a new blank document and save as SVGMap.html. Read the code and comments. Feel free to use any size image. Just make sure to change viewBox values to match. Post back if you have questions.
<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>Responsive Image Map</title>
<meta name="viewport" content="width=device-width, initial-scale=1"><meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
.mapContainer {
width: 70%;
margin: 0 auto;
}
#myMap {
position: relative;
width: 100%;
padding-bottom: 77%;
vertical-align: middle;
margin: 0;
overflow: hidden;
}
#myMap svg {
display: inline-block;
position: absolute;
top: 0;
left: 0;
}
/**vector shapes**/
#myMap rect {
fill: #FFF;
opacity:0.5;
}
/** highlight shapes on hover, click or tab **/
#myMap a:hover rect,
#myMap a:active rect,
#myMap a:focus rect{ opacity:1; }
</style>
</head>
<body>
<div class="mapContainer">
<h3>Responsive Image Map </h3>
<figure id="myMap">
<svg version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" viewBox="0 0 1200 800" preserveAspectRatio="xMinYMin meet">
<!--Your JPG or PNG map goes here-->
<image width="1200" height="800" xlink:href="https://dummyimage.com/1200x800/F00/000.png&text=Your+JPG+or+PNG+Image+Here"> </image>
<!--1st outbound link-->
<a xlink:href="https://google.com" target="_blank"><title>Google.com</title>
<!--vector shape 1,
change values as needed-->
<rect x="20" y="20" width="450" height="300"/>
</a>
<!--2nd outbound link-->
<a xlink:href="https://example.com">
<title>Example.com</title>
<!--vector shape 2-->
<rect x="700" y="20" width="450" height="300"/>
</a>
<!--3rd outbound link-->
<a xlink:href="https://yahoo.com">
<title>Yahoo.com</title>
<!--vector shape 3-->
<rect x="20" y="450" width="450" height="300"/>
</a>
<!--4th outbound link-->
<a xlink:href="https://bing.com">
<title>Bing.com</title>
<!--vector shape 4-->
<rect x="700" y="450" width="450" height="300"/>
</a>
</svg>
</figure>
</div>
</body>
</html>