gpt4 book ai didi

javascript - 替换文件名 (SRC) 的结尾

转载 作者:行者123 更新时间:2023-11-30 06:41:49 27 4
gpt4 key购买 nike

我这里有点问题。我在网上找到了这个脚本,并根据我的需要对其进行了一些修改。此脚本显示鼠标悬停后的图像预览。

最初,只有一种方法可以做到这一点。但是我的网站上有 2 个不同的部分,我想在其中显示具有不同属性(高度、宽度)的图像。我能够做到这一点,问题是在第二部分,src(文件名)是我想要显示的实际图片的缩略图,所以当它出现时,它只是炸毁了一张非常小的图片,看起来很坏。但希望这会让事情变得更容易:所有缩略图都被命名为 whaterver_small.jpg 而原件被命名为 whatever.jpg 现在,如果我可以删除 _small 或 _small.jpg 并替换为该文件末尾的 .jpg,那将显示对我来说是原始图片,这会很棒。这是在 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>

显示 image2,我遇到问题的那个。

<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;

更新:

好的,所以我更新了此页面中的脚本,现在它可以完美运行了。我遇到了另一个问题,当鼠标悬停的图片接近页面末尾时,预览被 chop 。我希望能够向上移动预览,这样就没有滚动条了。这是一个功能性的实例:http://www.soccer.com/Navigation.process?Ne=178&N=4294960224+346图片永远不会被 chop 。

最佳答案

替换 showImage2 函数中的以下行

nIMG.setAttribute('src',isImg);

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

关于javascript - 替换文件名 (SRC) 的结尾,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10636935/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com