Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7

Thread: Image Rollovers

  1. #1
    Regular Coder
    Join Date
    Jun 2011
    Posts
    119
    Thanks
    43
    Thanked 0 Times in 0 Posts

    Question Image Rollovers

    Say we have an image called imagefile.jpg, which we want to display when the user mouses over an already-displayed image.Now I want to preload more than just one image; for example, in a menu bar containing multiple image rollovers,or if I try to create a smooth animation effect what should i do?
    I tried the following code but it doesn't work. Please help
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <script language="JavaScript">
    function preloader() 
    {
         // counter
         var i = 0;
         // create object
         imageObj = new Image();
         // set image list
         images = new Array();
         images[0]="1.jpg"
         images[1]="2.jpg"
         images[2]="3.jpg"
         images[3]="4.jpg"
         // start preloading
         for(i=0; i<=3; i++) 
         {
              imageObj.src=images[i];
         }
    } 
    </script>
    </head>
    <body onLoad="javascript:preloader()">
    <a href="#" onMouseOver="javascript:document.img01.src='1.jpg'">
    <img name="img01" src="4.jpg"></a>
    </body>
    </html>
    Mainly I want to create the animation effect with the 4 images. Is that possible?
    Last edited by ippo; 09-23-2011 at 08:32 AM.

  • #2
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    7
    Thanks
    0
    Thanked 1 Time in 1 Post
    I guess you are trying to say when the mouse is over the image, it become an auto slidershow???


    html
    Code:
    <img src="Img_001.jpg" onmouseover="changeimg();" onmouseout="stop();" id="img"/>
    js
    Code:
    var t;	var i=1;
    function changeimg(){
    	document.getElementById('img').src='Img_00'+i+'.jpg';
    	t=setTimeout("changeimg()",1000);
    	if(i==3){i=1;}
    	i++;
    }
    
    function stop(){
    	clearTimeout(t);
    }

  • #3
    Regular Coder
    Join Date
    Jun 2011
    Posts
    119
    Thanks
    43
    Thanked 0 Times in 0 Posts
    Hi Desmondowq,
    No your code is not working as it should.
    See I have 4 images in the same folder as the program file - 1.jpg,2.jpg,3.jpg & 4.jpg.
    I want that if I mouse-over each image it should change to next in a cyclical order with a smooth rollover.
    But your program shows one image(1.jpg) shown at the time browser opens ,then when i mouseover there is another image(2.jpg) which instantly flashes out to show 3.jpg when i mouse-over. But after the 3.jpg the 4.jpg is not shown and then it doesn't change to 1.jpg.
    So all the 4 images are not being shown like a slideshow when i mouse-over.
    Hope you now get my point.
    Anyways what i tried with your code is here for you to check-
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <script>
    var t;	var i=1;
    function changeimg(){
    	document.getElementById('img').src=i + '.jpg';
    	t=setTimeout("changeimg()",1000);
    	if(i==3){i=1;}
    	i++;
    }
    
    function stop(){
    	clearTimeout(t);
    }
    </script>
    </head>
    
    <body>
    
    <img src="1.jpg" onmouseover="changeimg();" onmouseout="stop();" id="img"/>
    </body>
    </html>
    Any further suggestions?
    Last edited by ippo; 09-23-2011 at 11:48 AM.

  • #4
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    7
    Thanks
    0
    Thanked 1 Time in 1 Post
    still kinda confuse.. are you saying when a browser is loaded. 4 four img were be display example

    <1.jpg><2.jpg><3.jpg><4.jpg> //display in the browser?

    in cyclical order if you mouse over 1?
    <2.jpg><3.jpg><4.jpg><1.jpg> //display in the browser?
    it display this?

    or there is this link
    link
    everytime u mouseover u get a different img in cyclical order?

  • #5
    Regular Coder
    Join Date
    Jun 2011
    Posts
    119
    Thanks
    43
    Thanked 0 Times in 0 Posts
    Hi Desmondowq,
    Exactly,I want the 1st one, that is ,
    <1.jpg><2.jpg><3.jpg><4.jpg> //display in the browser in cyclical order if I mouse over 1?
    your link is not working
    Last edited by ippo; 09-24-2011 at 03:50 AM.

  • #6
    Regular Coder
    Join Date
    Jun 2011
    Posts
    119
    Thanks
    43
    Thanked 0 Times in 0 Posts

    Question

    Hi desmond,
    ur link doesn't work.
    Will be thankful if u answer.
    Last edited by ippo; 09-24-2011 at 05:46 PM.

  • #7
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,504
    Thanks
    3
    Thanked 501 Times in 488 Posts
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    LinkBacks (?)


    Posting Permissions

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