Hi.
Sorry for late; But i was so busy the last 3 days.
I checked out your site and I checked out javascript files and i think it's so complex for nothing;
So i decide to create a new javascript for you.
By the way you some kind of scripts that called "images preloader" so i write it too.
It works enough if you do the following:
1- Back up the old JavaScript you have “hover.js” and your index.htm
2- Copy the file called “fader.js” in the same folder of “index.htm”
3- On body event load call the function preloadimages() as following:
Preloadimages(‘image folder path’,’images1.gif,image2.png,image3.jpg,…….’)
4- On every company image you want to show informations about add this event :
onload="show(this,'./images/sub.gif')"
5- Upload the new “index.htm” to your website.
6- now when you open it on the web you’ll see a loading message show you what image has been loaded and it’ll be disappeared when finished loading
7- You’re free to remove or improve this loading message, it’s just for checking out loading progress.
Note:
In the header area it's so imprtant to add this style
CODE
<style>
.alpha
{
filter:alpha(opacity=0)
}
The above style should applyed to the <DIV> element you use to show company informatios by adding "class='alpha'" to its attributes
CODE
<div class='alpha' style="position: absolute; width: 167px; height: 27px; z-index: 1; left: 507px; top: 53px; visibility:visible" id="viewbox">
In the attached file there is an simple example you can try it first on your local computer then do what ever you want.
I hope this is what you are searching for…
javascript code here:"fader.js"
CODE
// preloading images for fast browsing
function preloadimages(folder,imagesarray){
viewbox.filters.alpha.opacity=100
viewbox.innerText="Loading Pictures...Please wait"
ob=imagesarray.split(",")
imagescount=ob.length
for (t=0;t<=ob.length-1;t++){
newimage=new Image()
newimage.onload=function(){viewbox.innerText="image: '"+ob[t]+"' was loaded";imagescount--;if (imagescount==0)viewbox.innerText=""}
newimage.src=folder+"/"+ob[t]
}
}
// fader + Mover
function show(object,pic){
object.onmouseover=function(){
viewbox.innerHTML="<img src='"+pic+"'>"
viewbox.filters.alpha.opacity=0
fade()
}
object.onmouseout=function(){clearTimeout(q);viewbox.filters.alpha.opacity=0;return false;}
object.onmousemove=function(){
viewbox.style.left=event.clientX+10;viewbox.style.top=event.clientY+10
}
}
function fade(){
acc=5
if (viewbox.filters.alpha.opacity<=100){viewbox.filters.alpha.opacity+=acc;q=setTimeout("fade()",50)}else{clearTimeout(q);return false;}
}
HTML code here:"index.htm"
CODE
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<style>
.alpha
{
filter:alpha(opacity=0)
}
</style>
<script language="javascript" src="fader.js"></script>
</head>
<body onload="preloadimages('images','stop.gif,key.gif,sub.gif,home.gif,mailus.gif,info.gif')">
<p> </p>
<p> </p>
<table border="1" width="50%" id="table1">
<tr>
<td>
<img onload="show(this,'./images/sub.gif')" border="0" src="images/mailus.gif" width="64" height="64"></td>
<td>
<img onload="show(this,'./images/stop.gif')" border="0" src="images/mailus.gif" width="64" height="64"></td>
</tr>
<tr>
<td>
<img onload="show(this,'./images/key.gif')" border="0" src="images/mailus.gif" width="64" height="64"></td>
<td>
<img onload="show(this,'./images/home.gif')" border="0" src="images/mailus.gif" width="64" height="64"></td>
</tr>
<tr>
<td>
<img onload="show(this,'./images/mailus.gif')" border="0" src="images/mailus.gif" width="64" height="64"></td>
<td>
</td>
</tr>
</table>
<div class='alpha' style="position: absolute; width: 167px; height: 27px; z-index: 1; left: 507px; top: 53px; visibility:visible" id="viewbox">
</div>
</body>
</html>
Forum Index:
Programming Help |
C and C++ |
VB6 |
Java |
VB.NET |
C# |
ASP.NET |
PHP |
ColdFusion |
Perl and Python |
Ruby |
Databases |
Other Languages |
Game Programming |
Mobile Development |
Software Development |
Computer Science |
Industry News |
Programming Tutorials |
C++ Tutorials |
Visual Basic Tutorials |
Java Tutorials |
VB.NET Tutorials |
C# Tutorials |
Linux Tutorials |
PHP Tutorials |
ColdFusion Tutorials |
Windows Tutorials |
HTML/JavaScript Tutorials |
CSS Tutorials |
Flash Tutorials |
Web Promotion Tutorials |
Graphic Design & Photoshop Tutorials |
Software Development Tutorials |
Database Tutorials |
Other Language Tutorials |
ASP.NET Tutorials |
Game Programming Tutorials |
WPF & Silverlight Tutorials |
| 
