www.webdeveloper.com
Results 1 to 7 of 7

Thread: Change image on rollover

Hybrid View

  1. #1
    Join Date
    Apr 2010
    Posts
    5

    Change image on rollover

    Hi,
    I essentially have this code below and what I am trying to do is change the image when the mouse rolls over it but change it back when the mouse leaves. What am I doing wrong?

    HTML Code:
    <html>
    <script type="text/javascript">
    function ShowFlip(number)
    {
    document.getElementById( number ).innerHTML = '<img src="../events/1flip.jpg">';
    }
    
    function HideFlip(number)
    {
    document.getElementById( number ).innerHTML = '<img src="../events/1.jpg">';
    }
    </script>
    
    <body>
    <a id="1" style="cursor:default;" 
    onMouseOver="ShowFlip('1');"
    onMouseOut="HideFlip('1');">
    <img src="../events/1.jpg">
    </a>
    </body>
    </html>
    I have also tried assigning the id to the image and came up with this code but it still doesn't change anything. Just shows the original image. Any help is appreciated! Thanks!

    HTML Code:
    <html>
    
    <script type="text/javascript">
    function ShowFlip(number)
    {
    document.getElementById('a').src = "../events/1flip.jpg";
    }
    
    function HideFlip(number)
    {
    document.getElementById('a').src = "../events/1.jpg";
    }
    </script>
    
    <body>
    <div>
    	<img id="a" src="../events/1.jpg" onMouseOver="ShowFlip('a');"
    	onMouseOut="HideFlip('a');">
    </div>
    </body>
    </html>

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    A different approach using css:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <style type="text/css">
    * {margin:0;padding:0;}
    #a1 {
    display:block;
    width:100px;
    height:20px;
    background:blue url(image1.jpg) no-repeat;
    }
    #a1:hover {
    background:blue url(image2.jpg) no-repeat;
    }
    </style>
    
    </head>
    <body>
    <div>
    	<a href="index.htm" id="a1" title="foobar"></a>
    </div>
    </body>
    </html>
    A number id is invalid: http://www.w3.org/TR/html401/types.html#type-name
    At least 98% of internet users' DNA is identical to that of chimpanzees

  3. #3
    Join Date
    Mar 2010
    Posts
    2,803
    You really need only 1 function to handle the image swapping.

    Personally, I prefer to preload the images, especially if they are large, because using css :hover might not always give an instant image swap if the images are large and/or uncached.

    Maybe use this as a template:

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
    >
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    title></title>
    <
    script type="text/javascript">
    <!--

    imgPaths = new Array();
    imgPaths = ['pic1.jpg',
                
    'pic2.jpg'];
    myImgs = new Array();
     
    //preload the images
    for(var i in imgPaths) {
        
    myImgs[i] = new Image();
        
    myImgs[i].src imgPaths[i];
    }
     
    var 
    picNum 0;
    function 
    swapImg(elemId) {
        
    document.getElementById(elemId).src myImgs[picNum].src;
        if(
    picNum == 1) {
            
    picNum 0;   
        } else {
            
    picNum 1;
        }
    }
     
    //-->
    </script>

    </head>
    <body>

        <div>
            <img id="myPic" src="pic1.jpg" alt="myPic" onmouseover="swapImg(this.id);" onmouseout="swapImg(this.id);">
        </div>

    </body>
    </html> 

  4. #4
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Well,hm... I have never trusted the preloader codes. After all, the new Image() constructor creates a javascript object, and it does not load the image into the browser's cache by all means. In theory it should, but the browsers' interpreters do not always follow the theory

    I remember I have made once a simple test in IE6 and IE7. I have used new Image() to create the object but without displaying it, actually. I have checked the browser's cache (IE Temporary File) but no image was there . maybe IE8 has bypassed this problem... I think I should check that again

  5. #5
    Join Date
    Mar 2010
    Posts
    2,803
    Preloaded images are stored locally, but whether it is in the browser's normal cache or elsewhere I don't know. I really don't care where they are stored locally.

    In my experience, preloaded images definitely load virtually instaneously when called in some sort of animation (image swap, slideshow etc). With non preloaded images I sometimes notice a delay in the image appearing when called because the browser downloads it from the server rather than get it locally.

    I currently support IE8, IE7, FF3.6, OP9, OP10, Safari (for Windows) and Chrome. In all these browsers preloaded images, especially large ones, load very much quicker than non preloaded images in my experience.

    I will always preload images that will be used in some kind of animation. Images that are not used in animations, I may or may not preload depending on the circumstances.

    For anyone interested, an interesting read on javascripts Image object.

    http://articles.techrepublic.com.com...1-5214317.html
    Last edited by tirna; 04-21-2010 at 05:07 AM.

  6. #6
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by tirna View Post
    Preloaded images are stored locally, but whether it is in the browser's normal cache or elsewhere I don't know. I really don't care where they are stored locally.
    You should care. If the images are not stored locally and the code uses absolute URL, some browsers will load the images again and again from the server. Which is exactly what we try to avoid

  7. #7
    Join Date
    Mar 2010
    Posts
    2,803
    Quote Originally Posted by Kor View Post
    You should care........
    I think you are miising the point I was making.

    Preloading images using the Image object will result in the images being stored locally somewhere. Whether that is in the browser's default cache folder, some other local folder or even in RAM I do not care at all and I don't see why I need to care. For me, there are a lot more important things going on in our world at the moment to care about than where some browser is storing images

    The intention behind my preloading images is to ensure they are located locally when they are called upon by a javascript.
    Last edited by tirna; 04-21-2010 at 05:01 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles