Change of "src" attribute does not change image in IE8 - in IE rotated object has to be visible to be able to rotate

[GoogleCodeExporter]

What steps will reproduce the problem?
1. Create <img> that points to some image and is wrapped in <a> (<a> has 
position:absolute) + add some button or link that will call some JS later
2. Rotate <img> on page load as usually, i.e. $("img").rotate(10);
3. Then click on button, or whatever, that will call JS which will change "src" 
attribute of <img> to different image path.

What is the expected output? What do you see instead?
The image is expected to be changed to new path, keeping rotation, styling, etc.
Instead, in IE8- you see the same old image. In IE9, FF3+, Chrome you see new 
image.

What version of the product are you using? On what operating system?
Tried 1.8 and 2.1. Windows 7/XP.

Please provide any additional information below.
Imagine it in situation where you have a gallery of thumbnails with one full 
sized rotated image and by clicking a thumbnail it's switching with the full 
sized one :)

Original issue reported on code.google.com by [email protected] on 25 Aug 2011 at 1:24

[GoogleCodeExporter]

Well because if tricky approach to IE images, I would rather advice to have two 
images where one is hidden and show/hide them according to action. I know this 
is not perfect, but as IMG element in IE was replaced into VML:image - 
accessing src attribute is no longer possible. 

Original comment by [email protected] on 26 Aug 2011 at 8:14

[GoogleCodeExporter]

Thanks for explanation and advice :)

Original comment by [email protected] on 26 Aug 2011 at 11:20

[GoogleCodeExporter]

Blahh i make mistakes all day today :)

"Well because if tricky approach to IE images,"

I mean of course:

"Well because of tricky approach to IE images,"

Original comment by [email protected] on 26 Aug 2011 at 11:49

[GoogleCodeExporter]

And you could also use jQueryRotate3.js  that is in trunk, however it has some 
issues with positioning annimations. But if it works out of the box for you 
then you can use this one i guess. There I use different approach for IE so its 
uses a DXFilter to rotate elements. For positioning problems I need to put 
content inside a <span> object but for you it would mean that you can still 
change src attribute of image, but instead  of object like:

<img src="bababa">

it will be like

<span>
 <img src="bafba">
</span>

(all that in jQueryRotate3.js of course)

http://code.google.com/p/jqueryrotate/source/browse/trunk/jQueryRotate3.js

Original comment by [email protected] on 26 Aug 2011 at 11:55

[GoogleCodeExporter]

I used the first approach - show/hide - for IE7+8 only. It works ok.

The only thing to notice for others. All <img> must be visible when rotating 
them, otherwise their width and height equals 0px in VML's <image> element.

Original comment by [email protected] on 31 Aug 2011 at 11:18

[GoogleCodeExporter]

Oh hmm this is something that I never tested - what will happen if the image is 
hidden during adding to DOM :/ damn another bug to consider from code yhm :/

Original comment by [email protected] on 31 Aug 2011 at 11:42

[GoogleCodeExporter]

Original comment by [email protected] on 17 Nov 2011 at 2:52

• Changed state: Accepted

[GoogleCodeExporter]

Original comment by [email protected] on 13 Mar 2012 at 10:52

• Changed title: Change of "src" attribute does not change image in IE8 - in IE rotated object has to be visible to be able to rotate