Jump to content

Images surrounded by blue box


bobicles2

Recommended Posts

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>

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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;
}

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 3 weeks later...
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.