Hi Laphan
This might be double posted. I replied but the reply never showed up on
my newsreader so I'm posting again with an afterthought.He re is the post and
I hope it helps. I'll keep an eye on this thread and your name in case you
need more help.
Jimbo
I am not promoting Microsloth or any of it's products but...AFAIK IE5.5
alows images and text to be rotated skewed and resized through the filter
and style objects
<script type = "text/javascript">
// for resizing where var is any percentage. (no fractions or decimals for
safety)
currEl.style.zo om=var+'%';
// for rotation
var deg2radians = Math.PI * 2 / 360;
currEl.style.fi lter = "progid:DXImage Transform.Micro soft.Matrix(siz ingMethod
= 'auto expand')";
// I use onmousemove to trap event.clientX/Y to produce 'rotation' values
so the user can rotate or skew with a mouse drag
document.onmous eover = makeRotationPar am;
var lastX = 0, lastY = 0;
function makeRotationPar am() {
var x = event.clientX, y = event.clientY;
// compute differences in current and last mouse position according to your
needs and put it in place of the '?' in the following line
var aValue = ?;
lastX = x;
lastY = y;
rotateObj(aValu e);
}
function rotateObj(rotat ion) {
if (rotation >= 360) rotation = 0;
var rad = rotation * deg2radians ;
var costheta = Math.cos(rad);
var sintheta = Math.sin(rad);
currEl.filters. item(0).M11 = costheta;
currEl.filters. item(0).M12 = -sintheta;
currEl.filters. item(0).M21 = sintheta;
currEl.filters. item(0).M22 = costheta;
}
</script>
If you fiddle with the filter params (M11...) and/or the rad/sin/cos values
and/or the signs(+,-) you'll find the skew and more. I can't remember or
find the source of this code. Sorry! The above is a variation of a post in
this group some time ago.
<afterthought >
I think I mentioned that you can use the CSS borders prop/att to put frames
around your photos that will skew together with the photo. The example uses
'double' but there are others. (solid, groove, inset, outset, ridge, double,
IE6-> dotted, dashed).
examples
declare it inline with style obj is easiest but might not work in all MS
agents
<img src="a.jpg" style="border:3 px blue double;" ...etc>
give the image an id and add it to your style sheet
<img ID="my.jpg" src="a.jpg" ...etc>
<style type="text/css">
#myJpg {border:3px blue double;}
</style>
script it (notice that this example uses the name attribute and the above
uses the id)
<img NAME="my.jpg" src="a.jpg" ...etc>
<script type="text/javascript">
// with name of img
document.images['myJpg'].style.border = "3px blue double" ; // safer
// with id of img *some versions of IE might want the reference from the
document.all collection or document.getEel ementById()
myJpg .style.border = "3px blue double" ;
</script>
Finally watch out for word wrap on my comments if you copy any of this
directly into your page. I'll also check my archive for an example if you
don't get the result you want.
Jimbo
