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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    changing images on mouseover

    I am probably use way too much code to have this done.. but this is what I came up with..

    Code:
    $(function() {
        $("#mail")
            .mouseover(function() { 
                var src = $(this).attr("src").match(/[^\.]+/) + "_over.png";
                $(this).attr("src", src);
    	    $(this).css("bottom", 10);
    
                $(".msg").text("Signup for Alpha Web Pro, you get your own email account with us. [username]@alphawebpro.com").show("slow");
    
            })
            .mouseout(function() {
                var src = $(this).attr("src").replace("_over", "");
                $(this).attr("src", src);
    	    $(this).css("bottom", "5");
    	    $(".msg").text("").hide("slow");
            });
    
    
        $("#user")
            .mouseover(function() { 
                var src = $(this).attr("src").match(/[^\.]+/) + "_over.png";
                $(this).attr("src", src);
    	    $(this).css("bottom", 10);
    
                $(".msg").text("Check out the Alpha Web Pro community. There you can interact with your programming friends and post things to the forum").show("slow");
    
            })
            .mouseout(function() {
                var src = $(this).attr("src").replace("_over", "");
                $(this).attr("src", src);
    	    $(this).css("bottom", "5");
    	    $(".msg").text("").hide("slow");
            });
    });
    
    
        $("#analytics")
            .mouseover(function() { 
                var src = $(this).attr("src").match(/[^\.]+/) + "_over.png";
                $(this).attr("src", src);
    	    $(this).css("bottom", 10);
    
                $(".msg").text("COMING SOON! - Website analytics for any and all of your websites you wish to monitor").show("slow");
    
            })
            .mouseout(function() {
                var src = $(this).attr("src").replace("_over", "");
                $(this).attr("src", src);
    	    $(this).css("bottom", "5");
    	    $(".msg").text("").hide("slow");
            });
    });
    
    
        $("#shop")
            .mouseover(function() { 
                var src = $(this).attr("src").match(/[^\.]+/) + "_over.png";
                $(this).attr("src", src);
    	    $(this).css("bottom", 10);
    
                $(".msg").text("Go shopping at Alpha Web Pro.com; we have what you are looking for. Website templates, scripts, and ebooks for noobs all the way to master coder").show("slow");
    
            })
            .mouseout(function() {
                var src = $(this).attr("src").replace("_over", "");
                $(this).attr("src", src);
    	    $(this).css("bottom", "5");
    	    $(".msg").text("").hide("slow");
            });
    });
    Problem is it doesn't do anything. When I only have one image set to change on mouseover it works fine.. I put two or more in there it doesn't work on any of the images.

    Any idea whats going on?
    Thanks in advanced!

  • #2
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    oops never mind. there was a curly brace where it shouldn't have been.

    Still have a question though.. when I put my mouse over an image it changes and moves up 5px then displays a msg div box with content in it. that box flashes. It shows then hides shows and hides and shows until you move the mouse away. Is that related to to having the image move up 5px? if so.. how could I fix that?
    Thanks


  •  

    Posting Permissions

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