SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Member
    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.
    Attached Files Attached Files

  2. #2
    SitePoint Wizard bronze trophy Kailash Badu's Avatar
    Join Date
    Nov 2005
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    use the Image Object.

  3. #3
    SitePoint Member
    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.

  4. #4
    SitePoint Member
    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.

  5. #5
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    *bump*


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •