替換文件名（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(?=\.)/", "")); 
});