MSN spaces image browser for "simplicity and complexity"

Microsoft provided us with a blog website called MSN spaces earlier. At first glance, spaces has some secrets of mymsn and supports freely layout on webpages. However, many of Microsoft's things seem to be used to selling well, as a result, not many people have caught a cold. Later, I didn't know how to make it possible for several major blog SP in China to launch a fight against spaces. The whole process was so messy.

I am not familiar with the spaces service. It is considerate and comfortable to use in the blog Park. However, many design ideas and Development Technologies of MSN are worthy of our attention. I wrote an article shortly after mymsn came out.ArticleThis section describes the free drag-and-drop Layout Design and "Detailed description of the layout of the mymsn dynamic resize page framework ". Now let's take a look at a component in MSN spaces and the implementation details of the image browser. It is the tool bar of the spaces image browser. The Image Browsing style is similar to that of the filmstrip browsing style of XP resource management, and the operation area is the imitation wmp10.

In fact, this picture browser is nothing special. The wmp10 style video player and Flash Player written in JavaScript on the Internet are one by one, and many of them are much more complicated than this one. So where is the special aspect of the image browser? Find an image element at will, whether it is play, stop, forward or backward, right-click and choose from:SAve picture .... What is the stored content? Is it a small GIF image? Of course not. Save picture as on any image in the image browser, we get the following image:

// The actual figure is in a row. In order not to affect the blog layout, I made it into two rows.

On Windows DesktopProgramThose who have made custom skins and small 2D games are very familiar with the layout format of the image. However, in Webpage creation, we are used to seeing a lot of small *. GIF images. Each image only contains its own display content. To extract the required part of an image in Windows programming, You need to perform binary operations on the image. However, in the web page execution environment browser, there is no way to perform such operations. However, powerful CSS can be used to handle such images flexibly. Using a clip attribute in CSS, you can get a larger image. We want to display any part of the image as specified, although we didn't physically cut the image, the display effect could be as expected. The most typical application scenario of using clip in CSS to process images is that in the JS starship of phantom Yu, he made full use of the clip attribute in moving objects! However, as there are too many image resources in JS, a farmer will be able to move, mine, and repair in eight directions, and use all of them separately *. in GIF pictures, Comrade phantom Yu must have been exhausted as early as the image material processing.

Let's go back and talk about how to use the clip in the image browser of spaces? Let's take an example of the checkbox image on the left of the show titles button in the first image.CodeIt is much clearer:

< IMG Title = Ctrl-alt-T Style = "Display: inline; Z-INDEX: 2; filter: progid: DXImageTransform. microsoft. basicimage (grayscale = 1, enabled = false) progid: DXImageTransform. microsoft. alpha (opacity = 50, enabled = false); left:-880px; clip: rect (0px 893px 13px 880px); cursor: hand; position: absolute; top: 0px" SRC = "Http://spaces.msn.com/mmm2005-11-01_10.54/parts/PhotoAlbum/viewer/images/Mega.gif" >

The key is: clip: rect (0px 893px 13px 880px); it is responsible for extracting the following image :.

Spaces is implemented in this way, not to mention the trouble of calculating rect. Because the clip attribute must take effect only when the position attribute of the element is absolute, therefore, it is not easy to calculate the left and top values of the elements to be laid out. So the JavaScript code slideshow3.js file used to implement such an image browser is: 6,288 lines. Of course, one of the advantages I think is that I can reuse images to avoid the request burden on Web servers caused by a large number of *. GIF images. I haven't thought of anything more.

There are many negative problems, just as I mentioned in the title of this article, the design is "simplified and complex ". Because absolute positioning is used, the position of each position: Absolute image is not fixed. It is the layout of the browser element of the image:

// DIV elements 'border is red, span elements' border is blue.

Let's look at the checkbox mentioned above. Refresh a browser or change the browser font size. The IMG layout mentioned above has changed:

< IMG Title = Ctrl-alt-T Style = "Display: inline; Z-INDEX: 2; filter: progid: DXImageTransform. microsoft. basicimage (grayscale = 1, enabled = false) progid: DXImageTransform. microsoft. alpha (opacity = 50, enabled = false); left:-906px; clip: rect (0px 919px 13px 906px); cursor: hand; position: absolute; top: 0px" SRC = "Http://spaces.msn.com/mmm2005-11-01_10.54/parts/PhotoAlbum/viewer/images/Mega.gif" >

Left:-906px; clip: rect (0px 919px 13px 906px );

After analysis, I am confused. Why is M $ designed to implement this image browser ?!