Gradual Highlight Image Script help

[mambo_india]

I am regular referrer of scripts in dynamicdrive.com and so far I hav dynamicdrive.com very very helpful. I found "Gradual Highlight Image Script" at dynamicdrive.com, and found it extremely superb.
The problem I am having is - Could any one please tell me how I could use this script seperate i.e with the javascript code seperate in a file like code.js and then include in the html code where I am using it.I dont want all the jscript code within the html as it is a mess all together. If I could include it like
<SCRIPT LANGUAGE="Javascript" SRC="staticlogo.js" type="text/javascript">
then that would be extremely helpful.

Somebody could help
Thank you
mambo_india

[jscheuer1]

Use a text editor to save the script, call it 'file_name.js' where 'file_name' can be any valid file name of your choosing. Substitute the name of your external .js file for some.js in the below:

<script src="some.js" type="text/javascript"></script>

Common problems arise when:

1 ) The script file is not in the directory specified. In the above example it must be in the same directory as the page(s) that use it. Below, it can be in the scripts directory off of the root of a domain:

<script src="http://www.somedomain.com/scripts/some.js" type="text/javascript"></script>

2 ) Opening, closing and/or 'hiding' tags are left in the external file. This means that you must strip:

<script>
<!--

and

//-->
</script>

and any of their many variations from the beginning and end of the external file.

3 ) The external call (<script src="some.js" type="text/javascript"></script>) is not inserted into the page at the correct spot. The external call must be inserted at the same place on the page where the script was/would have been.

4 ) Paths to other files (if) used by the script are no longer valid due to its location. This is only a problem if the external script is kept in a different directory than the page it was working on when it was an internal script. To correct this, use absolute paths inside the script. Absolute path examples:

http://www.somedomain.com/images/button.gif

http://www.somedomain.com/~mysitename/index.html

5 ) Inappropriately combining two or more scripts into one external file. Usually external scripts can be combined if one knows enough about scripting to do so properly. Even then it is possible to overlook something.

A rule of thumb when testing is, if it won't work on the page, it won't work as an external file either.

One other thing, if this is a DD script or any script that requires the credit remain for legal use, include the credit in the on page call, ex:

<script src="some.js" type="text/javascript">
/***********************************************
* IFrame SSI script II- © Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
* Visit DynamicDrive.com for hundreds of original DHTML scripts
* This notice must stay intact for legal use
***********************************************/
</script>

Make sure to retain all the 'decorations', as these include begin and end javascript comment delimiters without which the script won't function.

[mambo_india]

Thank you for the fast response.
But I have been using the same code in the html file
<script src="some.js" type="text/javascript"></script>
after taking the jscript code to a .js file

But the image is working as it was working before (fading in on mouse over)

[mambo_india]

One more thing....
both the .js file and the html file are in same location

[jscheuer1]

. . . the image is working as it was working before (fading in on mouse over)

So, what's the problem? And, if you are having problems, make sure you are not making any of the common mistakes that my previous post advises one to avoid.

[mambo_india]

I hav checked your message, but dont find anything erroneous as specified by you .
I am adding the code for you here.Could you please have a look???

---------------------------------------- staticlogo.js -----------------------------------------
<style type="text/css">

.gradualshine{
filter:alpha(opacity=80);
-moz-opacity:0.9;
}

</style>
<script language="JavaScript" type="text/javascript">
var baseopacity=30

function slowhigh(which2){
imgobj=which2
browserdetect=which2.filters? "ie" : typeof which2.style.MozOpacity=="string"? "mozilla" : ""
instantset(baseopacity)
highlighting=setInterval("gradualfade(imgobj)",50)
}

function slowlow(which2){
cleartimer()
instantset(baseopacity)
}

function instantset(degree){
if (browserdetect=="mozilla")
imgobj.style.MozOpacity=degree/100
else if (browserdetect=="ie")
imgobj.filters.alpha.opacity=degree
}

function cleartimer(){
if (parent.window.highlighting) clearInterval(highlighting)
}

function gradualfade(cur2){
if (browserdetect=="mozilla" && cur2.style.MozOpacity<1)
cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.1, 0.99)
else if (browserdetect=="ie" && cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=10
else if (parent.window.highlighting)
clearInterval(highlighting)
}
</script>
-----------------------------------------------------------------------------------------------------------
----------------------------------test.html------------------------------------------------------------
<SCRIPT LANGUAGE="Javascript" SRC="staticlogo.js" type="text/javascript">
<!--
/***********************************************
* Gradual Highlight image script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
//-->
</SCRIPT>
<img src="logo.gif" border=0 class="gradualshine" onMouseover="slowhigh(this)" onMouseout="slowlow(this)">
</html>

-----------------------------------------------------------------------------------------------------------

Do you find any errors in that script that I have missed out???
Thanks for the help
mambo_india

[jscheuer1]

2 ) Opening, closing and/or 'hiding' tags are left in the external file. This means that you must strip:

<script>
<!--

and

//-->
</script>

and any of their many variations from the beginning and end of the external file.

Take out all the red parts.

<style type="text/css">

.gradualshine{
filter:alpha(opacity=80);
-moz-opacity:0.9;
}

</style>
<script language="JavaScript" type="text/javascript">
var baseopacity=30

function slowhigh(which2){
imgobj=which2
browserdetect=which2.filters? "ie" : typeof which2.style.MozOpacity=="string"? "mozilla" : ""
instantset(baseopacity)
highlighting=setInterval("gradualfade(imgobj)",50)
}

function slowlow(which2){
cleartimer()
instantset(baseopacity)
}

function instantset(degree){
if (browserdetect=="mozilla")
imgobj.style.MozOpacity=degree/100
else if (browserdetect=="ie")
imgobj.filters.alpha.opacity=degree
}

function cleartimer(){
if (parent.window.highlighting) clearInterval(highlighting)
}

function gradualfade(cur2){
if (browserdetect=="mozilla" && cur2.style.MozOpacity<1)
cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.1, 0.99)
else if (browserdetect=="ie" && cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=10
else if (parent.window.highlighting)
clearInterval(highlighting)
}
</script>

Put the style in the head of the page or in an external stylesheet. If external, strip the opening and closing tags from the style as well, save the rest as gh.css. Example of external style link (goes in the head of the page):

<link rel="stylesheet" type="text/css" href="gh.css">

[mambo_india]

Thank you for the great explanation. It worked.thanks a lot
mambo_india