私はウェブ開発者で、すぐにウェブサイトを立ち上げました。問題は、画像の親指にホバー効果を加えたことです。最初は拡大された小さな親指が表示され、直後に大きな親指が表示されます。両方とも同じサイズなので、最初にぼやけた画像が表示され、次に完全な画像が表示されます。IE、Opera、Firefox では問題なく動作しますが、Google Chrome では小さな親指が拡大されるのではなく、灰色の画面が表示され、気が狂いそうになります。私はどこでも検索しましたが、役に立ちませんでした。
私が使用する私のJavascript関数は次のとおりです。
function trailOn2(thumbimg,imgtitle,username,imgid,imgsize,credit,level,thw,thh,smallmedium,smallThumbPath){
var smallmedium = (smallmedium == null) ? 0 : smallmedium;
var isinstore = 0;
if (thumbimg.indexOf("storeimages/item") >= 0) {
isinstore = 1;
}
switch(smallmedium)
{
case 1:
var thumbimgprev = thumbimg.replace('/thumbs/400x149', '/thumbs/142x52');
break;
case 0:
var thumbimgprev = thumbimg.replace('/thumbs/400x149', '/thumbs/142x52');
break;
case 2:
var thumbimgprev = thumbimg.replace(/thumbs/, "small");
break;
}
thumbimgprev=smallThumbPath;
gettrailobj().left="-500px";
divthw = parseInt(thw) + 2;
smthw = parseInt(thw) + 2;
halfthh = 50;
halfthh = Math.ceil(parseInt(thh)/2);
topx = halfthh - 9;
smthh = parseInt(thh) + 2;
var static_adr = 'http://www.timelineimages.com/'
if (navigator.userAgent.indexOf("Opera")!=-1)
htm2 = 'border-width:0px;margin:0px;z-index:53;layer-background-color: #F0F3F6;background-color:#F0F3F6;padding:3px;';
if (navigator.userAgent.indexOf("Firefox")!=-1 || navigator.userAgent.indexOf("Safari")!=-1)
htm2 = 'border-width:0px;margin:0px;z-index:53;layer-background-color: #F0F3F6;background-color:#F0F3F6;padding:3px;';
if (navigator.userAgent.indexOf("MSIE")!=-1){
htm2='border-width:0px;margin:0px;z-index:53;layer-background-color: #F0F3F6;background-color:#F0F3F6;padding:3px;';
}else{
htm2='border-width:0px;margin:0px;z-index:53;layer-background-color: #F0F3F6;background-color:#F0F3F6;padding:3px;';
}
html = '<div id="div_2" style="'+htm2+'">'+imgtitle+'<br>'+'</div></div><div style="visibility:hidden"><div style="height:'+thh+'px"> </div>';
htm ='';
htm+='<div style="width:'+divthw+'px;height:100%;border: 1px none #ffffff; padding:10px;z-index:51 ">';
htm+='<div style="width:'+thw+'px;background-color: #FFFFFF; layer-background-color: #FFFFFF;z-index:51">';
htm+='<div style="border-width:0px;margin:0px;padding:0px;background-color: #ffffff; layer-background-color: #ffffff;z-index:51;position:absolute;width:'+thw+'px;height:'+smthh+'px">';
htm+='<img src="'+thumbimgprev+'" width="'+smthw+'" height="'+smthh+'" border="0">';
htm+='</div>';
htm+='<div style="border-width:0px;margin:0px;padding:0px;z-index:52;position:absolute;text-align: center;width:'+thw+'px;top:'+topx+'px;">';
htm+='</div>';
htm+='<div style="border-width:0px;margin:0px;padding:0px;z-index:51;position:absolute;width:'+thw+'px;">';
htm+='<div style="border: 1px solid #ffffff;width:'+thw+'px;">';
htm+='<img name="btcontainer" id="btcontainer" src="'+static_adr+'images/separator.gif" border="0" width="'+thw+'" height="'+thh+'" >';
///////////////////////
htme='</div>';
htme+='</div>';
htme+='</div>';
gettrailobject().innerHTML = htm+html+htme;
gettrailobject().style.zIndex=100;
if (document.getElementById)
document.getElementById('btcontainer').src = thumbimg;
else if (document.all)
document.all.btcontainer.src = thumbimg;
gettrailobj().visibility="visible";
divw = parseInt(thw)+25;
divh = parseInt(thh)+130;
mm_hoverThumb=1;
document.onmousemove=followmouse;
}
function truebody()
{
if(navigator.userAgent.toLowerCase().indexOf('chrome') > -1 || navigator.userAgent.toLowerCase().indexOf('safari') > -1)
{
return document.body;
}
if (navigator.userAgent.toLowerCase().indexOf('opera') > -1 || navigator.userAgent.toLowerCase().indexOf('firefox') > -1 || navigator.userAgent.toLowerCase().indexOf('msie') > -1 )
{
return document.documentElement;
}
}
function followmouse(e)
{
var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15
var docheight=document.all? Math.min(truebody().scrollHeight, truebody().clientHeight) : Math.min(document.body.offsetHeight, window.innerHeight)
if(typeof e != "undefined")
{
if(docwidth < 15+e.pageX+divw)
xcoord = e.pageX-divw-5;
else
xcoord = 15+e.pageX;
if(docheight < 15+e.pageY+divh)
ycoord = 15+e.pageY-Math.max(0,(divh + e.pageY - docheight - truebody().scrollTop - 30));
else
ycoord = 15+e.pageY;
}
else if (typeof window.event != "undefined")
{
if(docwidth < 15+truebody().scrollLeft+event.clientX+divw)
xcoord = truebody().scrollLeft-5+event.clientX-divw;
else
xcoord = truebody().scrollLeft+15+event.clientX;
if(docheight < 15+truebody().scrollTop+event.clientY+divh)
ycoord = 15+truebody().scrollTop+event.clientY-Math.max(0,(divh + event.clientY - docheight - 30));
else
ycoord = truebody().scrollTop+15+event.clientY;
}
gettrailobj().left=xcoord+"px"
gettrailobj().top=ycoord+"px"
}
Array.prototype.in_array = function ( obj ) {
var len = this.length;
for ( var x = 0 ; x <= len ; x++ ) {
if ( this[x] == obj ) return true;
}
return false;
}