abrodski - 7:05 am on Jul 9, 2010 (gmt 0)

THANKS so much for your help! After spending couple of hours I got it working!

I placed this code into Custom HTML Joomla module and placed it in a copyright position of a template

<script type="text/javascript">
(function () {
var el,
id,
imgSwap = { // Create the map of id to images
img1: { oldImg: 'images/stories/org0.jpg', newImg: 'images/stories/new0.jpg' }
};
for (id in imgSwap) {
if (imgSwap.hasOwnProperty(id)) {
el = document.getElementById(id);
if (el) {
// Attach event handlers
el.onmouseover = function (el, src) {
return function () {
el.src = src;
};
}(el, imgSwap[id].newImg);
el.onmouseout = function (el, src) {
return function () {
el.src = src;
};
}(el, imgSwap[id].oldImg);
}
}
}
})();
</script>

And I opened the article with an original photo with noeditor and got access to the article's code. At the bottom there was a HTML tag img and it looked like this

<img src="images/stories/org0.jpg" border="0" etc.....

So I just added this id="img1"
Then I got that
<img src="images/stories/org0.jpg" id="img1" border="0" etc.....

The trick works now, but the problem is a lag, a delay. You have to wait like 1-2 seconds until the new image loads. It would have been better if there was a way to load BOTH images when the page loads and then there won't be a noticable delay. Because now its like I have to load the new image from server. But after that, its very fast. Because probably Firefox caches it. It was worse in IE8. I read somewhere about CSS option which kinda resolves this issue... any ideas?
P.S. Someone tried to help me in another forum with this idea, but I need some help implementing it in Joomla. Here's what he wrote:

"there are several ways of doing this. one of these is placing those images that you want to be the onmouseover's src in the background of (for example) <span>here your basic image</span> so that these images are invisible. then you assign onmouseover and onmouseout for this span which will change this firstChild's (which is your basic image) src to the span's background-image src onmouseover and back onmouseout. this acts like preloading images and there will be no any lag when when the images change."

Any ideas?