Photoshop Question posted in
The official user guide can be found here.

Lay a .png image partially over (on top of) menu – Photoshop

I have an accordion menu that I have tweaked to suit my needs. My last stumbling block is that I have an image (see attached image) of a FedEx Courier that I need to lay on top of the menu and yet still allow users to click through it to activate (access) the accordion menu. The image is a separate image that is set to the desired alpha as created in Photoshop. The file is merely a snapshot of how it would look if it was the way I wanted it.

If this is even possible, what code would I use and exactly where would I place it? If in the CSS file, where does it go and between which lines?

Original full size Image file
site page

Tags:

2

Answers


  1. 0

    You can apply the css:

    pointer-events: none;

    to the image above the links.

    See fiddle https://jsfiddle.net/4zgcrkyz/

    Login or Signup to reply.
  2. 0

    pointer-events: none; is a suitable solution if you do not need to care about IE < 11. More info on compatibility here.

    Alternatively you can use elementFromPoint() which has compatibility IE > 5.5

    The following trick allow you to select under your cover image without using pointer-events: none;

    https://jsbin.com/tuhotagize/edit?html,output

    Explanation:

    • At click on cover image.
    • Hide cover image temporary.
    • Get mouse coordinates.
    • Get HTML element under that mouse coordinates (so you know what under the cover).
    • Trigger click event on that HTML element.
    • Show cover image again.

    Another alternative solution to your problem, which does not include any JS is:

    • Trim your image in PhotoShop as should appear inside the menu. Use CSS background-image property on it
    • Use the courier FedEx image only as CSS background-image the body of your page.

    You can achieve the same visual effect using only CSS. 

    <!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Test</title>
    <style>
        img {
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0.4;
        }

        a {
            display: block;
            width: 300px;
            height: 20px;
            background-color: greenyellow;
        }

            a:hover {
                background-color: #FF0000;
            }
    </style>
    <script>
        window.app = {
            show: function () {
                document.getElementById('cover').style.display = '';
            },
            hide: function () {
                document.getElementById('cover').style.display = 'none';
            },
            event: null,
            start: function () {
                document.getElementById('cover').addEventListener('click', function (event) {
                    this.hide();
                    this.event = event;
                    var target = document.elementFromPoint(event.pageX, event.pageY);
                    this.show();
                    target.click();
                }.bind(this));

                var links = document.querySelectorAll('a');
                for (var i = 0, len = links.length; i < len; i++) {
                    links[i].addEventListener('click', function (event) {
                        alert('click on ' + event.target.id);
                    }.bind(this));
                }

            }
        };

    </script>
</head>
<body onload="window.app.start();">
    <img id="cover" src="http://placehold.it/200x200" />
    <a id="a1">link</a>
    <a id="a2">link</a>
    <a id="a3">link</a>
    <a id="a4">link</a>
    <a id="a4">link</a>
    <a id="a6">link</a>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search