除非您将鼠标悬停在屏幕上,否则不会加载html页面中的图片

时间:2014-05-20 19:10:26

标签: javascript html animated-gif

我网站的主页上有一个容器,上面装有方块,上面有图片和标题。我将这些瓷砖中的一些更改为.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> 

1 个答案:

答案 0 :(得分:0)

将所有javascript放入

$( document ).ready(function() { // Put all your image stuff here });

删除onmouseover="over_image('img0');" onmouseout="off_image('img0')"

这些onmouseover函数会使其在悬停时发生变化。