替换文件名（SRC）的末尾

Question

我在这里遇到了一些问题。我在网上找到了这个脚本，并根据我的需要对它进行了一些改动。 此脚本显示鼠标onmouseover后的图像预览。

最初，只有一种方法做到这一点。但我有两个不同的部分在我的网站上，我想显示不同属性（高度，宽度）的图像。 我能够做到这一点，问题在于，在第二节中，src（文件名）是我想要显示的实际图片的缩略图，所以当它下降时，它会炸掉一张很小的图片，看起来非常糟糕。但希望这会让事情变得更简单：所有缩略图都被命名为whaterver_small.jpg和原始文件，whatever.jpg现在，如果我可以删除_small或_small.jpg并用该文件末尾的.jpg替换，对我来说原始图片，这将是伟大的。这是funcion是如何呼吁HTML：

原稿尺寸，无需改变：

<a href=http://www.whatever.net/1.html');"> 
<img alt="Copper" border="1" height="64" src="http://www.whatever.net/whatever_small.jpg" width="85" onmouseover="showImage1(this.src,this,'Whatever')" /></a> 

显示图像2，我有问题的人。

<a href=http://www.whatever.net/1.html');"> 
<img alt="Copper" border="1" height="64" src="http://www.whatever.net/whatever_small.jpg" width="85" onmouseover="showImage2(this.src,this,'Whatever')" /></a> 

这是脚本

var floatWidth = 150; // set the width of the floating image 
    var floatHeight = 100; // set its height 
    var floatWidth2 = 320; // set the width of the floating image 
    var floatHeight2 = 240; // set its height 

    var midWindow = 0; 
    var nContainer = ""; 
    var IE = false; 

    if (navigator.appName == 'Microsoft Internet Explorer'){IE = true} 

    function stayHome(m){   

      if (IE) 
        { 
        var currX = event.clientX; 
        var currY = event.clientY; 
        } 
      else  { 
        var currX = m.pageX; 
        var currY = m.pageY; 
        } 
      if (document.documentElement && document.documentElement.scrollLeft || document.documentElement && document.documentElement.scrollTop) 
        { 
        var iL = document.documentElement.scrollLeft;   
        var iV = document.documentElement.scrollTop; 
        } 
      else  { 
        var iL = document.body.scrollLeft;   
        var iV = document.body.scrollTop;   
        } 
      if (currX > midWindow+80) 
        { 
        var msgWidth = nContainer.clientWidth; 
        if (IE){nContainer.style.left = (currX-msgWidth-10+iL)+'px'} 
        else {nContainer.style.left = (currX-msgWidth-10)+'px'} 
        } 
      else  { 
        if (IE){nContainer.style.left = (currX+15+iL)+'px'} 
        else {nContainer.style.left = (currX+15)+'px'} 
        } 
      if (IE){nContainer.style.top = (currY+iV-(floatHeight/2)+70)+'px'} 
      else {nContainer.style.top = (currY-(floatHeight/2)+70)+'px'} 
    }   

    function hideImage(){ 

      while (nContainer.lastChild) 
        {nContainer.removeChild(nContainer.lastChild)} 
      document.getElementById('isFloat').style.display = 'none'; 
    } 

    function showImage(isImg,currItem,currCaption){ 

      document.getElementById('isFloat').style.display = 'inline'; 
      nIMG = document.createElement('img'); 
      nContainer.appendChild(nIMG); 
      nIMG.setAttribute('src',isImg); 
      nIMG.setAttribute('width',floatWidth); 
      nIMG.setAttribute('height',floatHeight); 
      nCaption = document.createElement('div'); 
      nCaption.style.textAlign = "center"; 
      nCaption.style.backgroundColor = '#EAE3C6'; 
      nCaption.style.padding = '5px'; 
      nCaption.style.color = '#000000'; 
      nCaption.style.fontFamily = 'Sans-serif'; 
      nCaption.style.fontSize = '10pt'; 
      nCaption.style.borderTop = "1px solid black"; 
      nContainer.appendChild(nCaption); 
      nCaption.innerHTML = currCaption; 
      currItem.onmouseout=hideImage; 
    } 

    function showImage2(isImg,currItem,currCaption){ 

      document.getElementById('isFloat').style.display = 'inline'; 
      nIMG = document.createElement('img'); 
      nContainer.appendChild(nIMG); 
      nIMG.setAttribute('src',isImg); 
      nIMG.setAttribute('width',floatWidth2); 
      nIMG.setAttribute('height',floatHeight2); 
      nCaption = document.createElement('div'); 
      nCaption.style.textAlign = "center"; 
      nCaption.style.backgroundColor = '#EAE3C6'; 
      nCaption.style.padding = '5px'; 
      nCaption.style.color = '#000000'; 
      nCaption.style.fontFamily = 'Sans-serif'; 
      nCaption.style.fontSize = '10pt'; 
      nCaption.style.borderTop = "1px solid black"; 
      nContainer.appendChild(nCaption); 
      nCaption.innerHTML = currCaption; 
      currItem.onmouseout=hideImage; 
    } 


    function getMidWindow(){ 

      if (document.documentElement && document.documentElement.scrollLeft || document.documentElement && document.documentElement.scrollTop) 
        { 
        midWindow = document.documentElement.clientWidth/2; 
        } 
      else  { 
        midWindow = document.body.clientWidth/2; 
        } 
    } 

    function initFloatImg(){ 

      var nBody = document.getElementsByTagName('body')[0]; 
      var nDiv = document.createElement('div'); 
      nDiv.id = "isFloat"; 
      nDiv.style.position = "absolute"; 
      nDiv.style.top = "0px"; 
      nDiv.style.left = "0px"; 
      nDiv.style.border = "1px solid black"; 
      nDiv.style.padding = "5px"; 
      nDiv.style.backgroundColor = "#ffffff" 
      nBody.appendChild(nDiv); 
      nContainer = document.getElementById('isFloat'); 
      document.onmousemove = stayHome; 
      hideImage(); 
      if (!IE){document.captureEvents(Event.mousemove)} 
      getMidWindow(); 
    } 

    onload=initFloatImg; 
    onresize=getMidWindow; 

更新：

好了，我更新这个页面的脚本，它现在的作品完美。 我遇到了另一个问题，当鼠标悬停的图片靠近页面的末尾时，预览被截断。我希望能够移动预览，所以没有滚动条。 下面是一个实用的例子：http://www.soccer.com/Navigation.process?Ne=178&N=4294960224+346 图片永远不会被截断。

Answer 1

替换下在showImage2功能线

nIMG.setAttribute('src',isImg); 

与

nIMG.setAttribute('src',isImg.replace(/_small\./, '.')); 

Answer 2

这将从您所有的图像源中删除所有_small比赛，如果我理解你想要什么正确：

$("img").each(function() { 
    $(this).attr("src", $(this).attr("src").replace("/_small(?=\.)/", "")); 
});