我网站的主页上有一个容器,上面装有方块,上面有图片和标题。我将这些瓷砖中的一些更改为.gif图像,因此一旦您将鼠标悬停在图像上,就会更改为另一个。没有标题了。问题是当我加载页面时,gif的图片不会加载,除非我将鼠标悬停在它们上面。一旦我将鼠标悬停在所有页面上,并调整页面大小,它们看起来都很好。
可能是因为页面调整大小功能?
http://geranbaha.com/indextest.html
有人可以指出我做错了什么。
<script language="JavaScript">
<!-- Hide the script from old browsers -->
img0_on = new Image(311,235);
img0_on.src="upload/ketabmoghadas.gif";
img0_off = new Image(311,235);
img0_off.src="upload/ketabmogadasWeb.gif";
img1_on = new Image(311,235);
img1_on.src="upload/divine.gif";
img1_off = new Image(311,235);
img1_off.src="upload/divineculture.gif";
img2_on = new Image(311,235);
img2_on.src="upload/tv.gif";
img2_off = new Image(311,235);
img2_off.src="upload/rozaneh.gif";
img3_on = new Image(311,235);
img3_on.src="upload/radio.gif";
img3_off = new Image(311,235);
img3_off.src="upload/radio1.gif";
function over_image(parm_name)
{
document[parm_name].src = eval(parm_name + "_on.src");
}
function off_image(parm_name)
{
document[parm_name].src = eval(parm_name + "_off.src");
}
//<! --End Hiding Here -->
html部分 本节中的评论部分是以前的部分,我用一行html代码替换它来显示gif图像。
<div class="project-post web-design illustration">
<a href="http://www.ketabmoghadas.com" onmouseover="over_image('img0');" onmouseout="off_image('img0')"> <img src="ketabmogadasWeb.gif" border="0" name="img0"> </a>
<!-- <img alt="" src="upload/divineculture.jpg">
<div class="hover-box">
<div class="project-title">
<h2>فرهنگ الهی</h2>
<span>www.divine-culture.com</span>
<div><a href="http://divine-culture.com"><i class="fa fa-arrow-right"></i></a></div>
</div>
</div> -->
</div>
答案 0 :(得分:0)
将所有javascript放入
$( document ).ready(function() {
// Put all your image stuff here
});
删除onmouseover="over_image('img0');" onmouseout="off_image('img0')"
这些onmouseover
函数会使其在悬停时发生变化。