Highlighted

View remote images in Design View

New Here ,
Sep 12, 2019

Copy link to clipboard

Copied

I'm trying to update an image map and have brought in code from a remote page. When I am in split view, with Code and Design View, I can see the image maps but not the remote image. If I switch from Design to Live view, I can see the remote image but not the image map. Is there a way to see the remote image while in Design View in Dreamweaver CC 2019? Attached is a partial screen showing broken links in the Design View. I don't want to have to download the actual images to my local machine just to edit the image maps. Thank you in advance for assistance.

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

I am no fan of old fashioned image maps as they are not responsive.   But I can see remotely hosted placeholder images in Design View.  See screenshot.  Save document and hit F5 to refresh.

.

clipboard_image_1.png

 

Here is the code I used.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Image Map Test</title>
</head>
<body>
<img src="https://placeimg.com/500/500/arch" alt="placeholder" usemap="#Map">
<map name="Map">
<area alt="example" shape="rect" coords="3,4,126,393" href="https://example.com">
<area alt="example" shape="rect" coords="169,142,337,310" href="https://example.com">
</map>
</body>
</html>

 

TOPICS
How to

Views

208

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

View remote images in Design View

New Here ,
Sep 12, 2019

Copy link to clipboard

Copied

I'm trying to update an image map and have brought in code from a remote page. When I am in split view, with Code and Design View, I can see the image maps but not the remote image. If I switch from Design to Live view, I can see the remote image but not the image map. Is there a way to see the remote image while in Design View in Dreamweaver CC 2019? Attached is a partial screen showing broken links in the Design View. I don't want to have to download the actual images to my local machine just to edit the image maps. Thank you in advance for assistance.

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

I am no fan of old fashioned image maps as they are not responsive.   But I can see remotely hosted placeholder images in Design View.  See screenshot.  Save document and hit F5 to refresh.

.

clipboard_image_1.png

 

Here is the code I used.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Image Map Test</title>
</head>
<body>
<img src="https://placeimg.com/500/500/arch" alt="placeholder" usemap="#Map">
<map name="Map">
<area alt="example" shape="rect" coords="3,4,126,393" href="https://example.com">
<area alt="example" shape="rect" coords="169,142,337,310" href="https://example.com">
</map>
</body>
</html>

 

TOPICS
How to

Views

209

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
Sep 12, 2019 0
Adobe Community Professional ,
Sep 12, 2019

Copy link to clipboard

Copied

I have had similar issues on and off with every version of DW up to CC2019 (which seems to work correctly for me). Because of that I always work with local images until I need to upload. At that point, I use DW's F&R tool to add the remote image path. 

I don't think there is a fool-proof way to get them to show otherwise.

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...
Sep 12, 2019 2
Adobe Community Professional ,
Sep 12, 2019

Copy link to clipboard

Copied

I am no fan of old fashioned image maps as they are not responsive.   But I can see remotely hosted placeholder images in Design View.  See screenshot.  Save document and hit F5 to refresh.

.

clipboard_image_1.png

 

Here is the code I used.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Image Map Test</title>
</head>
<body>
<img src="https://placeimg.com/500/500/arch" alt="placeholder" usemap="#Map">
<map name="Map">
<area alt="example" shape="rect" coords="3,4,126,393" href="https://example.com">
<area alt="example" shape="rect" coords="169,142,337,310" href="https://example.com">
</map>
</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...
Sep 12, 2019 2