Replace part of an image url in ASP.NET using JQuery

Question

Hi,

I have a script which translates an image url to a path and works fine for an image fade on primary node navigation. The script below gives me:

http://localhost/Bar/App_Themes/main/images/Beers-Faded.gif

Once I navigate one node deeper it adds the application path to the url and the function fails:

http://localhost/bar/Bar/App_Themes/main/images/Beers-Faded.gif

jQuery:

$(function ()  {
   $('img.fade').each(function ()  {
    var $$ = $(this);
    var target = $$.css('background-image').replace(/^url|["]|[\)\(]/g, '');
    $$.wrap('<span style="position:relative;"></span>')
     .parent() // span elements
     .prepend('<img>')
     .find('img:first') // selector now new image
     .attr('src', target);
    console.log(target);     
    $$.css({
     'position': 'absolute',
     'left': 0,
     'top': this.offsetTop
    });
    $$.hover(function () {
     $$.stop().animate({
      opacity: 0
     }, 250);
    }, function ()  {
     $$.stop().animate({
      opacity: 1
     }, 250);
    });
  });
});

Image:

<img class="fade" runat="server" src="~/App_Themes/main/images/Beers-Color.jpg" style="background-image: url('../Bar/App_Themes/main/images/Beers-Faded.gif');" />`

Can you help me find the part of the code which I change to accommodate for the sitemap navigation? My site will only ever go three levels deep.

Many thanks,

James.

Answer 1

Ok so I got to the solution with the help of 'OReilly - Regular Expressions Cookbook' page 41. 'Match whole words'

The following code doesn't look for the second occurance but just the first without looking further in the path.. (I think). I just added \/\bbar\b.

var target = $$.css('background-image').replace(/^url|["]|\b(\w+)\s+\1\b|\/\bbar\b|[)(]/g, '');

Hope this helps anyone else who runs into the same problem.

James.