Rotate image using jQuery


I got some input fields, which is used to rotate an image using CSS.
The selected value is added to the database and image is rotated upon next page load.

However, I would like to rotate the image instantly, on radio select/click.
I know it's possible to replace text using class/id, but I have no idea what to do in this case.

Hope some of you might be able to help me out :)

HTML input fields:
<input id="y1" name="connection_port_bot_angle" value="0" type="radio" class="r-input">
<input id="y2" name="connection_port_bot_angle" value="45" type="radio" class="r-input">
<input id="y3" name="connection_port_bot_angle" value="90" type="radio" class="r-input">
<input id="y4" name="connection_port_bot_angle" value="135" type="radio" class="r-input">
<input id="y5" name="connection_port_bot_angle" value="180" type="radio" class="r-input">

Open in new window

CSS to make image turn:
<img style="position:absolute; z-index:40; -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg);" src="/images/sketch/endview_mount_N.png">

Open in new window

Would be great if jQuery is able to change '0'degree to selected value/degree.
Who is Participating?
Tom BeckCommented:
It will not work with a jQuery library older than 1.7.2. You have 1.6.2 and the latest stable version is 2.1.0 so you are way behind.
Tom BeckCommented:
kgp43Author Commented:
Your fiddle works flawless, but I have problems getting it to work.
Everything looks fine though.

Mind take a look?

login using:

Then click this link when logged in:

Click the red "Connection ports" button.
The radio buttons to the left should rotate the top connection-port-image (marked with yellow), but it does not :(
Any suggestions?

kgp43Author Commented:
Ha! That was it!

Thank's a lot, everything is working perfectly now :)
Tom BeckCommented:
You're welcome. Thanks for the points.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.