• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

link triggered image overlay

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

320

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
community guidelines
Community Expert ,
Aug 12, 2019 Aug 12, 2019

Copy link to clipboard

Copied

You will need an onclick event as the trigger.

Wappler, the only real Dreamweaver alternative.

Votes

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
community guidelines
LEGEND ,
Aug 12, 2019 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,

^ _ ^

Votes

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
community guidelines
Explorer ,
Aug 12, 2019 Aug 12, 2019

Copy link to clipboard

Copied

AP DIVs are no longer available in DW CC 19.2

Votes

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
community guidelines
LEGEND ,
Aug 12, 2019 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,

^ _ ^

Votes

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
community guidelines
Community Expert ,
Aug 12, 2019 Aug 12, 2019

Copy link to clipboard

Copied

LATEST

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
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines