link triggered image overlay

Forum|Forum|6 years ago
August 12, 2019
3 replies
648 views

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?

This topic has been closed for replies.

Nancy OShea

Community Expert

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

WolfShade

Legend

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,

^ _ ^

photo:staatsAuthor

Inspiring

AP DIVs are no longer available in DW CC 19.2

WolfShade

Legend

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,

^ _ ^

BenPleysier

Community Expert

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!

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.

Scanning file for viruses.

This file cannot be downloaded