链接图像但显示另一个？

Question

I'm trying to display an image on a website that has different color based on the website Color Scheme... I need to link an alternate image instead of this image in both html and browser>right-click, so that although this alternate-colored image is displayed user gets access to only the standard alternate image.

For example, the color scheme of the website is : dark grey. So image image has to be in : white. But the standard color of the image is: dark blue. So I had to change the image color to : light blue. So, instead of showing the standard colored image, I'm showing an image that's been altered according to the new dark color scheme.

Although I cannot alter the stylesheet, I need to add some css to the html page's "style" tags to be able to display this new image, and link the user to the standard image.

My html for the div is:

<div class="picture">
    <div class="picture-div">
        <a class="picture-link" href="image_info.html">
            <img class="picture-img" src="img.png">
            <span class="picture-title">
                <span class="picture-title-div">Title for the Image</span>
            </span>
        </a>
    </div>
</div>

The image is placed under a.picture-link , with class="picture-img" . CSS as per Chrome's Inspect Element is:

elements * {
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: baseline;
background: 0 0;
}

.picture {
clear: both;
float: left;
height: 100%;
position: relative;
z-index: 1;
}

.picture-div {
font-size: 0;
}

.picture-link {
display: block;
height: 100%;
overflow: visible;
color: #666;
}

.picture-img {
display: block;
max-width: 100%;
}

img {
border: 0;
-ms-interpolation-mode: bicubic;
max-width: 100%;
height: auto;
}

.picture-title {
line-height: inherit;
}

.picture-title {
display: none;
font-size: 30px;
line-height: 30px;
white-space: normal;
}

I cannot alter the main stylesheet, cause I've minified it. Although, I'm adding required alterations in a separate stylesheet, so, if the solution is via CSS, I can only add the solution to my separate stylesheet, not to the main stylesheet.

My problem, as discussed above is that I need to display an image, while restricting user to an alternate image only. So, if an image is downloaded/linked, right-clicked, or anything that could duplicate the image elsewhere, it must be an alternate image and not the image displayed.

I was thinking of add a z-index to both the images, while keeping the image with positive z-index to opacity:0; . That way if the image is accessed, only the invisible standard image will be accessed, preventing link to the alternate image.

I tried the following options, but these methods didn't help.

a.picture-link { position: absolute }

Image vanishes from the view, and none of the image is visible.

Also, tried this method :

.newclass {
    background:url(2.jpg) no-repeat;
    display:inline-block
}
.newclass img {
    position:relative;
    z-index:-1
}

I'm trying to look for solutions based on either jQuery , CSS , javascript . Although, my preference is CSS, cause css is supported by most browsers.

Please could someone provide help? Thanks!

Answer 1

Working fiddle using CSS position & opacity:

.image{position:relative}
.png-over{position:absolute; top:0; left:0;

opacity: 0;
    filter: alpha(opacity=0); /* For IE8 and earlier */
}

http://jsfiddle.net/jNpaH/67/