Swap Image functionality in Live View

Forum|Forum|5 years ago
November 20, 2020
3 replies
350 views

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!

This topic is closed to new replies. Start a new post to keep the conversation going.

Correct answer Nancy OShea

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 OShea

Correct answer

Community Expert

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

P

profemmersonAuthor

Participant

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!

Nancy OShea

Community Expert

You're welcome. Glad to be of help 🙂

Nancy O'Shea— Product User & Community Expert

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.