Hi there
I have the following code on a site that works as it should but I'd like to
understand how it works (a luxury I realise :).
I use it to change the colour of buttons on a menu when a mouse goes on and
off them as well as pre loading the 2nd images used to show the new button
colours.
It all looks incredibly complicated and try as I might to work it out I
haven't a clue what it is actually doing in each of the four sections. Any
help appreciated.
Cheers
John
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++)
x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length;
i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length)
{
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++)
x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++)
x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array;
for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc)
x.oSrc=x.src; x.src=a[i+2];}
}
//--> 2 2249
John J wrote: I have the following code on a site that works as it should but I'd like to understand how it works (a luxury I realise :).
That's Dreamweaver's code; it is compressed to save a few bytes for the
user downloading the page, which makes it look complicated.
Actually, the functions are not as poor as is usually said here;
however, they have indeed some flaws, and more importantly they force a
certain use on the author, which prevent him from writing more than
averagely-good javascript.
<!--
This sort of comment was used previously for browsers not supporting
SCRIPT tags, therefore which used to present the javascript code as
text; such browsers are not in use anymore, the comment isn't therefore
needed anymore.
function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; }
This function is used to restore previous image sources, changed with
the MM_swapImage function. The MM_sr array contains references to the
images whose source has been swapped. It is iterated, and each image in
the array has its source (previously saved as an expando property on the
image object) set back.
The MM_sr array is created by the swapImage function, which permits to
swap several images' sources at the same time.
Too bad the for() loop tests for the MM_sr object at each iteration...
function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} }
Function used to preload images; the MM_p array will hold all images to
be loaded. The function iterates the arguments passed to the function,
and if the current argument doesn't start with a "#" (better to use
charAt here), it creates a new image and assigns the source to the
argument's value, which in effect leads the browsers to issue a HTTP
request for the image (thus, preloading the image in the cache).
The function can be called many times, the array is only created once,
for the next calls it is simply used back.
Here, the function tests for d.images while it should test (if ever) for
the Image constructor. Moreover, it gets the arguments of the function
using the arguments property for the function, which is a deprecated way
since long. Eventually, the "#" test serves no purpose AFAICS.
function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; }
This function returns a reference to an element; the "n" argument is the
name/id of the element to be retrieved; "d" is the document to be
searched (when using frames, or in NN4 object model, you can have many
documents).
There is a first branch, allowing for a frame name to be specified,
using a "?"-based pattern - it would have been simpler to use a third
argument for the frame name, though - testing for the frame existence
would have been nice.
Then, the function starts looking up for the element having the name/id:
- first looking as a property of the document object (all HTML
collections root elements usually are added on the document object as
properties),
- then looking in the document.all collection,
- then looking in every present form,
- then looking in all layers, for NN4-based object models (repeating
uselessly the document.layers test at each iteration) - note the
recursive call to the findObj function, to find an element in a
contained document (a layer has a specific document),
- eventually using the document.getElementById standard method.
One of the big problems with this function is how it mixes names and
ids; name can be different from id; elements with the same name can have
multiple ids. Therefore, this function is to be used in a specific
context, not in all context (for instance, don't use it in a form
context, just use the regular form accessors there).
Eventually, other collections could have been searched, like
document.images, document.anchors etc.
function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} }
This function swaps the source for images, and stores old source in the
MM_sr array. You can swap many images at once, and restore all sources
using the restore function defined above.
Arguments passed to the function go always by three (therefore it would
have been better to pass object literals with three properties):
- the image name or ID, which is retrieved with the findObj object
(document.images should of course have been used),
- whatever you want (probably here for backward compatibility, I don't
know),
- the new source to be set.
Before setting the new source, the old source is saved as an expando of
the image object.
One big problem with generic functions like that is that they have to
address all possible issues, adding useless code for the situation, and
leaving the fallback to outside managers; before using them, it's better
to analyze thoroughly the problem and check whether a simple solution
cannot be used, with a neater conception, fitting the problem.
Thanks very much for that! You clearly know your stuff.
Cheers
John
"Yann-Erwan Perio" <y-*******@em-lyon.com> wrote in message
news:40***********************@news.free.fr... John J wrote:
I have the following code on a site that works as it should but I'd like
to understand how it works (a luxury I realise :).
That's Dreamweaver's code; it is compressed to save a few bytes for the user downloading the page, which makes it look complicated.
Actually, the functions are not as poor as is usually said here; however, they have indeed some flaws, and more importantly they force a certain use on the author, which prevent him from writing more than averagely-good javascript.
<!--
This sort of comment was used previously for browsers not supporting SCRIPT tags, therefore which used to present the javascript code as text; such browsers are not in use anymore, the comment isn't therefore needed anymore.
function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; }
This function is used to restore previous image sources, changed with the MM_swapImage function. The MM_sr array contains references to the images whose source has been swapped. It is iterated, and each image in the array has its source (previously saved as an expando property on the image object) set back.
The MM_sr array is created by the swapImage function, which permits to swap several images' sources at the same time.
Too bad the for() loop tests for the MM_sr object at each iteration...
function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} }
Function used to preload images; the MM_p array will hold all images to be loaded. The function iterates the arguments passed to the function, and if the current argument doesn't start with a "#" (better to use charAt here), it creates a new image and assigns the source to the argument's value, which in effect leads the browsers to issue a HTTP request for the image (thus, preloading the image in the cache).
The function can be called many times, the array is only created once, for the next calls it is simply used back.
Here, the function tests for d.images while it should test (if ever) for the Image constructor. Moreover, it gets the arguments of the function using the arguments property for the function, which is a deprecated way since long. Eventually, the "#" test serves no purpose AFAICS.
function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document;
if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; }
This function returns a reference to an element; the "n" argument is the name/id of the element to be retrieved; "d" is the document to be searched (when using frames, or in NN4 object model, you can have many documents).
There is a first branch, allowing for a frame name to be specified, using a "?"-based pattern - it would have been simpler to use a third argument for the frame name, though - testing for the frame existence would have been nice.
Then, the function starts looking up for the element having the name/id: - first looking as a property of the document object (all HTML collections root elements usually are added on the document object as properties), - then looking in the document.all collection, - then looking in every present form, - then looking in all layers, for NN4-based object models (repeating uselessly the document.layers test at each iteration) - note the recursive call to the findObj function, to find an element in a contained document (a layer has a specific document), - eventually using the document.getElementById standard method.
One of the big problems with this function is how it mixes names and ids; name can be different from id; elements with the same name can have multiple ids. Therefore, this function is to be used in a specific context, not in all context (for instance, don't use it in a form context, just use the regular form accessors there).
Eventually, other collections could have been searched, like document.images, document.anchors etc.
function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} }
This function swaps the source for images, and stores old source in the MM_sr array. You can swap many images at once, and restore all sources using the restore function defined above.
Arguments passed to the function go always by three (therefore it would have been better to pass object literals with three properties): - the image name or ID, which is retrieved with the findObj object (document.images should of course have been used), - whatever you want (probably here for backward compatibility, I don't know), - the new source to be set.
Before setting the new source, the old source is saved as an expando of the image object.
One big problem with generic functions like that is that they have to address all possible issues, adding useless code for the situation, and leaving the fallback to outside managers; before using them, it's better to analyze thoroughly the problem and check whether a simple solution cannot be used, with a neater conception, fitting the problem. This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: JesusFreak |
last post by:
From: us_traveller@yahoo.com (JesusFreak)
Newsgroups: microsoft.public.scripting.jscript
Subject: toolbar script problem
NNTP-Posting-Host: 192.92.126.136
Recently, I downloaded the following...
|
by: richk |
last post by:
For some reason when I add additional buttons a 3rd button and beyond
i cant get the effect to work and I get errors...I cant understand
why...
<SCRIPT LANGUAGE = "javascript"><!--
if...
|
by: teb |
last post by:
Hello all,
Here is basically the situation. I have an empty div on my page.
When I mouseover a word, the innerHTML of the div gets written with a
table. The td elements all have onclick,...
|
by: John Ortt |
last post by:
I appologise for reposting this but I have been trying to find a solution
all week with no avail and I was hoping a repost might help somebody more
knowledgable than myself to spot the message...
...
|
by: x muzuo |
last post by:
Hi guys,
I have got a prob of javascript form validation which just doesnt work
with my ASP code. Can any one help me out please.
Here is the code:
{////<<head>
<title>IIBO Submit Page</title>...
|
by: jimmygoogle |
last post by:
I posted earlier with a scope problem. I think I resolved it in IE but
in Firefox it still exists. Anyone have any ideas/experience with
this? I attached my code sorry it is so long. You can...
|
by: Reginald Johnson |
last post by:
I'm trying display a popup on the mouseover of a jpeg image. I'm
thinking of trying to populate the popup with text obtained from the
image metadata. However, I haven't been able to find any...
|
by: sgMuser |
last post by:
Hi,
I am not a good developer of Javascript codes. Needs this help to make
some modification to this famous free javascript from Anarchos. i am
using this in one of my webpage. What it does is,...
|
by: CloudSolutions |
last post by:
Introduction:
For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome former...
|
by: ryjfgjl |
last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
|
by: Charles Arthur |
last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
|
by: aa123db |
last post by:
Variable and constants
Use var or let for variables and const fror constants.
Var foo ='bar';
Let foo ='bar';const baz ='bar';
Functions
function $name$ ($parameters$) {
}
...
|
by: ryjfgjl |
last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
|
by: emmanuelkatto |
last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud.
Please let me know.
Thanks!
Emmanuel
|
by: Sonnysonu |
last post by:
This is the data of csv file
1 2 3
1 2 3
1 2 3
1 2 3
2 3
2 3
3
the lengths should be different i have to store the data by column-wise with in the specific length.
suppose the i have to...
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
| |