How to rotate an image on click

@richiejMay 12.2008

Hi,

I’ve been struggling with this for a little while now.

Basically, I’ve been trying to find a way to rotate an image by 90 degrees when clicked once. Then, when its click again, rotate it back (ie. roate by -90 degrees or rotate by 270 degrees)

Does anyone know how I could do this?

many thanks

to post a comment

JavaScript

13 Comments(s) _↴

@itchykneeMay 12.2008 — #Do you want the image to animate while it is being rotated?

@richiejauthorMay 12.2008 — #Hi, no thanks I just want to rotate it. I realise this is very basic but can't figure it out

thanks

@itchykneeMay 12.2008 — #View attached...

[upl-file uuid=2c3071b3-ca50-491d-b9fc-521022cd3afc size=13kB]rotate.zip[/upl-file]

@richiejauthorMay 12.2008 — #thanks for the code! Much appreciated

I have a slight problem though. I have incorporated the code into my application and am testing it. The image I am using it on does get rotated but when it is rotated from it normal position to the new position, the image is pratically non-visible. (See screen shots attached)

I can click where the image should be and the image rotates back fine but cant work out why the image is being obscured.

This is the html code I am using :

<div onclick="rotateme(this)" style="margin-left:20px;width:18px;height:18px;background:url('UI_delrow.GIF') no-repeat;">

</div>

I have tried experimenting with the widths/heights and padding/margins to see if it makes a difference. But so far, nothing. I have modified the method so that whatever the I set the width of the div to, I use that figure in the JV method. So, in your example, the width was 200px and the x-pos of the image was changed by a factor of -200px, so in my method I change the x-pos of the image by a factor of 18px.

any ideas?

many thanks

[upl-file uuid=77018c35-84cf-4454-ba9d-5e95ce657718 size=3kB]pic 1.JPG[/upl-file]

[upl-file uuid=23ed5751-1ff4-405d-aadc-674d77f0f03b size=2kB]pic 2.JPG[/upl-file]

@itchykneeMay 12.2008 — #see attached,

the div needs to be exactly the same size of the image, no padding margins required.

the image (background-position) needs to be shifted to the left exactly by the width of the image.

[upl-file uuid=5c01a63b-b826-403d-bfe6-9f819142c3f1 size=1kB]rotate.zip[/upl-file]

@richiejauthorMay 12.2008 — #Thanks for your reply

I can see in your test page that it works perfectly but when I try and use it in my app, I get the same problem I was having before. Its almost as off the axis upon which the image is rotating around is offset to the bottom left of the image rather than the centre of the image.

I guess I'll have to keep trying different things to see if I can fix it

thanks for your help

@itchykneeMay 12.2008 — #try opening up the image, take a look at it. Its actually 2 images joined together. Theres actually no rotating going on.. Its just shifting left & right ?

@richiejauthorMay 12.2008 — #Aha!!

Yep, that's that sorted!!

Much appreciated

@richiejauthorMay 27.2008 — #I have this sorted for IE7 but it doesn't work in in IE6, I don't have to worry about FF but I need to get this working for IE6.

In IE6, both arrows are displayed. When clicked, only the 2nd arrow is shown. When clicked again both arrows are shown again. No matter what I set the width to, both arrows are always displayed.

Any ideas how I can fix this for IE6?

thanks

@itchykneeMay 27.2008 — #Hey there,

sorry i dont have a copy of ie6 on hand at the moment. Ill check it out tomorrow from my other computer.

in the mean time, try setting the line-spacing to 0px for the style of the <div> that is acting as the container for the image. ie, style="line-spacing:0px" etc

or failing that, font-size:1px

Cheers Rob

@PEBMMay 20.2012 — #It's a nice easy code to rotate an image.

How do I rotates the image 6 times?

<!DOCTYPE html><html><head>

<meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Eksempel</title>

<script>

var rotated = false;
 
  function rotateme(self) {
   if (rotated) {
   self.style.backgroundPosition = "0px 0px";
   } else {
   self.style.backgroundPosition = "-200px 0px";
   }
   rotated = !rotated;
  }

</script>

</head>

<body>

<div onclick="rotateme(this)" style="width:200px;height:200px;background:url('images/Dice6x6.jpg') no-repeat;"></div>

</body></html>

I have a jpeg(Dice6x6.jpg') 1200x200 with 6 rotating images, but do not know how I can put them on this page.

@007JulienMay 20.2012 — #See too this page which use Raphael library

@PEBMMay 22.2012 — #Thank you very much Julien, but it is'nt what I need!

Here is my new html code.

<html lang="en">

<HEAD>

<TITLE>JavaScript - onClick</TITLE>

<LINK rel=stylesheet type=text/css href="js/style.css">

<SCRIPT text="JavaScript" TYPE="text/javascript">

function correctit(){

return true

}

window.onerror=correctit

var dragapproved=false

var z,x,y

function move(){

if (event.button==1&&dragapproved){

z.style.pixelLeft=temp1+event.clientX-x

z.style.pixelTop=temp2+event.clientY-y

return false

}

}

function drags(){

if (!document.all)

return

if (event.srcElement.className=="drag") {

dragapproved=true

z=event.srcElement

temp1=z.style.pixelLeft

temp2=z.style.pixelTop

x=event.clientX

y=event.clientY

document.onmousemove=move

}

}

document.onmousedown=drags

document.onmouseup=new Function("dragapproved=false")

</SCRIPT>

<SCRIPT text="JavaScript" TYPE="text/javascript">



</SCRIPT>

</HEAD>

<BODY>

<img src="card1.jpg" BORDER="0" style="position:absolute;left:1000px;top:700px;"><br>

<a href="#" onClick="clic(1)"><img src="dice1.gif" BORDER="0" class=drag onclick="changeImage(false,1);"></a>

<a href="#" onClick="clic(2)"><img src="dice2.gif" BORDER="0" class=drag onclick="changeImage(false,1);"></a>

<a href="#" onClick="clic(3)"><img src="dice3.gif" BORDER="0" class=drag onclick="changeImage(false,1);"></a>

<a href="#" onClick="clic(4)"><img src="dice4.gif" BORDER="0" class=drag onclick="changeImage(false,1);"></a>

<a href="#" onClick="clic(5)"><img src="dice5.gif" BORDER="0" class=drag onclick="changeImage(false,1);"></a>

<a href="#" onClick="clic(6)"><img src="dice6.gif" BORDER="0" class=drag onclick="changeImage(false,1);"></a>

<a href="#" onClick="clic(7)"><img src="dice1.gif" BORDER="0" class=drag onclick="changeImage(false,1);"></a>

</BODY>

</HTML>

But I can not get it to work on 7 different images simultaneously! What can I do?

My style.css

.drag { POSITION: relative; CURSOR: hand }

.highlight {

BACKGROUND: #ffff00; COLOR: #6600ff; CURSOR: hand }

.RotImg{ }

.txtcenter{ text-align: center; }

PEBM

Also in #JavaScript _↴

Problems passing string from Child pop up to Parent Checkbox recognition conundrum Resizable Tables? - Is this possible with Javascript?

Success!

Help @richiej spread the word by sharing this article on Twitter...

Tweet This

How to rotate an image on click

13 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

How to rotate an image on click

13 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

13 Comments(s) _↴

Also in #JavaScript _↴