[jQuery] Re: Hover Area - Change image

2009-08-26 Thread Leonard Martin 

You're not actually setting the source once you've replaced it:

$('li.clickable').hover(function() {
$(this).find('img').attr('src', $(this).find('img').attr
('src').replace(_off,_over));
}, function() {
   $(this).find('img').attr('src', $(this).find('img').attr
('src').replace(_over,_off));
});

It might be worth setting a variable to $('li.clickable').find('img')
as well since it's used 4 times in there, just to reduce overhead.



On Aug 26, 4:44 pm, wheatstraw psurr...@gmail.com wrote:
 OK! we're close...

 If I attach this to a variable and echo it out, it give's me the
 correct string. The _off is replaced with _over and the other way
 around. As I have it below, on hover, the image will not change, no
 errors (firebug), just doesn't do anything.

 $('li.clickable').hover(function() {
         $(this).find('img').attr('src').replace(_off,_over);}, function() 
 {

         $(this).find('img').attr('src').replace(_over,_off);

 });

[jQuery] Re: Hover Area - Change image

2009-08-26 Thread wheatstraw 

OK! we're close...

If I attach this to a variable and echo it out, it give's me the
correct string. The _off is replaced with _over and the other way
around. As I have it below, on hover, the image will not change, no
errors (firebug), just doesn't do anything.

$('li.clickable').hover(function() {
$(this).find('img').attr('src').replace(_off,_over);
}, function() {
$(this).find('img').attr('src').replace(_over,_off);
});

[jQuery] Re: Hover Area - Change image

2009-08-26 Thread wheatstraw 

That worked, thank you so much!

On Aug 26, 11:56 am, Leonard Martin leonard.mar...@gmail.com wrote:
 You're not actually setting the source once you've replaced it:

 $('li.clickable').hover(function() {
         $(this).find('img').attr('src', $(this).find('img').attr
 ('src').replace(_off,_over));}, function() {

        $(this).find('img').attr('src', $(this).find('img').attr
 ('src').replace(_over,_off));

 });

 It might be worth setting a variable to $('li.clickable').find('img')
 as well since it's used 4 times in there, just to reduce overhead.

 On Aug 26, 4:44 pm, wheatstraw psurr...@gmail.com wrote:

  OK! we're close...

  If I attach this to a variable and echo it out, it give's me the
  correct string. The _off is replaced with _over and the other way
  around. As I have it below, on hover, the image will not change, no
  errors (firebug), just doesn't do anything.

  $('li.clickable').hover(function() {
          $(this).find('img').attr('src').replace(_off,_over);}, 
  function() {

          $(this).find('img').attr('src').replace(_over,_off);

  });

[jQuery] Re: Hover Area - Change image

2009-08-26 Thread amuhlou 

I think keeping the source in a variable is the key here, try this:

$('li.clickable').hover(function() {
var newsrc = $(this).find('img').attr('src').replace
(_off,_over);
$(this).find('img').attr({src: newsrc});
}, function() {
var oldsrc = $(this).find('img').attr('src').replace
(_over,_off);
$(this).find('img').attr({src: oldsrc});
});

On Aug 26, 3:44 pm, wheatstraw psurr...@gmail.com wrote:
 OK! we're close...

 If I attach this to a variable and echo it out, it give's me the
 correct string. The _off is replaced with _over and the other way
 around. As I have it below, on hover, the image will not change, no
 errors (firebug), just doesn't do anything.

 $('li.clickable').hover(function() {
         $(this).find('img').attr('src').replace(_off,_over);}, function() 
 {

         $(this).find('img').attr('src').replace(_over,_off);

 });

[jQuery] Re: Hover Area - Change image

2009-08-26 Thread Leonard Martin 

Yes, you (wheatstraw) just need to remember that attr('src') returns a
string and *not* a reference to the src attribute.



On Aug 26, 5:16 pm, amuhlou amysch...@gmail.com wrote:
 I think keeping the source in a variable is the key here, try this:

 $('li.clickable').hover(function() {
         var newsrc = $(this).find('img').attr('src').replace
 (_off,_over);
         $(this).find('img').attr({src: newsrc});}, function() {

         var oldsrc = $(this).find('img').attr('src').replace
 (_over,_off);
         $(this).find('img').attr({src: oldsrc});

 });

 On Aug 26, 3:44 pm, wheatstraw psurr...@gmail.com wrote:

  OK! we're close...

  If I attach this to a variable and echo it out, it give's me the
  correct string. The _off is replaced with _over and the other way
  around. As I have it below, on hover, the image will not change, no
  errors (firebug), just doesn't do anything.

  $('li.clickable').hover(function() {
          $(this).find('img').attr('src').replace(_off,_over);}, 
  function() {

          $(this).find('img').attr('src').replace(_over,_off);

  });

[jQuery] Re: Hover Area - Change image

2009-08-25 Thread Liam Potter 


It's because you have targeted the image as the hover area rather then 
the li, use this instead


$(li.clickable).hover(function() {
$(this).children(img).attr(src, 
$(this).attr(src).split(_off).join(_over));
}, function() {
$(this).children(img).attr(src, 
$(this).attr(src).split(_over).join(_off));
});

