link triggered image overlay

Report · Aug 12, 2019

Good morning - I have a client that wants an overlay, onto an existing image, that is triggered by a drop down menu link. Any ideas if and how this can be done in Dreamweaver 19.2?

Report · Aug 12, 2019

You will need an onclick event as the trigger.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · Aug 12, 2019

Something along the lines of, say, an AP div with a background image that is then filled with an img tag upon the menu selection, then is empty (displaying the background image) if the default first value is selected?

As per BenPleysier, the menu would need an onClick event to handle the DOM changes.

Or were you thinking of something else?

V/r,

^ _ ^

Report · Aug 12, 2019

AP DIVs are no longer available in DW CC 19.2

Report · Aug 12, 2019

I've never used any of Dw features to create an AP div. I hard-code those. Actually, I hard-code 95% of my stuff, using only Dw's autocomplete for tag attributes.

V/r,

^ _ ^

Report · Aug 12, 2019

Are you using Bootstrap? You could make an onClick event trigger from a button and open a modal window overlay.

<!doctype html >
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap 4 Modal Window</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Bootstrap CSS-->
<link href="css/bootstrap-4.2.1.css" rel="stylesheet" type="text/css">
<style>
/**Make footer hug screen bottom**/
body { height: 100vh; }
.flex-grow { flex: 1 0 auto; }
</style>
</head>
<body class="d-flex flex-column">
<div class="container flex-grow">
<div class="jumbotron">
<h1 class="p2">Bootstrap 4 Modal</h1>
<p>This demo uses version 4.2.1 but will work with any 4x version in your site folder. Adjust your code accordingly. </p>
<!-- Button trigger modal -->
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#myModal"> CLICK ME! </button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="myModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button>
</div>
<div class="modal-body"> Your modal content here... <img class="img-fluid" src="https://placeimg.com/500/400/nature" alt="placeholder"> </div>
<div class="modal-footer">
<button type="button" class="btn btn-dark" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<hr>
<div class="container-fluid">
<div class="row">
<footer class="col py-4 bg-dark text-white-50"> &copy; 2019 Your Website all rights reserved. </footer>
</div>
</div>
<!--jQuery first, then popper then Bootstrap--> 
<script src="js/jquery-3.3.1.min.js"></script> 
<script src="js/popper.min.js"></script> 
<script src="js/bootstrap-4.2.1.js"></script>
</body>
</html>

Nancy O'Shea— Product User, Community Expert & Moderator