Help - Search - Members - Calendar
Full Version: Changeing the angle of image in html
HTMLHelp Forums > Web Authoring > General Web Design
starmburst
May 16 2007, 02:26 PM
Hello all, I'm a very novice page maker. I'm currently tring to rotate, or change the angle of an image to put in my code, I've been looking for it all day and cant find any thing to lead me to learn how to do this! sad.gif
pandy
May 16 2007, 03:46 PM
HTML can't do that. Is this some kind of dynamic effect you are after? Should the image rotate in answer to some user action? Because otherwise you are better of rotating it in an imagew editor to start with.

If you want to rotate it on the page, so to speak, I think you have to use JavaScript.
http://www.google.com/search?q=javascript+rotate+image
starmburst
May 17 2007, 07:57 AM
Thanks, if can figure out how to work the java script, that is what I would like do, I just want something to look different, but I want to use the altered images as links, so I just cant make them on photo editing soft ware and us as a background. How ever if there is another way please divulge!
Frederiek
May 17 2007, 10:49 AM
Maybe you're looking for this: http://www.swfir.com/?
starmburst
May 18 2007, 10:46 PM
I've have tried, several times to make these work to no avail, here is a copy of my scrip, and a link the working site then mine where it dosnt work!! Any help would be appreaicted. The second page that is mine that dosnt work, the rotatable image is at the bottom of the page, dark helmet from spaceballs.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<!-- Created on May 4, 2007 11:32:06 PM -->

<html>
<head>
<title>
Family
</title>
<meta name="GENERATOR" content="Arachnophilia 5.2">
<meta name="FORMATTER" content="Arachnophilia 5.2">
</head>


<HTML>
<HEAD>
<TILE><div align="center"><font size="+2">For the Family</font></div></TITLE>


<body background="myfamily2.jpg">









<center><TD><font size="+2">Hello I'm making this website for me to show off my family! I've got a beautiful baby son, that I want to immortalize on the web, and it will be easy for the rest of my family to see him because most of them live out of state!</TD></font>
<BR>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div align="right"><font size="+2">For those of you who have forgot <br>how we started this family, this would be it! <br>The first big Kiss! </font></div>


<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<body freehomepages="SetRotation(myform.rotation.value);">




<script language=javascript type="text/javascript">
<!--
i = 0;
deg2rad = Math.PI * 2 / 360;

function SetRotation(deg) {

rad = deg * deg2rad;

costheta = Math.cos(rad);
sintheta = Math.sin(rad);

mydiv.filters.item(0).M11 = costheta;
mydiv.filters.item(0).M12 = -sintheta;
mydiv.filters.item(0).M21 = sintheta;
mydiv.filters.item(0).M22 = costheta;

}
//-->
</script>

<form id="myform" name="myform">
Enter the number of degrees you want to rotate the image:
<input id="rotation" type="text" value=5 style="width:100px">
<input type="button" value=rotate onclick="SetRotation(myform.rotation.value);">
<input id="M11" type=hidden value=1>
<input id="M12" type=hidden value=0>
<input id="M21" type=hidden value=0>
<input id="M22" type=hidden value=1>
</form>
<div id="mydiv" class="displayretainer">
<p>
<img src="dkhlmt.jpg" height="100" width="100" alt="Demonstration image"> Freely rotating image
</p>
</div>





</body>
</html>
The free rotating script
(working) http://hem.fyristorg.com/g-force/test/rotate.htm
(mine not working)http://www.powow.com/starmburst1/family.html
Christian J
May 19 2007, 12:54 PM
QUOTE(starmburst @ May 19 2007, 05:46 AM) *

The free rotating script
(working) http://hem.fyristorg.com/g-force/test/rotate.htm

How did you find that page? wacko.gif

To make the script work you must also add the CSS for the CLASS "displayretainer".
pandy
May 19 2007, 04:06 PM
QUOTE(Christian J @ May 19 2007, 07:54 PM) *

How did you find that page? wacko.gif


IPB Image
starmburst
May 19 2007, 10:11 PM
QUOTE(Christian J @ May 19 2007, 01:54 PM) *

QUOTE(starmburst @ May 19 2007, 05:46 AM) *

The free rotating script
(working) http://hem.fyristorg.com/g-force/test/rotate.htm

How did you find that page? wacko.gif

To make the script work you must also add the CSS for the CLASS "displayretainer".

I took the reply from pandy with google search, and the bottom one on the first was another forum, and it was on there.. and how do I "To make the script work you must also add the CSS for the CLASS "displayretainer"." Sorry I'm still really new to java adn css!
Christian J
May 20 2007, 10:07 AM
QUOTE(starmburst @ May 20 2007, 05:11 AM) *

how do I "To make the script work you must also add the CSS for the CLASS "displayretainer"." Sorry I'm still really new to java adn css!