Hover over the li, then get the child element within the context of 
'this' to perform the actions to it.


wheatstraw wrote:

What I want to have happen is when you hover over the li it:
1) allows you to click the who area (this works)
2) The image swap.

Right now the image will only swap when hovering over the image not
the rest of the li.

Any help would be appreciated!

$(document).ready(function(){
$('li.clickable').css('cursor', 'pointer').click(function() {
window.location = $('a', this).attr('href');
});


$(li.clickable img).hover(function() {
$(this).attr(src, $(this).attr(src).split(_off).join
(_over));
}, function() {
$(this).attr(src, $(this).attr(src).split(_over).join
(_off));
});
});

[jQuery] Re: Hover Area - Change image

2009-08-25 Thread wheatstraw 

Thanks but it doesn't seem to work...

li class=clickableimg src=http://localhost/wrt-demo/images/
projects/boxes/13_off.jpg  alt=Abuja Master Plan /  p
class=entryTexta href=http://localhost/wrt-demo/projects/detail/
Abuja-Master-Plan/13Abuja Master Plan/a/p/li

$(.clickable).hover(function() {
$(this).children(img).attr(src, $(this).attr(src).split
(_off).join(_over));
}, function() {
$(this).children(img).attr(src, $(this).attr(src).split
(_over).join(_off));
});


This works but not what I was trying to achieve:
$(.clickable img).hover(function() {
$(this).attr(src, $(this).attr(src).split(_off).join
(_over));
}, function() {
$(this).attr(src, $(this).attr(src).split(_over).join
(_off));
});



On Aug 25, 10:52 am, Liam Potter radioactiv...@gmail.com wrote:
 It's because you have targeted the image as the hover area rather then
 the li, use this instead

 $(li.clickable).hover(function() {
         $(this).children(img).attr(src, 
 $(this).attr(src).split(_off).join(_over));}, function() {

         $(this).children(img).attr(src, 
 $(this).attr(src).split(_over).join(_off));

 });

 Hover over the li, then get the child element within the context of
 'this' to perform the actions to it.

 wheatstraw wrote:
  What I want to have happen is when you hover over the li it:
  1) allows you to click the who area (this works)
  2) The image swap.

  Right now the image will only swap when hovering over the image not
  the rest of the li.

  Any help would be appreciated!

  $(document).ready(function(){
     $('li.clickable').css('cursor', 'pointer').click(function() {
             window.location = $('a', this).attr('href');
     });

     $(li.clickable img).hover(function() {
             $(this).attr(src, $(this).attr(src).split(_off).join
  (_over));
     }, function() {
             $(this).attr(src, $(this).attr(src).split(_over).join
  (_off));
     });
  });

[jQuery] Re: Hover Area - Change image

2009-08-25 Thread amuhlou 

children() only works for direct children of an element, so if your
img is wrapped in an a, it won't find the right element.


Try using find() instead:

$(li.clickable).hover(function() {
$(this).find(img).attr(src, $(this).attr(src).split
(_off).join(_over));
}, function() {

$(this).find(img).attr(src, $(this).attr(src).split
(_over).join(_off));

});


On Aug 25, 5:05 pm, wheatstraw psurr...@gmail.com wrote:
 Thanks but it doesn't seem to work...

 li class=clickableimg src=http://localhost/wrt-demo/images/
 projects/boxes/13_off.jpg  alt=Abuja Master Plan /                        
 p
 class=entryTexta href=http://localhost/wrt-demo/projects/detail/
 Abuja-Master-Plan/13Abuja Master Plan/a/p/li

 $(.clickable).hover(function() {
         $(this).children(img).attr(src, $(this).attr(src).split
 (_off).join(_over));}, function() {

         $(this).children(img).attr(src, $(this).attr(src).split
 (_over).join(_off));

 });

 This works but not what I was trying to achieve:
 $(.clickable img).hover(function() {
         $(this).attr(src, $(this).attr(src).split(_off).join
 (_over));}, function() {

         $(this).attr(src, $(this).attr(src).split(_over).join
 (_off));

 });

 On Aug 25, 10:52 am, Liam Potter radioactiv...@gmail.com wrote:

  It's because you have targeted the image as the hover area rather then
  the li, use this instead

  $(li.clickable).hover(function() {
          $(this).children(img).attr(src, 
  $(this).attr(src).split(_off).join(_over));}, function() {

          $(this).children(img).attr(src, 
  $(this).attr(src).split(_over).join(_off));

  });

  Hover over the li, then get the child element within the context of
  'this' to perform the actions to it.

  wheatstraw wrote:
   What I want to have happen is when you hover over the li it:
   1) allows you to click the who area (this works)
   2) The image swap.

   Right now the image will only swap when hovering over the image not
   the rest of the li.

   Any help would be appreciated!

   $(document).ready(function(){
      $('li.clickable').css('cursor', 'pointer').click(function() {
              window.location = $('a', this).attr('href');
      });

      $(li.clickable img).hover(function() {
              $(this).attr(src, $(this).attr(src).split(_off).join
   (_over));
      }, function() {
              $(this).attr(src, $(this).attr(src).split(_over).join
   (_off));
      });
   });