SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    CA
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript onmouseover image switch

    I'm using the following to switch an image on hover:

    <img src="/ico/view.jpg" onmouseover="this.src='/ico/view.hover.jpg'" onmouseout="this.src='/ico/view.jpg'" />

    and the following to preload the images to switch:

    var preload = ["a.jpg", "b.jpg", "c.jpg"];
    var images = [];
    for (i = 0; i < preload.length; i++) {
    images[i] = new Image();
    images[i].src = preload[i];
    }

    The images being switched to appear a little blurry even though I can open the same images directly in the browser and they appear sharp. There is also a delay once in a while even though the images are being preloaded. Does anyone know why this is happening?

    Are there any caveats or drawbacks to doing this that I should be aware of? I haven't used Javascript before. I did notice the preload doesn't seem to work with a "cache killer" enabled in the browser.

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Hi there,

    I would do it like this:

    HTML Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Unbenanntes Dokument</title>
      </head>
      
      <body>
      
        <img id="myImage" src="http://3.bp.blogspot.com/_ss1KeGx9Bng/THgWaTaHhuI/AAAAAAAAAB0/3PLmvniAdNk/s1600/lolcats_oh-noes_ihasletgo.jpg">
        
        <script>
          var img = document.getElementById("myImage"),
              img2=new Image(),
              originalSrc = img.src;      
    
          img2.src="https://i.chzbgr.com/maxW500/6073452544/h4B353A81/";
          
          img.onmouseover = function(){
            document.getElementById('myImage').src=img2.src;
          }
          
          img.onmouseout = function(){
            document.getElementById('myImage').src=originalSrc;
          }
        </script>
      </body>
    </html>
    Does that help any?

  3. #3
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    CA
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you I will try that.

    I don't see the blurring issue any more. When preloading images like this, should the hover effect always be really fast and snappy? I'm seeing some pretty significant lag for some images, even after hovering over the same image multiple times. Should that be happening?

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Quote Originally Posted by tonearm View Post
    I don't see the blurring issue any more.
    Were you maybe specifying an incorrect image size in the image tag?
    e.g. <img width="200" height="200" src="..." />

    Quote Originally Posted by tonearm View Post
    When preloading images like this, should the hover effect always be really fast and snappy?
    Absolutely.

    Quote Originally Posted by tonearm View Post
    I'm seeing some pretty significant lag for some images, even after hovering over the same image multiple times. Should that be happening?
    No.
    If you can post a demo page, I don't mind having a look at it for you.


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
  •