Removing those boxes that show where an image is loading?
|
| View previous topic :: View next topic |
| Author |
Message |
trebor31
Joined: 29 Dec 2006
Posts: 1
|
 Posted: Fri Dec 29, 2006 6:03 am Post subject: Removing those boxes that show where an image is loading? |
 |
|
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 |
|
| Back to top |
|
 |
|
|
webmaster
Site Admin
Joined: 17 Aug 2004
Posts: 3646
Location: Sweden
|
| Posted: Fri Dec 29, 2006 2:54 pm Post subject: Re: Removing those boxes that show where an image is loading? |
|
|
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> |
|
|
| Back to top |
|
|
|
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:
|
|
|
|
