Highlighted

link triggered image overlay

Explorer ,
Aug 12, 2019

Copy link to clipboard

Copied

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?

Views

104

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

link triggered image overlay

Explorer ,
Aug 12, 2019

Copy link to clipboard

Copied

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?

Views

105

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
Aug 12, 2019 0
Adobe Community Professional ,
Aug 12, 2019

Copy link to clipboard

Copied

You will need an onclick event as the trigger.


Ben

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...
Aug 12, 2019 0
LEGEND ,
Aug 12, 2019

Copy link to clipboard

Copied

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,

^ _ ^

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...
Aug 12, 2019 1
Explorer ,
Aug 12, 2019

Copy link to clipboard

Copied

AP DIVs are no longer available in DW CC 19.2

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...
Aug 12, 2019 0
LEGEND ,
Aug 12, 2019

Copy link to clipboard

Copied

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,

^ _ ^

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...
Aug 12, 2019 0
Adobe Community Professional ,
Aug 12, 2019

Copy link to clipboard

Copied

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, 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...
Aug 12, 2019 1