Highlighted

Swap Image functionality in Live View

Community Beginner ,
Nov 20, 2020

Copy link to clipboard

Copied

Hi all,

 

In previous versions of Dreamweaver when I put a Behavior of Swap Image on an image and set it to onMouseDown, the functionality would work in Dreamweaver. In 2021 it does not work and can only be seen if I open the document in a "real" browser. I tried this with an old file that I know previously worked as well as a newly developed file with no luck. Has this functionality been removed or perhaps I am doing something wrong? I did look under the View menu to see if it might be an option I had to turn on like the Live Link options, but didn't find anything. Thanks for any advice!

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

Can you upload your problem page to your remote server and post a URL so we can see what you're working with? 

 

I won't touch those MM behaviors for reasons of my own.  I have no use for the scripts and want no part of them in my projects.  That said, I can use CSS hover effects without any problems in Live view.  But I would not use hover or mouseOver effects alone for anything important because it does NOTHING on touch screen devices.  OnClick or tap triggers are more reliable.

 

Working example of a CSS hover effect.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Font Awesome Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!--Font Awesome Icons-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<style>
body {background-color:teal; width:89%; margin:0 auto}
/**Font Awesome Icon styles**/
i.fa {color: rgba(213,213,213,0.60);}
i.fa:hover, i.fa:active, i.fa:focus  {color:rgba(213,213,213,1.00);}

</style>
</head>
<body>
<!--Font Awesome Icons-->
<p><a href="#"><i class="fa fa-3x fa-twitter-square" aria-hidden="true"></i></a> &nbsp;
<a href="#"><i class="fa fa-3x fa-facebook-square" aria-hidden="true"></i></a> &nbsp;
<a href="#"><i class="fa fa-3x fa-youtube-square" aria-hidden="true"></i></a> &nbsp;
<a href="#"><i class="fa fa-3x fa-vimeo-square" aria-hidden="true"></i></a></p>
</body>
</html>

 

To answer your question about Live View, it was changed to respond to one-click editing.  And because it's not a real browser, you must invoke the Ctrl/Cmd key while clicking to open a collapsed menu.  However, interactivity and performance should always be tested in real devices.  As you know, Live view is not a replacement for that.

 

Views

28

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

Swap Image functionality in Live View

Community Beginner ,
Nov 20, 2020

Copy link to clipboard

Copied

Hi all,

 

In previous versions of Dreamweaver when I put a Behavior of Swap Image on an image and set it to onMouseDown, the functionality would work in Dreamweaver. In 2021 it does not work and can only be seen if I open the document in a "real" browser. I tried this with an old file that I know previously worked as well as a newly developed file with no luck. Has this functionality been removed or perhaps I am doing something wrong? I did look under the View menu to see if it might be an option I had to turn on like the Live Link options, but didn't find anything. Thanks for any advice!

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

Can you upload your problem page to your remote server and post a URL so we can see what you're working with? 

 

I won't touch those MM behaviors for reasons of my own.  I have no use for the scripts and want no part of them in my projects.  That said, I can use CSS hover effects without any problems in Live view.  But I would not use hover or mouseOver effects alone for anything important because it does NOTHING on touch screen devices.  OnClick or tap triggers are more reliable.

 

Working example of a CSS hover effect.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Font Awesome Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!--Font Awesome Icons-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<style>
body {background-color:teal; width:89%; margin:0 auto}
/**Font Awesome Icon styles**/
i.fa {color: rgba(213,213,213,0.60);}
i.fa:hover, i.fa:active, i.fa:focus  {color:rgba(213,213,213,1.00);}

</style>
</head>
<body>
<!--Font Awesome Icons-->
<p><a href="#"><i class="fa fa-3x fa-twitter-square" aria-hidden="true"></i></a> &nbsp;
<a href="#"><i class="fa fa-3x fa-facebook-square" aria-hidden="true"></i></a> &nbsp;
<a href="#"><i class="fa fa-3x fa-youtube-square" aria-hidden="true"></i></a> &nbsp;
<a href="#"><i class="fa fa-3x fa-vimeo-square" aria-hidden="true"></i></a></p>
</body>
</html>

 

To answer your question about Live View, it was changed to respond to one-click editing.  And because it's not a real browser, you must invoke the Ctrl/Cmd key while clicking to open a collapsed menu.  However, interactivity and performance should always be tested in real devices.  As you know, Live view is not a replacement for that.

 

Views

29

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
Nov 20, 2020 0
Adobe Community Professional ,
Nov 20, 2020

Copy link to clipboard

Copied

Can you upload your problem page to your remote server and post a URL so we can see what you're working with? 

 

I won't touch those MM behaviors for reasons of my own.  I have no use for the scripts and want no part of them in my projects.  That said, I can use CSS hover effects without any problems in Live view.  But I would not use hover or mouseOver effects alone for anything important because it does NOTHING on touch screen devices.  OnClick or tap triggers are more reliable.

 

Working example of a CSS hover effect.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Font Awesome Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!--Font Awesome Icons-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<style>
body {background-color:teal; width:89%; margin:0 auto}
/**Font Awesome Icon styles**/
i.fa {color: rgba(213,213,213,0.60);}
i.fa:hover, i.fa:active, i.fa:focus  {color:rgba(213,213,213,1.00);}

</style>
</head>
<body>
<!--Font Awesome Icons-->
<p><a href="#"><i class="fa fa-3x fa-twitter-square" aria-hidden="true"></i></a> &nbsp;
<a href="#"><i class="fa fa-3x fa-facebook-square" aria-hidden="true"></i></a> &nbsp;
<a href="#"><i class="fa fa-3x fa-youtube-square" aria-hidden="true"></i></a> &nbsp;
<a href="#"><i class="fa fa-3x fa-vimeo-square" aria-hidden="true"></i></a></p>
</body>
</html>

 

To answer your question about Live View, it was changed to respond to one-click editing.  And because it's not a real browser, you must invoke the Ctrl/Cmd key while clicking to open a collapsed menu.  However, interactivity and performance should always be tested in real devices.  As you know, Live view is not a replacement for that.

 

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...
Nov 20, 2020 0
Community Beginner ,
Nov 20, 2020

Copy link to clipboard

Copied

Hi Nancy,

 

Thank you for your reply - I really appreciate your in-depth response. Yes, I am aware of the issues with DW scripts and better ways to handle them in a professional setting. In this particular instance, I was just showing a page with 5 thumbnails and a large image and how Dreamweaver Behaviors can swap the large image (along with a caption, which we changed with Set Text of Container) when an end-user clicks on the thumbnails.

 

You did resolve my issue with this comment:

To answer your question about Live View, it was changed to respond to one-click editing.  And because it's not a real browser, you must invoke the Ctrl/Cmd key while clicking to open a collapsed menu.

 

In previous versions of DW, I did not have to hit the Cmd key for this type of interactivity. I understand now that it is required . . . and it worked! (And it did work in all the "real" browsers prior to my post . . . I was just curious why it didn't work in DW anymore).

 

Thanks again!

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...
Nov 20, 2020 0
Adobe Community Professional ,
Nov 20, 2020

Copy link to clipboard

Copied

You're welcome.  Glad to be of help 🙂

 

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...
Nov 20, 2020 0