[L27]

Hi, I basically have a mouse over image but it takes a second to load when moused over the first time you visit the page.
So I'm trying to get the images to load when the page loads not when they are moused over.
At the moment I'm using this code.

<ul id="nav">
<li id="home"><a href="index.html"></a></li>
<li id="news"><a href="news.html"></a></li>
<li id="forum"><a href="forum"></a></li>
<li id="media"><a href="media.html"></a></li>
<li id="download"><a href="downloads.html"></a></li>
<li id="contact"><a href="contact.html"></a></li>
<li id="about"><a href="about.html"></a></li>
<li id="donation"><a href="donations.html"></a></li>
</ul>

Then this in the CSS

#nav {margin: 0;
padding: 0;
z-index: 30;
}
#nav li {margin: 0;
padding: 0;
list-style: none;
float: left;
z-index: 30;
}

#nav li a
{display: block;
width:120px;
height:40px;
margin: 0 0 0 0;
padding: 0px;
z-index: 30;
}
#home a {background:url(images/home.gif) no-repeat  ;}
#home a:hover{background:url(images/homeb.gif) no-repeat;}
#news a {background:url(images/news.gif) no-repeat  ;}
#news a:hover{background:url(images/newsb.gif) no-repeat;}
#forum a {background:url(images/forum.gif) no-repeat  ;}
#forum a:hover{background:url(images/forumb.gif) no-repeat;}
#media a {background:url(images/media.gif) no-repeat  ;}
#media a:hover{background:url(images/mediab.gif) no-repeat;}
#download a {background:url(images/downloads.gif) no-repeat  ;}
#download a:hover{background:url(images/downloadsb.gif) no-repeat;}
#contact a {background:url(images/contact.gif) no-repeat  ;}
#contact a:hover{background:url(images/contactb.gif) no-repeat;}
#about a {background:url(images/about.gif) no-repeat  ;}
#about a:hover{background:url(images/aboutb.gif) no-repeat;}
#donation a {background:url(images/donations.gif) no-repeat  ;}
#donation a:hover{background:url(images/donationsb.gif) no-repeat;}

Can anyone help me display the images when the page first loads.
Maybe by putting them on the page and then hiding them?

thanks

[guyfromri]

Sorry -- I read that wrong -- half watching the patriots -- if you saw what I wrote, ignore it --


I want to make sure I understand --

Series of events.
1. You load page but no images are there.
2. When you hover over the button the image then appears.
3. When you stop hovering the image is still there?

If that's the case, try changing #home a to #home a:link, #home a:visited

This post has been edited by guyfromri: 22 January 2012 - 03:13 PM

[L27]

guyfromri, on 22 January 2012 - 03:04 PM, said:

Sorry -- I read that wrong -- half watching the patriots -- if you saw what I wrote, ignore it --


I want to make sure I understand --

Series of events.
1. You load page but no images are there.
2. When you hover over the button the image then appears.
3. When you stop hovering the image is still there?

If that's the case, try changing #home a to #home a:link, #home a:visited

I'm talking the very first time any new user loads the page. It has the original button image loaded but, the second one (the one that it changes to on mouseover) isn't loaded intill the user mouses over it. So it looks rather strange when you first mouseover it because it just loads a blank space before loading the second image then that loads.
I would just like the second image to load when the page first loads instead of when it's been moused over.
Also my knowledge of CSS isn't amazing so if you could explain to well thanks.

[guyfromri]

ohhhh so it's lag time between image loads -- got it

There are a lot of places that could happen -- But it shouldn't because it's not the norm

Have you tried clearing your cache or loading the pages from a diff comp or in diff browsers? I would explore the reasons it's happening before trying to put a bandaid on it --

Thats just my personal opinion Save your self headaches down the road.

[L27]

guyfromri, on 22 January 2012 - 04:13 PM, said:

ohhhh so it's lag time between image loads -- got it

There are a lot of places that could happen -- But it shouldn't because it's not the norm

Have you tried clearing your cache or loading the pages from a diff comp or in diff browsers? I would explore the reasons it's happening before trying to put a bandaid on it --

Thats just my personal opinion Save your self headaches down the road.

It's not so much the load time is bad it's average. But I would perfer no load time. So could I have to images downloaded upon first visit to the page and hide them so they are not visable? If you get me.

[guyfromri]

 test.html (913bytes)
Number of downloads: 40

sorry -- i should have been more descriptive --

The switch between images "Should" be seamless...

I've played with your code a bit and edited to show you -- I tested this a few times with diff images and there was no lag time at all in google chrome.

Try saving this code as "test.html" and open it from your local machine...if it works right, there won't be any lag time between image switches even on the first page load

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  <style type="text/css">
    #nav {margin: 0;
    padding: 0;
    z-index: 30;
    }
    #nav li {margin: 0;
    padding: 0;
    list-style: none;
    float: left;
    z-index: 30;
    }
    
    #nav li a
    {display: block;
    width:120px;
    height:40px;
    margin: 0 0 0 0;
    padding: 0px;
    z-index: 30;
    }
    #home a {background:url(http://freeiconsweb.com/Icons-show/Rounded/8.png) no-repeat  ;}
    #home a:hover{background:url(http://freeiconsweb.com/Icons-show/Rounded/2.png) no-repeat;}
  </style>
  </head>
  <body>
    <ul id="nav">
      <li id="home"><a href="index.html"></a></li>
    </ul>
  </body>
