1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 12:44 am May 14, 2026

Forum Moderators: open

Message Too Old, No Replies

Need help with JavaScript

         

abrodski

11:57 pm on Jul 6, 2010 (gmt 0)

10+ Year Member



I need help to use some Javascript feature that I found online somewhere. It's said:

Changing images with MouseOver and MouseOut events

This is probably the most common use of Javascript. There are countless ways to get this working,
but I present one that I use frequently. This script like many of my other ones rely on numbered image files. Make images with names such as org0.jpg, org1.jpg and org2.jpg. These would be initially displayed.
Get 3 more files named new1.jpg, new2.jpg and 3.jpg which would be the files displayed when the mouse is over the original images.




<SCRIPT LANGUAGE = "JavaScript">
<!--

function new_img(no){
document.images[no].src="new"+no+".jpg";
}

function org_img(no){
document.images[no].src="org"+no+".jpg";
}
-->
</SCRIPT>

<BODY>
<IMG SRC="org0.jpg" onMouseOver="new_img(0)" onMouseOut="org_img(0)">
<IMG SRC="org1.jpg" onMouseOver="new_img(1)" onMouseOut="org_img(1)">
<IMG SRC="org2.jpg" onMouseOver="new_img(2)" onMouseOut="org_img(2)">
</BODY>

Say, I have an article with an image and I want to use this trick. Is it possible and how I can do it?
When I tried, what happened was that I saw the original image in a place where I placed Custom HTML module (with that JS in it) and when I hovered mouse on top of it-nothing happened.
P.S. Is that a typo in this JS discription above. 'cos my logic tells me that it should be:
org0.jpg, org1.jpg etc. and
new0.jpg, new1.jpg etc
and above it says org0.jpg and then it starts with new1.jpg

abrodski

11:59 pm on Jul 6, 2010 (gmt 0)

10+ Year Member



BTW, I have a Joomla site.

Dijkgraaf

1:43 am on Jul 7, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Yes, with this example the images need to be named org0.jpg, new0.jpg, org1.jpg, new1,jpg, org2.jpg, new2.jpg

However this method will only work if these pictures are the first three in the document. It would be better to find a script that finds the image by the ID, and uses that to replace the image.

abrodski

2:21 am on Jul 7, 2010 (gmt 0)

10+ Year Member



3 is enough...but HOW to make it work?

Dijkgraaf

2:51 am on Jul 7, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I wouldn't try to get this one to work, as it is a bad example and prone to breaking because it uses document.images[no] (i.e. it uses an array that contains all the images in the page and looks for image number "no" in the page and tries to change the source, as you are likely to have other images on the page it will break).

Just do a search for javascript mouseover image in your favorite search engine and you will find better examples that probably will work.

Fotiman

1:13 pm on Jul 7, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Here's how I would do it.

First, don't use the language attribute on script tags. It's invalid. Use the type attribute instead.

Next, don't use HTML comments inside of the script tags. They haven't been needed for many, many years.

Use lowercase letters for tags and attributes (<img> instead of <IMG> and onmouseover instead of onMouseOver).

Rather than create a fragile system that is dependent on files being named with certain numbers, I would opt for a more explicit approach, where you specify exactly what items you want to work on. I would do this by creating a map of element ids (an id value to be assigned to each image) to the images you want to use on those elements. Also, I would use progressive enhancement to keep the markup as pure as possible, so no inline event handlers. Behavior is managed entirely in the JavaScript code.

Here's what I came up with: 


<!DOCTYPE html>
<html>
<head>
<title>Image mouseover/out test</title>
</head>
<body>
<!-- 
  Each image gets a unique id. It doesn't matter what the name of
  each image file is... they could be org0.jpg, foobar.jpg, 010110.jpg
-->
<img src="org0.jpg" id="img1">
<img src="org1.jpg" id="img2">
<img src="org2.jpg" id="img3">
<!--
  It would be preferable to put this in an external script file but
  for the sake of this example I'm including it in the HTML document.
  Either way, put this at the END of the document, just before the
  closing body tag to ensure we can find the images in the document.
