将2个div和1个img组合成1个img？ [关闭]

Question

I want to achieve the following:

1. Display an image inside a <div> element.
2. Image is served using a image-server-php (image.php) to "mask" the image location.
3. The image should be clickable with another link opening after click.
4. Image is hidden behind a sorry.gif to make sure that the user cannot "right click and save image".

Below is my code:

<!-- IMAGE FRAME -->
<div class="img-frame">
    <!-- CLICKABLE TO TAKE TO ANOTHER PAGE --> 
    <a href="javascript: void(0)" OnClick="window.open('page1.php'); return false;" class="img-preview" title="Click here for more info" >
        <!-- COVER IMAGE TO STOP PPL DOWNLOADING IMAGES -->
        <div class="CoverImage">
            <!-- IMAGE SERVED VIA A IMAGE-SERVER-PHP -->
            <img src="image.php?f=three.jpg" class="scale-with-grid" width="300px" height="275px" />
            <div class="cover"><img src="assets/mm/sorry.gif" class="scale-with-grid"/></div>
        </div>
        <!-- END COVER IMAGE -->    
    </a>
    <!-- END CLICKABLE -->
</div>
<!-- END IMAGE FRAME --->

Is there a way I can merge the two images into one, in the same <img> element?

I need it inside the <img> element because I use prettyPhoto for gallery creation.

Answer 1

Hiding the image behind another one is a technique that will work only against non-technical users. Be aware of that.

A tech-savy user will simply browse the source code of your page.

This can be achieved by using CSS. What you want to have is two images, the one you want to serve overlayed with sorry.png with transparency set to 100%. Then the sorry.png should be linking to page1.php

.container {
    position: relative;
}
.image {
    position: absolute;
    width: 100px;
    height: 100px;
    border: 1px solid red;
}
.imageOne {
    z-index: 0;
}
.imageTwo {
    z-index: 1;
}

<div class="container">
<div class="imageOne image">
    <img src="http://placehold.it/100x100/000"></img>
</div>
<div class="imageTwo image"> <a href="page1.php">
    <img src="http://placehold.it/100x100/fff">

    </img>
    </a>
</div>

JsFiddle

Source