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

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.

Answers


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.


Need Your Help

Anonymous User: You are not authorized to access this page. Permissions OK

drupal drupal-6 drupal-modules access-denied

After rebuilding permissions, running cron, flushing caches, dotting the i's and crossing the t's, I've come the the bug report zone. I'm out of ideas, at this point:

How to change parent background color in expandablelistview when parent selected?

android

I want to change background color of selected position of parent when it expand in expandablelistview and when I again press parent for collapse then it would again change background color at sele...