Flash Games

 FAQ   Search   Members   Groups   User Control Panel      Login 

It is currently Fri Jan 09, 2009 5:43 am

All times are UTC + 1 hour




Post new topic Reply to topic  [ 2 posts ] 
Author Message
 Post subject: Removing those boxes that show where an image is loading?
PostPosted: Fri Dec 29, 2006 6:03 am 
Offline

Joined: Fri Dec 29, 2006 6:00 am
Posts: 0
Hi everyone
Newbie here and nearly finished my first site - phew!

I have one quick question - you know how a browser shows an outline box of the shape of an image before the image downloads, well, is there any way to get rid of it or prevent it displaying

This box disappears once the image has loaded so it is nothing to do with the "border" tag and all of my images have the height, width border="0" and alt tags completed.

(I use a lot of images on the my site as I am a photographer and it looks really ugly while it is waiting for the images on a slow connection)

Am happy to use html, css, java...

Thanks for any help.

Tre


Top
 Profile  
 
 Post subject:
PostPosted: Fri Dec 29, 2006 2:54 pm 
Offline
Site Admin
User avatar

Joined: Tue Aug 17, 2004 2:07 pm
Posts: 2506
Location: Sweden
Hi and welcome to DEVPPL.

That little border you are describing can not be controlled by the coder. It's a setting in the users browser that does that.

But there are ways to go around it. For example using a DIV with the image as background. Like this:
Code:
<div style="background-image: url(images/image.gif);width:100px;height:100px"></div>


If you want to redice the HTML-code, just exclude the css to an external file.

I little tip for all you webmasters out there that tries to minimize the HTML-code as much as possible. If you are linking an image you can save a lot of code this way. And if you exclude the CSS to an external file, you will save even more.

If your current code looks like this:
Code:
<a href="page.html">
<img src="image.gif" alt="Image Name" width="100" height="100" />
</a>


You can instead do like this:
Code:
<a href="page.html" style="background:url(image.gif);width:100px;height:100px;"></a>


And if you exclude the CSS to an external file, it could look like this:

styles.css:
Code:
#a {
   background: url(image.gif);
   width: 100px;
   height: 100px;
}


And the HTML:
Code:
<a href="page.html" id="a"></a>

_________________
Make sure to check out our TNX Review and Link Vault Review


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 2 posts ] 

All times are UTC + 1 hour


Who is online

Users browsing this forum: No registered users and 10 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group - Flash Games - TNX Invitation Code - TNX Review

Welcome to DEVPPL.com
You are not logged in, which means that you can't post in the forums.
Click here to Register

If you are a current member here on DEVPPL, please login below:

User:
Pass:
Log me on automatically each visit: