marking a rectangle over an image [Archive] - HTML Forums - Free Webmaster Forums and Help Forums

View Full Version : marking a rectangle over an image

jasongr

06-06-2005, 08:30 PM

Hello

I am displaying an image in the browser using the <img> tag
When the mouse is over the image, I change its style to crosshair

I would like to allow the user to mark a rectangle ontop of the image by letting him press the mouse button, drag it across the image and then release it.
The first coordinate where the mouse is clicked will be the rectangle first corner and the coordinates where the mouse button is released will be the opposite corner

Is this sort of thing possible?
I thought about rendering the rectangle using layers, with absolute position on top of the image

I also would like to show the rectangle that the user is rendering as the mouse is moving and not only after the mouse button is released

The problem is also that once the user presses the mouse button and drags the mouse, the cursor changes from crosshair. Can I control this behaviour?

any help or insight will be appreciated

tarundhillon

06-07-2005, 08:57 AM

make use of the onmousemove event. Check for coordinates and then change the cursor according.. If you are not able to do then share the code .. people will be able to help you better

Jon Hanlon

06-07-2005, 06:43 PM

Browsers aren't really designed to do this. It'd be a heck of a lot of work and it probably wouldn't function very well anyway.
What's the purpose of the bounding rectangle anyway? Best think of another way.

coothead

06-07-2005, 06:57 PM

Hi there jasongr,

try this working example, it may give you some ideas.
<!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" xml:lang="en" lang="en">
<head>
<title>mouseover image position</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<base href="http://coothead.homestead.com/files/"/>
<style type="text/css">
/*<![CDATA[*/
body {
background-color:#000;
font-family:verdana,arial,helvetica,sans-serif;
font-size:16px;
color:#fff;
}
#instr {
width:360px;
margin:30px 0px 0px 300px;
text-align:center;
}
#myimage {
position:absolute;
left:300px;
top:100px;
cursor:crosshair;
background-image:url(banana.jpg);
width:360px;
height:280px;
border:solid 1px #fff;

}
#drawDiv {
position:absolute;
z-index:1;
cursor:crosshair;
background-image:url(apple.jpg);
border:1px dotted #0f0;
display:none;
}
/*//]]>*/
</style>

<script type="text/javascript">
//<![CDATA[
var obj;
var n=0;
var x;
var y;
var tempx;
var tempy;

function ShowCoords() {
obj=document.getElementById("drawDiv").style;
if(n==1) {
return;
}
obj.display="block";
if(document.all) {
x=event.offsetX
y=event.offsetY
obj.left=x+300+"px";
obj.top=y+100+"px";
tempx=x;
tempy=y;
document.onmouseup=function() {
n=1;
}
}
else {
obj.left=x+"px";
obj.top=y+"px";
tempx=x;
tempy=y;
document.onmouseup=function() {
n=1;
}
}
}

document.onmousemove=function (event) {
if(!event) {
event=window.event;
}
x=event.clientX;
y=event.clientY;
}
function drawDiv() {
obj=document.getElementById("drawDiv").style;
if(n==1) {
return;
}
if(document.all) {
obj.width=x-tempx-300+"px";
obj.height=y-tempy-100+"px";
document.onmouseup=function() {
n=1;
}
}
else {
obj.width=(x-tempx)+"px";
obj.height=(y-tempy)+"px";
document.onmouseup=function() {
n=1;
}
}
}
//]]>
</script>

</head>
<body>

<div id="instr">Hold mouse down to start, then drag to the right, mouse up to end</div>

<div id="drawDiv"></div>

<div id="myimage" onmousedown="ShowCoords();" onmousemove="drawDiv()">

</div>

</body>
</html>

IE 6 shows a script error :supereek: but it works, nevertheless, in that browser.
As I only made this today, I may find out the reason in due course.
No problems with Firefox or Opera though. :D

jasongr

06-08-2005, 12:10 PM

Thanks for the example

I will study it and try to use it well