ここで少し問題があります。このスクリプトを Web で見つけ、必要に応じて少し変更しました。このスクリプトは、マウス オンマウスオーバーに続く画像のプレビューを表示します。
もともと、これを行う方法は 1 つしかありませんでした。しかし、私のウェブサイトには、異なる属性 (高さ、幅) の画像を表示したい 2 つの異なるセクションがあります。私はそれを行うことができました.問題は、2番目のセクションで、src（ファイル名）が表示したい実際の画像のサムネイルであるため、ダウすると非常に小さな画像が拡大されることです.ひどい。すべてのサムネイルは whaterver_small.jpg という名前で、元のサムネイルは whaterver_small.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;
アップデート：
わかりました。このページのスクリプトを更新したところ、完全に機能するようになりました。別の問題が発生しました。マウスを置いた画像がページの最後に近づくと、プレビューが途切れます。プレビューを上に移動できるようにしたいので、スクロール バーはありません。機能的なものの実際の例を次に示します 。