</html>

This post has been edited by guyfromri: 22 January 2012 - 04:45 PM

[L27]

guyfromri, on 22 January 2012 - 04:41 PM, said:

test.html

sorry -- i should have been more descriptive --

The switch between images "Should" be seamless...

I've played with your code a bit and edited to show you -- I tested this a few times with diff images and there was no lag time at all in google chrome.

Try saving this code as "test.html" and open it from your local machine...if it works right, there won't be any lag time between image switches even on the first page load

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  <style type="text/css">
    #nav {margin: 0;
    padding: 0;
    z-index: 30;
    }
    #nav li {margin: 0;
    padding: 0;
    list-style: none;
    float: left;
    z-index: 30;
    }
    
    #nav li a
    {display: block;
    width:120px;
    height:40px;
    margin: 0 0 0 0;
    padding: 0px;
    z-index: 30;
    }
    #home a {background:url(http://freeiconsweb.com/Icons-show/Rounded/8.png) no-repeat  ;}
    #home a:hover{background:url(http://freeiconsweb.com/Icons-show/Rounded/2.png) no-repeat;}
  </style>
  </head>
  <body>
    <ul id="nav">
      <li id="home"><a href="index.html"></a></li>
    </ul>
  </body>
</html>

Here look

http://deathcraft.l27nexus.com

Mouse over the buttons see for a split second they disapear then turn blue. This is because it doesn't load intill moused over. I want it to load as soon as the user enters the page so it will be an instant mouseover without the loading.

[guyfromri]

Hmmm...that's odd -- did it to me too

My first thought(and mind you this is very primative), how about creating a div with no display and no visibility. Then load the images in to that div so they already exist on the page.

Just append this to the page - I don't know where the problem lies but this will load the images when the page loads up...

CSS

#hidden_div{
display: none;
visibility: hidden;
margin: 0;
padding: 0;
z-index: -100;
}

#nav1 {margin: 0;
display: none;
visibility: hidden;
padding: 0;
z-index: 30;
}
#nav1 li {margin: 0;
display: none;
visibility: hidden;
padding: 0;
list-style: none;
float: left;
z-index: 30;
}

#nav1 li a
{display: none;
visibility: hidden;
width:120px;
height:40px;
margin: 0 0 0 0;
padding: 0px;
z-index: 30;
}

#home1 a {background:url(images/homeb.gif) no-repeat  ;}
#news1 a {background:url(images/newsb.gif) no-repeat  ;}
#forum1 a {background:url(images/forumb.gif) no-repeat  ;}
#media1 a {background:url(images/mediab.gif) no-repeat  ;}
#download1 a {background:url(images/downloadsb.gif) no-repeat  ;}
#contact1 a {background:url(images/contactb.gif) no-repeat  ;}
#about1 a {background:url(images/aboutb.gif) no-repeat  ;}
#donation1 a {background:url(images/donationsb.gif) no-repeat  ;}

HTML

<div id="hidden_div">
<ul id="nav1">
<li id="home1"><a href="index.html"></a></li>
<li id="news1"><a href="news.html"></a></li>
<li id="forum1"><a href="forum"></a></li>
<li id="media1"><a href="media.html"></a></li>
<li id="download1"><a href="downloads.html"></a></li>
<li id="contact1"><a href="contact.html"></a></li>
<li id="about1"><a href="about.html"></a></li>
<li id="donation1"><a href="donations.html"></a></li>
</ul>
</div>

Keep in mind there is prob a better way but that should help a bit for now.

[L27]

guyfromri, on 22 January 2012 - 05:39 PM, said:

Hmmm...that's odd -- did it to me too

My first thought(and mind you this is very primative), how about creating a div with no display and no visibility. Then load the images in to that div so they already exist on the page.

Just append this to the page - I don't know where the problem lies but this will load the images when the page loads up...

CSS

#hidden_div{
display: none;
visibility: hidden;
margin: 0;
padding: 0;
z-index: -100;
}

#nav1 {margin: 0;
display: none;
visibility: hidden;
padding: 0;
z-index: 30;
}
#nav1 li {margin: 0;
display: none;
visibility: hidden;
padding: 0;
list-style: none;
float: left;
z-index: 30;
}

#nav1 li a
{display: none;
visibility: hidden;
width:120px;
height:40px;
margin: 0 0 0 0;
padding: 0px;
z-index: 30;
}

