I have <div>Some text</div>, and i want to make it unclickable (i want elements that under that div to be selected instead this div), unselectable (so user couldn't select text inside this div), but visible... is it possible for IE6 + IE7 + IE8 + IE9?
Update
I just want to render some text on top of picture, but i want picture to be the only one who can catch mouse events.. so i want text to be rendered, but not involved in mouse events at all..
Try overlaying the image and text with another div (named capturebox in my example) and capture mouse events on that.
In order for capturebox to really capture events in IE, it must have a background color set. To make it transparent, I give it an opacity of 0:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
function captureclick(event) {
alert('capurebox');
}
</script>
<style>
.imgbox {
position: absolute;
top: 0px;
left: 0px;
}
.imgbox img {
width: 200px;
height: 200px;
}
.imgbox p {
cursor: default;
position: absolute;
top: 50px;
left: 50px;
}
.capturebox {
filter: alpha(opacity=0);
background-color: white;
height: 200px;
width: 200px;
position: absolute;
left: 0px;
right: 0px;
}
</style>
</head>
<body>
<div class="imgbox">
<img src="yourimage.jpg"/>
<p>Some text</p>
<div class="capturebox" onclick="captureclick(event)"></div>
</div>
</body>
</html>
You can disable your text by setting the unselectable attribute <p unselectable="on"> and setting the CSS property -moz-user-select: none;
Assuming your text is inside a <p> you can trigger a click to the image when p is clicked on.
$("p").click(function() {
$(this).parent().find('img').trigger('click')
});
$('img').click(function() {
alert('image clicked');
})
Here's a working example (at least in Chrome and IE6, can't speak for IE7-9) using Raphael to render the text on top, and a little jQuery to route events appropriately.
(Gotta love marsupials!)
I was surprised to find that the click event pass-through worked in VML in IE6! Also, the VML is not selectable by default, which in this case is nice.
The starting markup is just <img alt="the text you want to show" />, so it's a pure JS enhancement.
This is basically the SVG-based equivalent of the canvas-based solution proposed by @Eldar.
var element = document.getElementById('content');
element.onselectstart = function () { return false; } // ie
element.onmousedown = function () { return false; } // mozilla
Try this
Could you just place a clear image on top?
You can use canvas to put text ontop of image. Sure HTML5 is not working for IE6 but you can use http://code.google.com/p/explorercanvas/ googles library to emulate it there.
