Drag/resize images
Walter Zorn's Drag & Drop for Images and Layers permits you move web page stuff around. You can also resize images.
To move something, LEFT MOUSE CLICK and drag.
To resize an image, hold down the SHIFT key and pull the edge of the image.
Note that you can interrogate the items before and after movement and get their current coordinates.
Bow wow Huskies!
<script type="text/javascript">
function showCoors()
{
var allImgs = document.getElementsByTagName("img");
for (var i = 0; i < allImgs.length; i++)
{
var attrs = allImgs[i].attributes;
var name = attrs["name"].nodeValue;
alert(name + " " +
" Width: " + dd.elements[name].w +
" Height: " + dd.elements[name].h +
" X pos: " + dd.elements[name].x +
" Y pos: " + dd.elements[name].y);
}
}
function showDIVCoors()
{
var thisDIV = document.getElementById("myDiv")
{
var attrs = thisDIV.attributes;
var name = attrs["id"].nodeValue;
alert(name + " " +
" Width: " + dd.elements[name].w +
" Height: " + dd.elements[name].h +
" X pos: " + dd.elements[name].x +
" Y pos: " + dd.elements[name].y);
}
}
</script>
...
<body>
<!-- Place this script tag right after the <body> tag -->
<script type="text/javascript" src="wz_dragdrop.js"></script>
...
<input type="button" value="All image info" onclick="showCoors()" style="margin-right: 10px">
<input type="button" value="Bow wow Huskies!" onclick="showDIVCoors()">
<br><br>
<img src="cheer1.jpg" name="cheer1" width="250" height="167">
<br><br>
<img src="cheer3.jpg" name="cheer3" width="250" height="167">
<br><br>
<img src="cheer5.jpg" name="cheer5" width="250" height="167">
<br>
<div id="myDiv" style="position: absolute; top: 0; left: 0;
padding: 10px; border: solid medium black; background-color: yellow">
<p>Bow wow Huskies!</p>
</div>
...
<!-- Place this script tag right before the </body> tag -->
<script type="text/javascript">
<!--
SET_DHTML("cheer1"+RESIZABLE, "cheer3"+RESIZABLE, "cheer5"+RESIZABLE, "myDiv" );
//-->
</script>
</body>