...

View Full Version : Resolved How do they use these many images?



Zpixel
06-19-2009, 10:44 AM
How do they use these many images in one image?
can i have an example with the image i attached bellow?

Old Pedant
06-20-2009, 12:29 AM
Try this:


<html><head>
<script>
function pic( which )
{
var t = "-" + (which * 19) + "px";
document.write( '<div style="width: 19px; height: 19px; overflow: hidden;">'
+ '<img src="xwindows.gif" style="position: absolute; top: ' + t + ';">'
+ '</div>'
);
}
</script>
</head>
<body>
See, like this: <script>pic(0);</script>
<br/><br/>
Or you might do this:<ul>
<li><script>pic(4);</script></li>
<li><script>pic(8);</script></li>
<li><script>pic(12);</script></li>
</ul>
Or, by hand, like this:
<div style="width: 19px; height: 19px; overflow: hidden;">
<img src="xwindows.gif" style="position: absolute; top: -407px;">
</div>

</body></html>

They chose a really strange icon size, 19x19 pixels, didn't they?

And then they have a "break" in the middle there, so that the bottom icons aren't exactly at multiples of 19. Oh, well. You get the idea.

***************

EDIT: Man, that sucks. This only works in MSIE. I don't understand why FF and Chrome don't pay attention to the "overflow: hidden;" but they don't.

Well, try it with MSIE and I'll see if I can come up with a FF/Chrome version.

Old Pedant
06-20-2009, 12:32 AM
The reason for doing this: A single large image will take a lot less time to download than several smaller images. Remember, each image requires the browser to issue a Request and get a Response from the server. There's a lot of time *AND* bytes overhead in doing this. On top of that, the larger image will take fewer bytes to be compressed than the sum of all the smaller images.

This technique is one that a lot of people use expecially for WAP output (mobile phones), where the bandwidth is a lot lower and every byte counts.

Zpixel
06-20-2009, 07:45 AM
it was really interesting. thank you.
overflow: hidden, makes other parts of image hidden and is one of the key points in this way. i have to search around this attribute.

Zpixel
06-20-2009, 07:49 AM
yes. it seems it doesn't work in FF.

Old Pedant
06-20-2009, 07:52 AM
Got it.

Fussy fussy browsers. I'd think that overflow: hidden would be enough, but...

This code works, though the appearance is a bit different in each browser. Somebody better with CSS styles than I am can probably make it come out the same:



<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
div.slicer {
position: relative;
width: 19px; height: 19px;
overflow: hidden;
clip: rect(0px,19px,19px,0px);
}
</style>
<script type="text/javascript">
function pic( which )
{
var t = "-" + (which * 19) + "px";
document.write( '<div class="slicer">'
+ '<img src="xwindows.gif" style="position: absolute; top: ' + t + ';">'
+ '</div>'
);
}
</script>
</head>
<body>
See, like this: <script>pic(0);</script>
<br/><br/>
Or you might do this:<ul>
<li><script type="text/javascript">pic(4);</script></li>
<li><script type="text/javascript">pic(8);</script></li>
<li><script type="text/javascript">pic(12);</script></li>
</ul>
Or, by hand, like this:
<div class="slicer">
<img src="xwindows.gif" style="position: absolute; top: -407px;" />
</div>

</body></html>

Old Pedant
06-20-2009, 07:54 AM
Incidentally, MSIE (at least v.6) ignores the clipping rectangle, but then the overflow: hidden; works. So putting both in allows it to work in all 3.

Zpixel
06-20-2009, 08:02 AM
the original script of that image has been attached.

Old Pedant
06-20-2009, 08:30 AM
?? Are you sure that's the script for *THAT* image????

Because that script only uses "left -305px;" and so on to select the "slice" needed, and that image isn't even close to 305 pixels wide.

But yes,I see what they are doing. The put the image in the background of a <td>. The <td> has limited size (15px by 15px, which *also* does not match the image you showed!) and presumably the part of the background image not inside the <td> is not shown. Presto.

I could probably do the same thing with the "xwindows.gif" that you posted here, but not by using 15px by 15px and not by using left -305px;.

Zpixel
06-20-2009, 08:45 AM
the original website of that image and script is http://www.bordobakht.com
in the left-down corner of the page when you click on the results, a table with those black borders will appear. i don't know what they have really done.

Old Pedant
06-20-2009, 08:53 AM
Okay, no way I understand WHY it works, but indeed you must use LEFT to position the image, even though what you are actually specifying the distance DOWN the image to the starting point!

This is almost perfect. Chrome browser wants to add a pixel of height to the image selection, no matter what I try. (I can fix it by changing the height, but then that chops off the image in FF and MSIE.) But other than that...


<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
td {
font-size: 12px;
height: 18px;
}
td.slicer {
width: 19px; height: 19px;
}
</style>
<script type="text/javascript">
function pic( which )
{
var t = "-" + (which * 19) + "px";
document.write( '<td class="slicer" style="background: url(\'xwindows.gif\') left ' + t + ';">' );
}
</script>
</head>
<body>
<table>
<tr>
<script>pic(0);</script>
<td>see?</td>
</tr>
<tr>
<script>pic(4);</script>
<td>It works</td>
</tr>
<tr>
<script>pic(8);</script>
<td>in all 3 browsers</td>
</tr>
</table>
</body></html>

Old Pedant
06-20-2009, 08:59 AM
OH WOW!

The HTML that results is *HUGE* compared to what it could be! For all the savings they have made in downloading a single image, they have thrown it all away *AND MUCH MORE* with that incredibly ugly HTML! WOW!

Even the traditional "8 nested divs" (to get the rounded corners effect) will be a lot less code than this! I'd bet on it.



WOW.

Zpixel
06-20-2009, 09:12 AM
yes. but there are some more applications for that script such as ajax loading, print a form, etc. but as you said it was really an ugly script which took me a lot to minimize it for my personal use.

good luck.

Zpixel
06-20-2009, 09:13 AM
what is the traditional "8 nested divs" ?. does it have an ajax content loder?

Old Pedant
06-20-2009, 09:24 AM
You just create something like this:


<div class="border-top" ID="OUTER">
<div class="border-bot">
<div class="border-left">
<div class="border-right">
<div class="corner-top-left">
<div class="corner-top-right">
<div class="corner-bot-left">
<div class="corner-bot-right" ID="CONTENTHERE">
... put the content here ...
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Then you use background images for each of those, pretty similar to how he's doing the <td>s, but now you have it all done ONE TIME, in the CSS.

I added the ID="CONTENTHERE" to the inner-most <div>. So all you'd need to do is use AJAX to write content to the innerHTML of the <div>. Presto.

I also added an ID="OUTER" to the outer-most of the divs. You could make its style be "display: none;" by default and then just change it to "block" after you filled in the content.

Lots and lots of ways to do this.

Old Pedant
06-20-2009, 09:26 AM
I think I saw one of the posters on here, though, who had a way to do this with fewer <div>s. Again, lots of ways, surely.

Zpixel
06-20-2009, 10:06 AM
so, thanks a lot Old Pedant.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum