Flip the Div with Image Or just image onClick=flip('ID NAME');

Question

I want to flip Image Horizontally And Vertically How can I do it? onClick function through its id.

<script>
    function fliph(imageid){
        var imageid = imageid;
        //What Should I have to Type HERE???
    }
    function flipv(imageid){
        var imageid = imageid;
        //What Should I have to Type HERE???
    }
</script>
<input type="submit" name="flip" value="Flip Horizontal" onClick="fliph('imageid')" />
<input type="submit" name="flip" value="Flip Vertical" onClick="flipv('imageid')" />
<img src="http://classihome.com/uploads/gallery/1453292889developlda.jpg" id="imageid">

Check these two links [1](http://stackoverflow.com/questions/14694205/flipping-an-image-with-js-jquery) and [2](http://stackoverflow.com/questions/507138/how-do-i-add-a-class-to-a-given-element) and combine.... — SamGhatak, Apr 12 '16 at 12:42
@SamGhatak The link you show are perfect. but when i do copy them they are not working any script file have to attach can you please give me the link I have tried with these. — Hassan Ali, Apr 12 '16 at 12:48

Phillip · Accepted Answer · 2016-04-12T12:55:36.957

What both functions do is they find the element by the supplied id, and then toggles .flipv or .fliph classes respectively.

We then use CSS transforms to scale the images.

Note: I'm using classList which is native JavaScript, but it doesn't work in older browsers. If you're already using jQuery, I encourage you to use something like $('#' + imageid).toggleClass('flipv'); instead.

function fliph (imageId) {
  var el = document.getElementById(imageId);
  el.classList.toggle('fliph');
}

function flipv (imageId) {
  var el = document.getElementById(imageId);
  el.classList.toggle('flipv');
}

.flipv {
  transform: scaleY(-1);
}

.fliph {
  transform: scaleX(-1);
}

.flipv.fliph {
  transform: scale(-1, -1);
}

<input type="submit" name="flip" value="Flip Horizontal" onClick="fliph('imageid')" />
<input type="submit" name="flip" value="Flip Vertical" onClick="flipv('imageid')" />
<img src="http://classihome.com/uploads/gallery/1453292889developlda.jpg" id="imageid">

EDIT: Use CSS classes instead of inlining the styles.

You are doing great but it doesn't move horizontal please update with horizontal too. — Hassan Ali, Apr 12 '16 at 12:52

score 0 · Answer 2 · answered Apr 12 '16 at 13:00

I assume that flipping means rotating by 90 degrees. In that way you can have four steps. You will access the style property of the image element.

This is how your code should look like.

<body>

   <img id="imageId" style="border:1px solid blue; width:50px; height:30px;">

   <button onclick="flip('imageId')"/> 


</body>
<script>
var deg = 90;
var currentRotation = 0;
function flip(imageId){
   var imageRef = document.getElementById(imageId); 
   if(currentRotation === 270){ 
    currentRotation = 0; 
} 
else {
        currentRotation += deg;
}

imageRef.style.webkitTransform = 'rotate('+currentRotation+'deg)'; 
imageRef.style.mozTransform    = 'rotate('+currentRotation+'deg)'; 
imageRef.style.msTransform     = 'rotate('+currentRotation+'deg)'; 
imageRef.style.oTransform      = 'rotate('+currentRotation+'deg)'; 
imageRef.style.transform       = 'rotate('+currentRotation+'deg)'; 
}
</script>
</html>

Flip the Div with Image Or just image onClick=flip('ID NAME');

2 Answers2