Swap Image functionality in Live View

Report · Nov 20, 2020

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!

Report · Nov 20, 2020

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— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Nov 20, 2020

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!

Report · Nov 20, 2020

You're welcome. Glad to be of help 🙂

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Adobe Community

Swap Image functionality in Live View

1 Correct answer