Entry

How to flip an image horizontally or vertically?

Feb 17th, 2000 07:44
Martin Honnen, http://msdn.microsoft.com/workshop/author/filter/reference/reference.asp

IE4+ (on win and unix) knows so called filters for graphical 
transformation of page elements two of which are 
  flipv
and
  fliph
to flip an element vertically respectively horizontally. You can flip 
statically with a css setting
  <IMG STYLE="filter: flipv">
or dynamically with javascript for instance onmouseover/out

<IMG NAME="anImage" SRC="whatever.gif" 
     onmouseover="if (!this.filters.flipv) this.style.filter = 'flipv'; 
this.filters.flipv.enabled = true;" 
     onmouseout ="this.filters.flipv.enabled = false;" 
>

You can also combine two filters as follows

<SCRIPT>
function flipImageVertically (imageName) {
  var img = document[imageName];
  if (img.filters) {
    if (!img.filters.flipv)
      img.style.filter += ' flipv()';
    else
      img.filters.flipv.enabled = !img.filters.flipv.enabled;
  }
}
function flipImageHorizontically (imageName) {
  var img = document[imageName];
  if (img.filters) {
    if (!img.filters.fliph)
      img.style.filter += ' fliph()';
    else
      img.filters.fliph.enabled = !img.filters.fliph.enabled;
  }
}
</SCRIPT>

<A HREF="javascript: flipImageVertically('anImage'); void 0">
flip vertically
</A>
|
<A HREF="javascript: flipImageHorizontically ('anImage'); void 0">
flip horizontically
</A>
<BR>
<IMG NAME="anImage" SRC="whatever.gif">