F
Francesco Moi
Hi.
I'd like to flip horizontally an image with JavaScript. Is it
possible? Thank you very much.
I'd like to flip horizontally an image with JavaScript. Is it
possible? Thank you very much.
E
Evertjan.
Francesco Moi wrote on 06 aug 2007 in comp.lang.javascript:
No.
No.
V
VM
You're probably better off just doing an image swap, using two images, one
being a flipped copy of the original
being a flipped copy of the original
T
Thomas 'PointedEars' Lahn
Francesco said:
It is, for example:
function flipImg(img)
{
img.src = "right-left.png";
}
<img src="left-right.png" alt="..."
onmouseover="flipImg(this)">
You might want to try to preload the second image.
It is also possible in JScript. Client-side JScript usually runs in MSHTML
(used e.g. by Internet Explorer) which supports Microsoft Filters:
function flipImgHorz(img)
{
if (img && img.filters && img.filters.item)
{
img.style.filter =
"progid
XImageTransform.Microsoft.BasicImage(mirror=1)";}
}
<body onload="flipImgHorz(document.images['foo'])"
<img src="left-right.png" alt="..." name="foo">
</body>
However, I recommend to use conditional comments in order to apply the
filter without client-side DOM scripting:
<head>
...
<!--[if IE]>
<style type="text/css">
img#foo {
filter: progid
XImageTransform.Microsoft.BasicImage(mirror=1);}
</style>
<![endif]-->
</head>
<body>
<img src="left-right.png" alt="..." id="foo">
</body>
HTH
PointedEars
S
scripts.contact
In IE, you can use the flipH filter:
<img src="xxxx" style="filter:flipH">
J
Jim
<html ><head><title>MSIE Only Image Filter</title>
<style type="text/css">
.flipvert { Filter: FlipV; }
.fliphoriz { Filter: FlipH; }
.noflip { Filter:none; }
</style>
</head>
<body >
<h3>Microsoft Internet Explorer CSS Image Filters</h3>
Mouseover to flip vertically:<br.>
<IMG
src="http://www.google.com/intl/en_ALL/images/logo.gif"
onMouseover = "this.className='flipvert' "
onMouseout = "this.className='noflip' "
/>
<hr/>
Mouseover to flip horizontally:<br>
<IMG
src="http://www.google.com/intl/en_ALL/images/logo.gif"
onMouseover = "this.className='fliphoriz' "
onMouseout = "this.className='noflip' "
/>
</body>
</html>
<style type="text/css">
.flipvert { Filter: FlipV; }
.fliphoriz { Filter: FlipH; }
.noflip { Filter:none; }
</style>
</head>
<body >
<h3>Microsoft Internet Explorer CSS Image Filters</h3>
Mouseover to flip vertically:<br.>
<IMG
src="http://www.google.com/intl/en_ALL/images/logo.gif"
onMouseover = "this.className='flipvert' "
onMouseout = "this.className='noflip' "
/>
<hr/>
Mouseover to flip horizontally:<br>
<IMG
src="http://www.google.com/intl/en_ALL/images/logo.gif"
onMouseover = "this.className='fliphoriz' "
onMouseout = "this.className='noflip' "
/>
</body>
</html>
J
jim
Yes, you can emulate this with javascript (it may not look very good)
by tiling copies of the image as 1 pixel vertical segments that you
reverse the normal order for: this would give you a mirror effect.
My svg is weak but understand that for browsers that support it you
could transform an element with an attached image (or possibly
directly):
http://wiki.svg.org/Transforms You can create an svg element and
insert it into a normal webpage using javascript: http://developer.mozilla.org/en/docs/SVG
In addition to the filter option IE may also have an svg-equivalent in
vml. You could also use the flash plugin and possibly canvas too.
have fun with it,
by tiling copies of the image as 1 pixel vertical segments that you
reverse the normal order for: this would give you a mirror effect.
My svg is weak but understand that for browsers that support it you
could transform an element with an attached image (or possibly
directly):
http://wiki.svg.org/Transforms You can create an svg element and
insert it into a normal webpage using javascript: http://developer.mozilla.org/en/docs/SVG
In addition to the filter option IE may also have an svg-equivalent in
vml. You could also use the flash plugin and possibly canvas too.
have fun with it,
J
jim
here is a working svg demo:
http://developer.mozilla.org/presentations/eich-ajax-experience-2007/photos.svg
grab the black corner of an image (appears when you hover) and rotate
and/or scale it
http://developer.mozilla.org/presentations/eich-ajax-experience-2007/photos.svg
grab the black corner of an image (appears when you hover) and rotate
and/or scale it
D
Dr J R Stockton
In comp.lang.javascript message <[email protected]>
Which is a pity, since it would be perfectly easy to put a negative
value for the style width and/or height, and perfectly easy for
rendering engines to comply.
I was once asked about reversed printing; and advised printing on
transparent plastic and photocopying the other side. Gratitude was
expressed.
I once wanted to produce self-protecting notices - easily done in
Postscript by using a negative X- or Y- scale, printing on transparent
plastic, and putting the inky side to the wall (though with a laser
printer the toner was well welded-on anyway).
Which is a pity, since it would be perfectly easy to put a negative
value for the style width and/or height, and perfectly easy for
rendering engines to comply.
I was once asked about reversed printing; and advised printing on
transparent plastic and photocopying the other side. Gratitude was
expressed.
I once wanted to produce self-protecting notices - easily done in
Postscript by using a negative X- or Y- scale, printing on transparent
plastic, and putting the inky side to the wall (though with a laser
printer the toner was well welded-on anyway).
D
Dr J R Stockton
In comp.lang.javascript message <[email protected]
legroups.com>, Mon, 6 Aug 2007 18:38:56, scripts.contact
Agreed.
That can be used as a body style too, and with flipV; in IE6. But when
one tries to tab over the controls, they seem to be unmoved. Clicking
on buttons works, but clicking in test input areas does not. Is that a
bug or two?
legroups.com>, Mon, 6 Aug 2007 18:38:56, scripts.contact
Agreed.
That can be used as a body style too, and with flipV; in IE6. But when
one tries to tab over the controls, they seem to be unmoved. Clicking
on buttons works, but clicking in test input areas does not. Is that a
bug or two?