Creating masks across browsers

Question

I see that there are ways to do this in webkit browsers, but I don't see ways to do it in others. Is this simply a feature that hasn't been implemented in all the browsers?

I don't have standard images, so clip won't work. I may have to render everything ahead of time, which will make my work exponential, but you deal with what you have, right?

I'd also want to be able to activate this stuff from javascript. :/

Thanks if you can provide support.

Admin · Accepted Answer

Just off the top of my head - and without an actual problem from you for us to solve - here's a possible way to accomplish what you want...

HTML

<div class="myImage">

    <img src="path_to_image" title="Lorem ipsum" alt="Dolar sit amet" />    

    <div class="myMask">
    </div><!-- /myMask -->

</div><!-- /myImage -->

CSS

.myImage {
    position: relative;
}

.myMask {
    position:absolute;
    top: 0;
    left: 0;
    background-color: transparent;
    background-image: url('path_to_masking_image');
}

Alternatively, use an <img /> inside the myMask div, and remove the background-image property from the CSS.

The way it's currently laid out, you would need two images: the image itself in all its glory, and the mask.

The way you would accomplish the 'masking effect' is to have the mask image be a static solid color that matches background of the container its in - ie white, black, whatever.

Kapeesh? This would work in all browsers, which is what you asked for. The background-clip property has -webkit and -moz selectors, but is not supported in browsers like IE or (to my knowledge) Opera.

Athoxx · Answer

Here are my 2 cents, if it is indeed CSS Sprites you are after.

<head>
<style type="text/css"><!--
#imagemask {
    background-image: url(image.png);
    background-repeat: no-repeat;
    background-color: transparent;
    height: 40px;
    width: 40px;
}
.mask1 { background-position: top left; }
.mask2 { background-position: 0 40px; }
.mask3 { background-position: 0 80px; }/* And so on, however your image file is 'layed out' */
--></style>
<script type="text/javascript">
    function mask1(){ document.getElementById("imagemask").setAttribute("class", "mask1"); }
    function mask2(){ document.getElementById("imagemask").setAttribute("class", "mask1"); }
    function mask3(){ document.getElementById("imagemask").setAttribute("class", "mask1"); }
</script>
</head>

<body>
    <a href="#" onclick="javascript:mask1()">mask 1</a>
    <a href="#" onclick="javascript:mask2()">mask 2</a>
    <a href="#" onclick="javascript:mask3()">mask 3</a>
    <div id="imagemask" class="mask1"></div>
</body>

We define the div#imagemask to contain 1 image file as a background and set it to not repeat around, as that would sort of defy the point.
We define how to "move around" the image inside the "mask" (div) with fixed width and height.
As a reference, I've then added the javascript you need to switch between the masks on the fly. I wrote that in about 10 seconds, you could probably write something a little more elegant if you want.
Add the links with onclick= events
Finally, add the div#imagemask to the body.

Given that I don't know the width or height of your image file or it's target masking, you'll have to do some substantial edits to this code. But you get the idea :)

Creating masks across browsers

Tags:

javascript

css

image

mask

Brian K.

2 Answers

Athoxx

Recent Activity

Donate For Us

Creating masks across browsers

Tags:

javascript

css

image

mask

Brian K.

2 Answers

Athoxx

Related questions

Recent Activity

Donate For Us