Images surrounded by blue box

[bobicles2]

www.teamrendition.co.uk

 

For some reason the images at the top are surrounded by a blue box...anyone have any idea why?

 

here is my code for the logo frame at the top

 

Thanks in advance

 

<a href="main.html" target="main"><img src="Images/home.png" alt="Homepage Link" width="124" height="60" onmouseover="this.src='Images/homemouseover.png'" onmouseout="this.src='Images/home.png'"  /></a><a href="whatson.php" target="main"><img src="Images/whats on.png" alt="Whats on today" width="124" height="60" onmouseover="this.src='Images/whatsonmouseover.png'" onmouseout="this.src='Images/whats on.png'" /></a><a href="addevent.html" target="main"><img src="Images/addevent.png" alt="Add Event" width="124" height="60" onmouseover="this.src='Images/addeventmouseover.png'" onmouseout="this.src='Images/addevent.png'" /></a><a href="search.html" target="main"><img src="Images/search.png" alt="Search" width="124" height="60" onmouseover="this.src='Images/searchmouseover.png'" onmouseout="this.src='Images/search.png'"/></a><a href="http://z7.invisionfree.com/fattractions/index.php" target="main"><img src="Images/forum.png" alt="Forum" width="124" height="60" onmouseover="this.src='Images/forummouseover.png'" onmouseout="this.src='Images/forum.png'" /></a><a href="register.html" target="main"><img src="Images/register.png" alt="Register" width="124" height="60" onmouseover="this.src='Images/registermouseover.png'" onmouseout="this.src='Images/register.png'" /></a><a href="contact.html" target="main"><img src="Images/contact.png" alt="Contact" width="124" height="60" onmouseover="this.src='Images/contactmouseover.png'" onmouseout="this.src='Images/contact.png'" /></a><a href="loginpage.php" target="main"><img src="Images/login.png" alt="login" width="124" height="60" onmouseover="this.src='Images/loginmouseover.png'" onmouseout="this.src='Images/login.png'"/></a>

[F1Fan]

It's because they are in an <a> tag. Add border="0" to them.

 

Also, after looking at your page, it'd be a good idea to pre-load all of the images so there's no delay when visitors hover.

[bobicles2]

It's because they are in an <a> tag. Add border="0" to them.

 

Also, after looking at your page, it'd be a good idea to pre-load all of the images so there's no delay when visitors hover.

 

thanks a lot, how do i pre-load the images?

[F1Fan]

Well, there are lots of ways to do it, some in JavaScript. But I prefer a really simple method. Just put all the images in a div with the display set to none. Like this:

 

<div style="display:none;">
    <image src="images/image1.jpg">
    <image src="images/image2.jpg">
    ... Etc ...
</div>

[haku]

That's the best way to preload images definitely. Though I prefer to use the CSS Sprites method for rollovers, as it cuts down on the number of HTTP requests, speeding up page loading time, and it still preloads the images.

[patriklko]

blue box indicates that the image is a link which can be avoided using "border=0" for <img> tag....

[ignace]

Well, there are lots of ways to do it, some in JavaScript. But I prefer a really simple method. Just put all the images in a div with the display set to none. Like this:

 

<div style="display:none;">
    <image src="images/image1.jpg">
    <image src="images/image2.jpg">
    ... Etc ...
</div>

 

Google doesn't like hidden div's a better approach may be:

 

body {
  background-image: url(image1.jpg);
  background-image: url(image2.jpg);
  background-image: none;
}

[cyberRobot]

Wow, those are some nice tricks. I normally use JavaScript, but I may have to dump that code.

 

I probably wouldn't use the hidden div trick since a bunch of images would show if CSS isn't supported or is disabled.

 

As for the CSS on the body tag, have you noticed any of the graphics temporarily showing up as the graphics load. We use a shopping cart product that flashes their default header for less than a second before our custom graphic loads. They're probably using the same technique but for a different reason.

[arbitter]

I wouldn't really know what images to preload; If you have an image in your site header, does your browser automatically 'save' that image so you don't have to load it every single time?

[cyberRobot]

I wouldn't really know what images to preload; If you have an image in your site header, does your browser automatically 'save' that image so you don't have to load it every single time?

 

Are you referring to my comment?

 

If so, what I meant was that the shopping cart product that I use has a default header. It then uses CSS (I think?) to replace the default header that comes with the template with our own custom header. Occasionally when I first visit the website the header shows for less than a second. Then its replaced with the custom header. After that the custom header is cached, so I won't see the default header until my cache is cleared.

 

Note that I've never looked into the code used by the shopping cart system, so the header could be replaced using JavaScript for all I know.

[haku]

I wouldn't really know what images to preload; If you have an image in your site header, does your browser automatically 'save' that image so you don't have to load it every single time?

 

It depends on your server settings. Your server will send a header with files telling the browser whether or not to cache it, and how long to cache it for. Generally they are set to cache for a short period of time, though not always by any means.

 

But you can also preload images for the page they are hidden on. So if you have images that will be shown using javascript, or CSS rollovers, but aren't shown on page load, you can preload them this way, and they will already be on the page. This can be a good technique with slideshows as well.

 

Another thing you can do with preloaded images is use your analytics to analyze routes that users often use to travel through your site. So if you see they are going from the top page to a page with a lot of images, you can preload the images on the first page, and the second page will then load quicker.

[arbitter]

I see where preloading comes in handy. Is there a way to tell a browser to cache the image?

[haku]

Yes, or at least there is on Apache servers.

 

http://www.askapache.com/htaccess/speed-up-sites-with-htaccess-caching.html