#home1 a {background:url(images/homeb.gif) no-repeat  ;}
#news1 a {background:url(images/newsb.gif) no-repeat  ;}
#forum1 a {background:url(images/forumb.gif) no-repeat  ;}
#media1 a {background:url(images/mediab.gif) no-repeat  ;}
#download1 a {background:url(images/downloadsb.gif) no-repeat  ;}
#contact1 a {background:url(images/contactb.gif) no-repeat  ;}
#about1 a {background:url(images/aboutb.gif) no-repeat  ;}
#donation1 a {background:url(images/donationsb.gif) no-repeat  ;}

HTML

<div id="hidden_div">
<ul id="nav1">
<li id="home1"><a href="index.html"></a></li>
<li id="news1"><a href="news.html"></a></li>
<li id="forum1"><a href="forum"></a></li>
<li id="media1"><a href="media.html"></a></li>
<li id="download1"><a href="downloads.html"></a></li>
<li id="contact1"><a href="contact.html"></a></li>
<li id="about1"><a href="about.html"></a></li>
<li id="donation1"><a href="donations.html"></a></li>
</ul>
</div>

Keep in mind there is prob a better way but that should help a bit for now.

Check the code on my site again. I added it and still not working any ideas, maybe I entered the code wrong?

[thrca]

There is several ways to preload the images, but its often better to figure out why your images are taking time to load... Properly designed, images like a menu item should be nearly instantaneous, but this sometimes takes years of practice to master. (A quick learning of mobile application development will quickly teach you about using masking and css, as well as a single bitmap with all your buttons in it and displaying them using background offsets)

A couple bandaids...

EASY:

<!-- put hidden div on page containing images so they are downloaded -->
<div style="visibility:hidden;">
<img src="image1.png" width="1" height="1"/>
<img src="image2.png" width="1" height="1"/>
</div>

A little harder, but still easy. This will cause your load time to increase as it will load the images before the page is rendered

<!-- include this in the <head> of the page -->
<script>
function preload(images) {
    if (document.images) {
        var i = 0;
        var imageArray = new Array();
        imageArray = images.split(',');
        var imageObj = new Image();
        for(i=0; i<=imageArray.length-1; i++) {
            //document.write('<img src="' + imageArray[i] + '" />');// Write to page (uncomment to check images)
            imageObj.src=images[i];
        }
    }
}
</script>

<!--
Then in the <head> of each web page, add the following code after you've created the preload() function, or included its external source javascript file
-->

<script type="text/javascript">
preload('image1.jpg,image2.jpg,image3.jpg');
</script>

[L27]

thrca, on 22 January 2012 - 06:43 PM, said:

There is several ways to preload the images, but its often better to figure out why your images are taking time to load... Properly designed, images like a menu item should be nearly instantaneous, but this sometimes takes years of practice to master. (A quick learning of mobile application development will quickly teach you about using masking and css, as well as a single bitmap with all your buttons in it and displaying them using background offsets)

A couple bandaids...

EASY:

<!-- put hidden div on page containing images so they are downloaded -->
<div style="visibility:hidden;">
<img src="image1.png" width="1" height="1"/>
<img src="image2.png" width="1" height="1"/>
</div>

This easy one works well but if you look at my page. It leaves a lovely big black area at the bottom. How do i remove this.

http://deathcraft.l27nexus.com/

[thrca]

<div style="visibility:hidden;display:none;">...

[thrca]

FWIW, you could improve the speed by having a transparent PNG with just the text for each button and using the same image for the hover and non-hover of each button..

This way, you only need to load 2 images for the button, and the text for each, since you are using a custom font. If you used a regular font, or an embedded font (browser support not so great for this), you could do it all with CSS.

If you did away with the slight texture on the buttons, or used a semi-transparent PNG for the texture, you could use a single image to apply the texture and change the colors of the buttons entirely with CSS, which would be instant.

<style>
  .navi_button {
    background-image: url('images/navi_button.png');
  }
  .navi_button:hover {
    background-image: url('images/navi_button_hover.png');
  }
</style>
<div id="btn_home" class="navi_button"><img src="images/navi_home.png"/></div>
<div id="btn_home" class="navi_button"><img src="images/navi_news.png"/></div>
<div id="btn_home" class="navi_button"><img src="images/navi_forum.png"/></div>

[revolutionx]

Personally I would use image sprites, rather than Dreamweaver Javascript bloat.

With the sprite image, it would contain the normal, and hover state. Then you just use the background-position property

if you take a look at the following example: http://jsfiddle.net/hvDee/

You have this image for example: http://www.w3schools..._navsprites.gif (Yours would contain the normal and hover state in this image)

Menu example html

<ul>
    <li><a href="#">test</a></li>
</ul>

Menu example CSS

li {width:44px; height:44px; text-indent:-9999em /* hide text */}
li a {   display:block; width:44px; height:44px; background:url('http://www.w3schools.com/css/img_navsprites.gif') no-repeat top center;}

li a:hover {background-position:bottom right;}

On the normal state we say that the position of the image we want is top center, and the hover state would be at the bottom right of the image.

[Dormilich]

another good source for image sprites: http://www.alistapar...ticles/sprites/