Home > DeveloperSection > Articles > Image Rotator using JavaScript and HTML

Image Rotator using JavaScript and HTML


JavaScript JavaScript 
Ratings:
0 Comment(s)
 2979  View(s)
Rate this:

Image Rotator using JavaScript and HTML

In this article I am trying to make an Image Rotator using jQuery and HTML which is rotate an image in degrees.

 In this article I am going to create a demo which is rotate an image or any HTML element in degrees.

HTML Code:

<body>

    <table cellpadding="15" cellspacing="15">

        <tr>

            <td>

                <img src="http://www.mindstick.com/Employeesection/Image/Multi_purpose.png" id="imgTag"

                    height="150px" width="150px" border="1" />

            </td>

        </tr>

    </table>

    <br/>

     Rotate:

    <input type="range" min="-360" max="360" value="0" onchange="rotator(this.value)" /><br />

    Rotate image in <span id="span1">Zero deg</span>

</body>

Description:

Above HTML code will make a table and in the table have a image with height="150px" width="150px", and also have a range type input with minimum value -360 and maximum value 360 and also handle onchange event and it will pass the value in JavaScript function.

JavaScript Code:

<script type="text/javascript">

        function rotator(value) {

            document.getElementById('imgTag').style.webkitTransform="rotate("+value+"deg)";

            document.getElementById('imgTag').style.msTransform ="rotate("+value+"deg)";

            document.getElementById('imgTag').style.MozTransform="rotate("+value+"deg)";

            document.getElementById('imgTag').style.OTransform ="rotate("+value+"deg)";

            document.getElementById('imgTag').style.transform="rotate("+value+"deg)";

            document.getElementById('span1').innerHTML=value+" deg";

        }

    </script>

Description:

In above JavaScript code has a rotator function which takes a value from input type range on change event and in the rotator function body set the rotation degrees.

Output:

In IE

Image Rotator using JavaScript and HTML

In Mozilla

Image Rotator using JavaScript and HTML

In Chrome

Image Rotator using JavaScript and HTML

In Safari:

Image Rotator using JavaScript and HTML

In Opera:

Image Rotator using JavaScript and HTML


Don't want to miss updates? Please click the below button!

Follow MindStick