SitePoint Sponsor |
|
User Tag List
Results 1 to 5 of 5
Thread: How can I preload these images?
-
Aug 17, 2007, 19:06 #1
- Join Date
- Aug 2007
- Posts
- 4
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
How can I preload these images?
I have some Javascript (.js attached as .txt) that works onMouseOver of an image both makes it shine and fades in another image at a different location on the screen.
Here is how I am calling it:
<img id="1" src="images/about.jpg" class="gradualshine" onMouseover="h('1','d'); d(450,245,'images/about_desc.jpg',500,35)" onMouseout="l('1'); l0('d')" alt="" border="0" width="171" height="162">
("d" is a div object that is not visible until this script activates it)
This is being used on http://www.tccommerce.com.
What I need to do is preload six images. What's happening is that the menu graphics load, then the user is moving the mouse over each one, but there is often a delay while the browser downloads "about_desc.jpg" and the images that correspond to the other menu options.
I need to tweak this script to preload these images so it is seamless. Any help is greatly appreciated.
-
Aug 17, 2007, 20:13 #2
use the Image Object.
-
Aug 17, 2007, 20:16 #3
- Join Date
- Aug 2007
- Posts
- 4
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Can you show me the usage? I apologize, I don't know anything at all about Javascript. I hired someone to do that code for me.
-
Aug 18, 2007, 12:14 #4
- Join Date
- Aug 2007
- Posts
- 4
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
OK, I have tried using the image object to preload and it's not working.
I've inserted the following in my header:
<SCRIPT LANGUAGE = JAVASCRIPT>
if (document.images)
{
about1 = new Image();
about2 = new Image();
about3 = new Image();
about4 = new Image();
about5 = new Image();
about6 = new Image();
about1.src = "images/about_desc.jpg";
about2.src = "images/about_www.jpg"
about3.src = "images/about_ecommerce.jpg";
about4.src = "images/about_seo.jpg"
about5.src = "images/about_data.jpg";
about6.src = "images/about_design.jpg"
}
</SCRIPT>
This is an example of me calling one of the images from the body:
<img id="i1" src="images/about.jpg" class="gradualshine" onMouseover="h('i1','d'); d(450,245,'images/about_desc.jpg',500,35)" onMouseout="l('i1'); l0('d')" alt="" border="0" width="171" height="162">
.... where 'd' is a div object to which I pass the X and Y location, the image name, and image size.
Though I am preloading images/about_desc.jpg, when I call it from the onMouseOver function here, it isn't preloaded.
Any help is appreciated.
-
Aug 20, 2007, 08:15 #5
- Join Date
- Aug 2007
- Posts
- 4
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
*bump*
Bookmarks