将2个div和1个img组合成1个img？

Question

我想实现以下目标:

1. 在<div>元素内显示图像.
2. 使用image-server-php(image.php)来提供图像以"掩盖"图像位置.
3. 单击后,图像应该可以单击另一个链接打开.
4. 图像隐藏在sorry.gif后面,以确保用户无法"右键单击并保存图像".

以下是我的代码:

<!-- 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 --->

有没有办法可以将两个图像合并为一个,在同一个<img>元素中？

我在<img>元素中需要它,因为我prettyPhoto用于创建图库.

Answer 1

将图像隐藏在另一个图像背后是一种仅适用于非技术用户的技术.要注意这一点.

技术娴熟的用户只需浏览您页面的源代码即可.

这可以通过使用CSS来实现.你想要的是两张图片,你要提供的图片覆盖着sorry.png,透明度设置为100%.然后,sorry.png应链接到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

资源