SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast swollenpickles's Avatar
    Join Date
    Jul 2007
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    rollover not rolling

    I'm having trouble with an image preloader and roll over function and can't see where it is that I've screwed up.
    If anyone out there can take a look at this and give me a push in the right direction it'd be appreciated.
    Cheers

    Here's the javascript:

    Code:
    <script>	
    	preloadNavImages = new Array();
    
    	image_url = new Array(6);
    	image_url[0] = "images/navMenu/button1.jpg";
    	image_url[1] = "images/navMenu/button1_over.jpg";
    	image_url[2] = "images/navMenu/button2.jpg.jpg";
    	image_url[3] = "images/navMenu/button2_over.jpg";
    	image_url[4] = "images/navMenu/button3.jpg.jpg";
    	image_url[5] = "images/navMenu/button3_over.jpg";
    	
    
    
    	for(i=0; i < image_url.length; i++) { 
    		preloadNavImages[i] = new Image;
    		preloadNavImages[i].src = image_url[i];
    	}
    
    	function rollOver(image,position) {
    	image.src = image_url[position].src
    	}
    
    </script>
    Here's an example of what I have in the body:
    Code:
    <a href="home.html"><img src="images/navMenu/button1.jpg"
    	onMouseOver="rollOver(this,1)"
    	onMouseOut="rollOver(this,0)"
    /></a>

  2. #2
    SitePoint Member
    Join Date
    Jul 2007
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    try them without caps

    Code:
    <a href="home.html"><img src="images/navMenu/button1.jpg"
    	onmouseover="rollOver(this,1)"
    	onmouseout="rollOver(this,0)"
    /></a>

  3. #3
    SitePoint Enthusiast swollenpickles's Avatar
    Join Date
    Jul 2007
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rohitchawla View Post
    try them without caps

    Code:
    <a href="home.html"><img src="images/navMenu/button1.jpg"
    	onmouseover="rollOver(this,1)"
    	onmouseout="rollOver(this,0)"
    /></a>
    Thanks for looking at it. I've changed the caps and it's still not working.

  4. #4
    SitePoint Member
    Join Date
    Jul 2007
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    try this as well

    Code:
    preloadNavImages[i] = new Image();

  5. #5
    SitePoint Wizard bronze trophy Kailash Badu's Avatar
    Join Date
    Nov 2005
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    See the function you have written:
    Code:
    function rollOver(image,position) {
        image.src = image_url[position].src;
        }
    It ought to be:
    Code:
    function rollOver(image,position) {
        image.src = image_url[position];
        }
    I don't think I need to explain the reason.

  6. #6
    SitePoint Member
    Join Date
    Jul 2007
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmmm yea
    i didn't see that as well

  7. #7
    SitePoint Wizard bronze trophy Kailash Badu's Avatar
    Join Date
    Nov 2005
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Or:
    Code:
    function rollOver(image,position) {
        image.src = preloadNavImages[position].src;
        }

  8. #8
    SitePoint Wizard bronze trophy Kailash Badu's Avatar
    Join Date
    Nov 2005
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rohitchawala
    hmmm yea
    i didn't see that as well
    Besides, onMouseOver and onmouseover are same when it's HTML. HTML is case insensitive. However things would be different in XHTML because it requires attributes to be written in lowercase. Consequently, onMouseOver won't pass the validation.

  9. #9
    SitePoint Member
    Join Date
    Jul 2007
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks kailash
    well i am also new to javascript and trying to learn it as well

  10. #10
    SitePoint Enthusiast swollenpickles's Avatar
    Join Date
    Jul 2007
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kailash Badu View Post
    See the function you have written:
    Code:
    function rollOver(image,position) {
        image.src = image_url[position].src;
        }
    It ought to be:
    Code:
    function rollOver(image,position) {
        image.src = image_url[position];
        }
    I don't think I need to explain the reason.
    Awesome! Thanks very much. I'm still learning obviously, but thanks for your help!!


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
  •