Highlighted

Export SVG from Illustrator, import to Dreamweaver with selections

Explorer ,
Oct 26, 2019

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

TOPICS
Bootstrap, Code, How to, Import and export

Views

219

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Export SVG from Illustrator, import to Dreamweaver with selections

Explorer ,
Oct 26, 2019

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

TOPICS
Bootstrap, Code, How to, Import and export

Views

220

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Oct 26, 2019 0
Adobe Community Professional ,
Oct 26, 2019

Copy link to clipboard

Copied

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 26, 2019 1
Adobe Community Professional ,
Oct 26, 2019

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>

 

 

 

 

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 26, 2019 1