The example in action

Why the name "jfirst"?

J. - Javascript
F. - Free
I. - Image
R. - Rectangular
S. - Selection
T. - Tool

What is what?

• Container - the element that contains the source image.
• Selection - the rectangle that shows which part of the source image is selected.

How does it work? (in response to: "I click on the image and move the mouse elsewhere while holding the button - but nothing happens!")

Click on the image and release the button. Then move the mouse - you should see a rectangular selection following your mouse. Click again to stop selecting. This interface was chosen in order to avoid side-effects in firefox.

Source code

Style

#container {
	/* crossbrowser opacity.
	Actually, it would be be better to use 
	conditional comments for MSIE */
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);
	opacity:.3;
	/* put a border arounf the image */
	border:1px solid black;
}
.jfirst-selection {
	/* put a border arond the selection-area.
	Note: border-width should be the same as 
	for the container element above */
	border:1px solid lightgreen;
}
		

Notes on styling

• In order to make some use of jFirst, you will need some styling. Using jFirst without any stylesheet applied may be a bit confusing: you won't see the promised selection rectangle. However, once you apply a simple CSS rule to the container - opacity: .3; - you should see a nice selection (the selected area will be 100% opacity while the other part of the image is 70% transparent). For MSIE, this CSS rule will differ. however.
• jFirst assigns the selection area a class name of jfirst-selection. By default, the selection does not have any borders. If you need borders around the selection, you may define the corresponding property in your stylesheet. However, to avoid image bifurcation, you will have to be sure that the container element has borders of the same width.
• By default, selection area uses source image as background - so that it shows fully opaque over the transparent container - which is what most of people will actually want, I think. However, there are cases when such behavior is no good. For instance, you want to select a part of an image which is very large, and you.
• The container element is not assigned any class name by jFirst. Your application should take care of this. However, some styling is applied to container - namely background settings and dimensions.

Markup

<!-- This is where image will be shown -->
<div id="container"></div>

<!-- This is the status line with HTML inputs - 
	so that we could submit information to the server -->
<div id="status">
	Current selection: 
	<br />
	x=<input type="text" readonly="true()" 
		name="crop_x" id="crop_x" value="0" />
	y=<input type="text" readonly="true()" 
		name="crop_y" id="crop_y" value="0" />
	width=<input type="text" readonly="true()" 
		name="crop_w" id="crop_w" value="0" />
	height=<input type="text" readonly="true()" 
		name="crop_h" id="crop_h" value="0" />
</div>

And, finally, the script

<script>
new jFirst("tux.png", 200, 283)./* Create jFirst instance */
	/* Bind HTML input elements */
	bindXInput('crop_x').bindYInput('crop_y').
	bindWidthInput('crop_w').bindHeightInput('crop_h').
	render("container");/* Render jFirst GUI */
</script>

Contact me

Questions, wishes etc: crocodile2u at yandex dot ru