-1

The home page of my site has a container that holds square boxed with an image and a title. I changed some of those tiles to .gif images so once you hover over the image changes to another. There is not title anymore. The issue is when I load the page, the pictures that are gif do not load unless I hover over them. Once I hover over all, and do a page resize they all look fine.

Could it be because of the page resize function?

http://geranbaha.com/indextest.html

Can someone point out what I am doing wrong. 

    <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 section the commented part in this section is what it used to be and I replaced it with one line html code to show the gif images.

<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>
user3634508
  • 1
  • 1
  • If all of these images are a set size, why not just control it with CSS rather than programmatically with JS? – Stephen May 20 '14 at 19:16
  • I did what you suggested, using CSS to achieve what I need. I read another tread [link]http://stackoverflow.com/questions/18813299/changing-image-on-hover-with-css-html[link] and added the CSS like this #divine { background-image: url('upload/divine.gif'); height: 311px; width: 235px; } #divine:hover { background-image: url('upload/divineculture.gif'); } but now the image is doubled... if you look at the link, I changed the one on the top left corner http://www.geranbaha.com/indextest2.html – user3634508 May 20 '14 at 21:04

1 Answers1

0

Put all of your javascript in

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

And remove onmouseover="over_image('img0');" onmouseout="off_image('img0')"

Those onmouseover functions is what makes it change on a hover.

Jordan.J.D
  • 7,999
  • 11
  • 48
  • 78
  • I want them to change when I go over them. the problem I have is when I first load the page the gif images show as a broken link – user3634508 May 20 '14 at 20:48
  • @user3634508 Oh I see your problem, trying adding the `alt="some text here"` attribute to them. – Jordan.J.D May 20 '14 at 20:51