how to change images on mouseover and leave

Question

here is my site: http://iaddesign.com/beta/portfolio.php

i tried this:

$("#portfolio li img").hover(

function() {


 $(this).attr("src", function() {

 return "images/" + this.alt + ".png";

 }),


 $(this).attr("src", function() {


 return "images/" + this.alt + "-over.png";

 });

but what it does is not show the image (for some reason) then when i mouse over the image shows then when i take my mouse off nothign happends. i want all is

when the page loads the each images src will equal to what is in the alt attribuate concated with .png

but when the mouse goes over the image the src equals

its alt attribe + "-over.png" then when the mouse leaves it goes back to what alt was + ".png"

Answer 1

Something like this?

$("#portfolio li img").bind('mouseover', function(){
    this.src = "images/" + this.alt + "-over.png";    
});

$("#portfolio li img").bind('mouseout', function(){
    this.src = "images/" + this.alt + ".png";
});

Answer 2

In your second function of the hover, you have forgot to make a function ...

the

 $(this).attr("src", function() {
   return "images/" + this.alt + "-over.png";
 });

should be

function(){
 $(this).attr("src", function() {
   return "images/" + this.alt + "-over.png";
 });
}

Additionally, you do not have to use a function to create the new name .. you could do it directly..

so

$(this).attr("src", function() {
   return "images/" + this.alt + "-over.png";
 });

could be just

$(this).attr("src", "images/" + this.alt + "-over.png");

Answer 3

This code may accomplish what you are trying to. hover() takes 2 parameters, the first is the event handler for mouseenter and the 2nd for mouseleave. Additionally, it isn't entirely necessary to use an anonymous function with attr() if all you are doing is building a simple string.

$("#portfolio li img").hover(
    function() {
        $this = $(this);
        $this.attr("src", "images/" + $this.attr('alt') + ".png");
    },
    function() {
        $this = $(this);
        $this.attr("src", "images/" + $this.attr('alt') + "-over.png");
    }
);

This code should be better optimized. Enjoy :)