用javascript在图像上拖动和绘制矩形的解决方案
经过几个小时的搜索和编码,我终于有了在图像上拖动和绘制矩形的代码.我从一篇两年前的帖子中获得了下面粘贴的大部分代码,并对其进行了一些修补工作.现在它同时支持Firefox和IE7.但在IE7上,它有一个小缺陷……但仍然可以工作.一旦我有了答案,我会尽快发布补丁.给你们,伙计们
选择 | 换行 | 行号
- <HTML>
- <HEAD>
- <META http-equiv=imagetoolbar content=no>
- <TITLE>
- </TITLE>
- <STYLE>
- #rubberBand {
- position: absolute;
- visibility: hidden;
- width: 0px; height: 0px;
- border: 2px solid red;
- }
- </STYLE>
- </HEAD>
- <BODY>
- <img name="myImage" id="myImage" src="VK.jpg" height=400
- width=400>
- <DIV ID="rubberBand"></DIV>
- <SCRIPT>
- var IMG;
- function startRubber (evt) {
- if (document.all) {
- // IE
- var r = document.all.rubberBand;
- r.style.width = 0;
- r.style.height = 0;
- r.style.pixelLeft = event.x;
- r.style.pixelTop = event.y;
- r.style.visibility = 'visible';
- IMG.ondragstart = cancelDragDrop; // otherwise IE will try to drag the image
- }
- else if (document.getElementById) {
- // firefox
- evt.preventDefault();
- var r = document.getElementById('rubberBand');
- r.style.width = 0;
- r.style.height = 0;
- r.style.left = evt.clientX + 'px';
- r.style.top = evt.clientY + 'px';
- r.style.visibility = 'visible';
- r.onmouseup = stopRubber;
- }
- IMG.onmousemove = moveRubber;
- }
- function moveRubber (evt) {
- if (document.all) { // IE
- var r = document.all.rubberBand;
- r.style.width = event.x - r.style.pixelLeft;
- r.style.height = event.y - r.style.pixelTop;
- }
- else if (document.getElementById) { // firefox
- var r = document.getElementById('rubberBand');
- r.style.width = evt.clientX - parseInt(r.style.left);
- r.style.height = evt.clientY - parseInt(r.style.top);
- }
- return false; // otherwise IE won't fire mouseup :/
- }
- function stopRubber (evt) {
- IMG.onmousemove = null;
- }
- function cancelDragDrop()
- {
- window.event.returnValue = false;
- }
- IMG = document.getElementById('myImage');
- IMG.onmousedown = startRubber;
- IMG.onmouseup = stopRubber;
- </SCRIPT>
- </BODY>
- </HTML>
--由IAM_Clint编辑:感谢您的帖子,可能会将它的一个例子的链接放在行动中.