See http://htmlhelp.com/reference/css/ tongue.gif
starmburst
May 20 2007, 09:16 PM
wacko.gif I'm sorry this is making sense to me, unfortunately I need more guidance than that. I'm sorry feel pretty dumb right now, but I cant figure it out! angry.gif sad.gif
pandy
May 20 2007, 11:13 PM
Sorry. I didn't realize these scripts were IE only. blush.gif
Christian J
May 21 2007, 06:40 AM
There was a lot of junk in that old page, here's an improved one (assuming the image is 200px wide). You don't need any additional CSS for this version:

CODE
<p id="rotating">
<img src="dog.jpg" alt="Demonstration image" width="200">
Rotating image
</p>

<p>
Enter the number of degrees (positive or negative) you want to rotate the image:
<input type="text" id="rotation" value="5">
<input type="button" value="Rotate" onclick="rotate(document.getElementById('rotation').value);">
</p>

<script type="text/javascript">
var rotating=document.getElementById('rotating');
rotating.style.width="200px";
rotating.style.height="200px";
rotating.style.filter="progid:DXImageTransform.Microsoft.Matrix(M11='1.0', sizingmethod='auto expand')";
var deg2rad = Math.PI * 2 / 360;
function rotate(deg)
{
    var rad = deg * deg2rad;
    var costheta = Math.cos(rad);
    var sintheta = Math.sin(rad);
    rotating.filters.item(0).M11 = costheta;
    rotating.filters.item(0).M12 = -sintheta;
    rotating.filters.item(0).M21 = sintheta;
    rotating.filters.item(0).M22 = costheta;
}
rotate(5);
</script>


EDIT: Changed some confusing parts in the example.
starmburst
May 21 2007, 10:09 PM
Thank you so much, you guys have been more than so helpful with this, however I have one more qaundry to pick your brains with I would like to have multiple images rotated to angles on the same page, with them being links to other pages, but the propblem I come into is that it only reconizes the first script to take orders from, and dosnt even reconized the second image with rotation. Once again here is the code, and a link to it. They are at the bottom, again space ball themes.
http://www.powow.com/starmburst1/family.html
<html>
<head>
<title>
Family
</title>
<meta name="GENERATOR" content="Arachnophilia 5.2">
<meta name="FORMATTER" content="Arachnophilia 5.2">
</head>


<HTML>
<HEAD>
<TILE><div align="center"><font size="+2">For the
Family</font></div></TITLE>
<body background ="myfamily2.jpg">
<center><TD><font size="+2">Hello I'm making this website for me to show off
my family! I've got a beautiful baby son, that I want to immortalize on the
web, and it will be easy for the rest of my family to see him because most
of them live out of state!</TD></font>
<BR>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div align="right"><font size="+2">For those of you who have forgot <br>how
we started this family, this would be it! <br>The first big Kiss!
</font></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a href="spaceballs.html"><img id="rotator" img src="dkhlmt.jpg" alt="Demonstration image"height="200"width="200"align="right",><img id="rotating" img src="schwartz.jpg" alt="Demonstration image"height="200"width="200"align="left">
<script type="text/javascript">
var sample=document.getElementById('rotating')
sample.style.width="175px";
sample.style.height="200px";
sample.style.filter="progid:DXImageTransform.Microsoft.Matrix(M11='1.0',sizingmethod='auto expand')";
deg2rad = Math.PI * 2 / 360;
function rotate(deg)
{rad = deg * deg2rad;
costheta = Math.cos(rad);
sintheta = Math.sin(rad);
rotating.filters.item(0).M11 = costheta;
rotating.filters.item(0).M12 = -sintheta;
rotating.filters.item(0).M21 = sintheta;
rotating.filters.item(0).M22 = costheta;}
rotate(50);
var sample=document.getElementById('rotator');
sample.style.width="200px";
sample.style.height="200px";
sample.style.filter="progid:DXImageTransform.Microsoft.Matrix(M11='1.0',sizingmethod='auto expand')";
deg2rad = Math.PI * 2 / 360;
function rotate(deg)
{rad = deg * deg2rad;
costheta = Math.cos(rad);
sintheta = Math.sin(rad);
rotating.filters.item(0).M11 = costheta;
rotating.filters.item(0).M12 = -sintheta;
rotating.filters.item(0).M21 = sintheta;
rotating.filters.item(0).M22 = costheta;}
rotate(-50);
</script>
</body>
</html>
Darin McGrew
May 21 2007, 11:01 PM
I recommend that you start by fixing the HTML errors and CSS errors reported by the online tools.
Christian J
May 22 2007, 04:41 AM
QUOTE(starmburst @ May 22 2007, 05:09 AM) *

I would like to have multiple images rotated to angles on the same page,

If you want individual controls for every image you might copy the whole package, but you must use unique IDs and function names.

QUOTE
with them being links to other pages,

You could simply add a link around the image.

starmburst
May 22 2007, 10:03 AM
Is the bolded part the function name? wacko.gif

