Question

Ok so I am trying to make 5 images change on hover based on their titles. I have a code, and it partly works, I believe I am not writing it correctly. So I am going to post two tries and hopefully someone will understand what I am trying to do.

$(document).ready(function() { 
var found = $('.user-basic-info img'); 
 found.filter('[src="http://i13.servimg.com/u/f13/17/83/35/07/adminn10.png"]')
  .hover(function(){
 $(this).closest('img').replaceWith('<img alt="" src="http://i13.servimg.com/u/f13/17/83/35/07/adming10.png"/>');
 });
});



$(document).ready(function() { 
var found = $('.user-basic-info img'); 
 found.filter('[src="http://i13.servimg.com/u/f13/17/83/35/07/adminn10.png"]')
  .hover(function(){
 $(this).closest('img').onMouseEnter('<img alt="" src="http://i13.servimg.com/u/f13/17/83/35/07/adming10.png"/>').onMouseOut('<img alt="" src="http://i13.servimg.com/u/f13/17/83/35/07/adminn10.png"/>');
 });
}); //this code works partly as well, I just get no method of onMouseEnter

First time using hover effects to change image back and forth. I also need to be able to make this compatible to work with 5 other images so I would have to have variables for each “src” or rather title

To clarify one question for the .filter can we do the same for title? like so [title="Founder"] Just wondering because the above (about variables) I wanted to know if I could write…

var a = $('.user-basic-info img').filter('[title="Founder"]');

var b = $('.user-basic-info img').filter('[title="Founder"]');

Just wondering

Code I am using now::

$(function(){
var a = $('.user-basic-info img[title=Founder]');
var b = $('.user-basic-info img[title=Manager]');
var c = $('.user-basic-info img[title=Members]');
var d = $('.user-basic-info img[title=Technician]');
var e = $('.user-basic-info img[title=Moderator]');
var f = $('.user-basic-info img[title=Presidential]');
  $(div.post).hover(function() {
 a.attr('src','http://i13.servimg.com/u/f13/17/83/35/07/adming10.png');
  },
function() {
  a.attr('src','http://i13.servimg.com/u/f13/17/83/35/07/adminn10.png');
 });
});

Answer 1

You can try this:

$(document).ready(function() { 
    $('.user-basic-info img[title=Founder]').hover(
        function() {
            $(this).attr('src', "http://i13.servimg.com/u/f13/17/83/35/07/adming10.png"​);
        },
        function() {
            $(this).attr('src', "http://i13.servimg.com/u/f13/17/83/35/07/adminn10.png");
        }
    );
});