Question

as i have to create a function which can change the image (src/ background-url). I wanted to know how can be identified a tag & whether it’s using src or url to access the image.
Let say

<div class="parent">
  <input type="button" class="change" style="background-image:url('image1.jpg')" />
  <img class="change" src="/image2.gif" />
</div>

earlier i wrote a fn which can change the background-image url but this fn isn’t able to replace <img> src

$(function(){
   $('.change').click(function(){ 
       var url = getUrl_by_Ajax() /* this fn returns the file path */
       $(this).css('background',url); /* it can only change the background image not img src*/
    /* following line can change the src if this function knows already whether it's  
       src/url  */
     $(this).attr('src', url);
  });
});

my questions are :

1. How to get dynamically about selector’s tag and it’s css for image

2. how many ways to access the image e.g. button uses url & img uses src.

   <input type="button" background-img: url('...'); />
<img src= "...." />

   ? ? ?

Answer 1

Try something like this:

$(function(){
   $('.change').click(function(){ 
       var url = getUrl_by_Ajax() /* this fn returns the file path */
       if ($(this).is('img'))
           $(this).attr('src', url);
       else
           $(this).css('background', url);
  });
});