<script type="text/javascript">
var sample=document.getElementById('rotating');
sample.style.width="200px";
sample.style.height="200px";
sample.style.filter="progid:DXImageTransform.Microsoft.Matrix(M11='1.0', sizingmethod='auto expand')";
deg2rad = Math.PI * 2 / 360;
function rotate(deg)
{
rad = deg * deg2rad;
costheta = Math.cos(rad);
sintheta = Math.sin(rad);
rotating.filters.item(0).M11 = costheta;
rotating.filters.item(0).M12 = -sintheta;
rotating.filters.item(0).M21 = sintheta;
rotating.filters.item(0).M22 = costheta;
}
rotate(5);
Niente
Mar 16 2009, 04:01 PM
You could try this universal javascript rotator (rotate an image by an arbitrary angle, it works in IE7 & FF3): biggrin.gif

CODE

<html>
<head>
<!--
**** Universal JavaScript Image Rotator v1.1 (16-03-2009)
//-->

<script type="text/javascript">
<!--
//******************** Image parameters *******************
imagename='example.jpg'
xsize=200
ysize=100
//*********** nothing to configure below this line ********
//-->
</script>

</head>
<body style="margin:20px">
<H1>Universal JavaScript Image Rotator v1.0 (14-03-2009)</H1>
<div id="container" style="overflow:hidden">
<script type="text/javascript">
<!--
    canvsize=Math.round(Math.sqrt(xsize*xsize+ysize*ysize)); //I need a square canvas for complete rotation
    document.write('<canvas id=canvas width='+canvsize+' height='+canvsize+'></canvas>')
    document.write('<div id="canvas2"><img id=im width='+xsize+' height='+ysize+'></div>')
//-->
</script>

<script type="text/javascript">
<!--
ie=0
var browser=navigator.appName;
if (browser=='Microsoft Internet Explorer') ie=1;

document.getElementById("container").style.width=canvsize+'px'
document.getElementById("container").style.height=canvsize+'px'
//document.getElementById("canvas").style.width=canvsize+'px'
//document.getElementById("canvas").style.height=canvsize+'px'
document.getElementById("canvas2").style.width=xsize+'px'
document.getElementById("canvas2").style.height=ysize+'px'
document.getElementById("canvas2").style.marginLeft=(canvsize-xsize)/2+'px'
document.getElementById("canvas2").style.marginTop=(canvsize-ysize)/2+'px'

var browser=navigator.appName;
if (ie==1) {
    document.getElementById('im').src=imagename;
    var canvas2=document.getElementById('canvas2');
    canvas2.style.filter="progid:DXImageTransform.Microsoft.Matrix(M11='1.0', sizingmethod='auto expand')";
    }
else {
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    var img1 = new Image();
    img1.src = imagename;
    img1.onload=function() { ctx.drawImage(img1, (canvsize-xsize)/2, (canvsize-ysize)/2, xsize, ysize);}
}

function rotate(deg){
    rad = deg*Math.PI/180
    if (ie==1) rotate_ie(rad,deg)
    else rotate_ff(rad)
}

function rotate_ff(rad) {
    ctx.clearRect(0,0,canvsize,canvsize);
    ctx.save();
    ctx.translate(canvsize/2,canvsize/2);
    ctx.rotate(rad);
    ctx.drawImage(img1, -xsize/2, -ysize/2, xsize, ysize);
    ctx.restore();
}

function rotate_ie(rad)
{
    canvas2.filters.item(0).M11 = Math.cos(rad);
    canvas2.filters.item(0).M12 = -Math.sin(rad);
    canvas2.filters.item(0).M21 = Math.sin(rad);
    canvas2.filters.item(0).M22 = Math.cos(rad);
    canvas2.style.marginLeft=((canvsize-canvas2.offsetWidth)/2)+'px'
    canvas2.style.marginTop=((canvsize-canvas2.offsetHeight)/2)+'px'
}
//-->
</script>
</div>

<p>
Enter the number of degrees (positive or negative) you want to rotate the image:<BR>
<input type="text" id="rotation">
<input type="button" value="Rotate" onclick="rotate(document.getElementById('rotation').value);">
</p>


</body>
</html>

domaincrossroad
Mar 31 2009, 10:55 AM
Niente... this is a great post and exactly what I was looking for. I've been scouring the web for the past few days and could not figure out how to do this accross browsers. Everything I was finding was IE related and I also could not figure out how to make the unused portion of the canvas transparent. Great Post!!!
evra
Apr 9 2009, 06:22 AM
Hi, this is really usefull! I wanna use it in photogallery. Cool few pics that haotic rotating and then - onmouseover they set bigger - u know that affect. I need the script in separate file and that I could use it with a few pics! I'm so happy I found u!! Please advise how to do!!!
And Thanks so much that u are!
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2010 Invision Power Services, Inc.