Magento CMS中的jQuery图像翻转页面

Question

我在Magento的CMS页面上有几个图标。当我将它们悬停时，我希望它们变成蓝色。我正在使用以下脚本来更改悬停时的图像：

$(function() {
    $("#icons img")
        .mouseover(function() { 
            var src = $(this).attr("src").match(/[^\.]+/) + "_bl.png";
            $(this).attr("src", src);
         })
        .mouseout(function() {
             var src = $(this).attr("src").replace("_bl.png", ".png");
             $(this).attr("src", src);
        });
});

当我在Magento之外构建页面时，这很有用。由于我使用了WYSIWYG图像插入，img src看起来像这样：

<img src="{{media url="wysiwyg/support/icons/faq.png"}}" alt="Frequently Asked Questions" />

当我将鼠标悬停在图像上时，出现控制台错误：

GET http://www_bl.png/ net::ERR_NAME_NOT_RESOLVED

如何调整JavaScript以考虑不同的src格式？