-->
<script type="text/javascript">
(function () {
var el,
  id,
  imgSwap = { // Create the map of id to images  
    img1: { oldImg: 'org0.jpg', newImg: 'new0.jpg' },
    img2: { oldImg: 'org1.jpg', newImg: 'new1.jpg' },
    img3: { oldImg: 'org2.jpg', newImg: 'new2.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>
</body>
</html>


With that example, you specify in your JavaScript code exactly what images you want to work on. The id attribute of your images ("img1", "img2", etc.) matches the property of the imgSwap object.

Fotiman

1:21 pm on Jul 7, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Note, in my example I assigned an "event handler" (assigning a function to the onmouseover property of an element, there can only be one). A better approach would be to attach "event listeners" (of which there can be many). If you use any sort of JavaScript framework/library (jQuery, YUI, prototype, etc.), then use the methods defined by that library for attaching event listeners. Otherwise, you might consider rolling your own method for attaching event listeners.

abrodski

7:55 pm on Jul 7, 2010 (gmt 0)

10+ Year Member



Thanks for your help, but I didn't understand anything...
I'm not a coder. What I need is a simple step by step tutorial how I can achieve what I was asking in my original question. I don't write HTML, I have a PHP driven Joomla.
So, please, if you could tell me exactly what should be put where, I'd appreciate that! Like do I have to create a separate .js file or use Custom HTML module with noeditor in Joomla or edit index.php file of a current template etc.
I need a specific and simple explanation, that's all.
I don't study JS and I have no idea about event handlers etc.
All I want is to copy-paste some code snippet, make those image files and forget about it, so to speak.

Fotiman

1:20 am on Jul 8, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I thought my example was pretty self explanatory, but I will elaborate.

You'll notice that in the HTML there are the images that I plan on applying the swap to. These are: 

<img src="org0.jpg" id="img1">
<img src="org1.jpg" id="img2">
<img src="org2.jpg" id="img3">


It doesn't matter at all what the actual file name is (that is, they don't need to be numbered like xyz0.jpg, xyz1.jpg, etc. They can be named anything you want. The important piece of information is the id attribute of each image. In this example, I have id's "img1", "img2", and "img3". Again, you can give them whatever id value you want as long as it's a unique id (and valid... starts with a letter).

Next, take that bit of script that I included above and put it in a separate .js file. The only part that requires any configuration on your part is this bit: 


imgSwap = { // Create the map of id to images 
 img1: { oldImg: 'org0.jpg', newImg: 'new0.jpg' },
 img2: { oldImg: 'org1.jpg', newImg: 'new1.jpg' },
 img3: { oldImg: 'org2.jpg', newImg: 'new2.jpg' }
 };


This is where those previously mentioned id values come into play. As you can see, this example creates a map for images with id values "img1", "img2", and "img3". Those are the same values I use in the JavaScript code:

img1: { oldImg: 'org0.jpg', newImg: 'new0.jpg' },
img2: { oldImg: 'org1.jpg', newImg: 'new1.jpg' },
img3: { oldImg: 'org2.jpg', newImg: 'new2.jpg' }

So, if you decide to use different id values in your HTML, you will need to use those same values in the JavaScript.

Next, all you need to do is include the image sources that you plan to use for each of the images. I defined these as oldImg and newImg (though better names may have been mouseoutImg and mouseoverImg ... oh well).

As for how you include this script in Joomla, I'm afraid I can't offer any help with that. Sorry.

abrodski

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

10+ Year Member



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?

Fotiman

1:01 pm on Jul 9, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



The script you have now can be modified to preload the new images like so: 


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);
   // Preload images
   var preloadImg = new Image();
   preloadImg.src = imgSwap[id].newImg;
  }
 } 
}
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 12:44 am May 14, 2026