I have a Joomla site.
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