JP2011158911A - Image display method and program for image display - Google Patents

Abstract

<P>PROBLEM TO BE SOLVED: To display an image larger than a display area of a viewer on the viewer and relatively move the image with respect to the display area of the viewer. <P>SOLUTION: An arrangement of frame elements 22 are defined in the display area 16 of the viewer. A division image 24 on the corresponding position is allocated and is displayed on each frame element 22. When the relative movement of the image with respect to the display area 16 of the viewer is indicated, a position to be moved of the frame element 22 with respect to the display area 16 of the viewer is calculated and the frame element 22 is moved to the position. The frame element 22 on the position corresponding to the division image 24 parting from the display area 16 of the viewer in accordance with the relative movement of the image is removed, the frame element 22 is added to the position corresponding to the division image approaching the display area 16 of the viewer and the position of the arrangement of frame element 22 with respect to the image is changed. The division image on the corresponding position is allocated and displayed on the added frame element 22. <P>COPYRIGHT: (C)2011,JPO&INPIT

Description

  The present invention relates to an image display method and an image display program for displaying an image larger than a display area of a viewer on a viewer.

  With the development of Internet technology, all information from all over the world can be browsed by browser. Image information can also be viewed with a browser. This is realized by storing an HTML file that describes displaying an image file such as a JPEG file on a Web server. Distribution and browsing of newspaper images using Internet technology has also been put into practical use. As a newspaper image distribution / browsing technology using the Internet technology, for example, there is one described in Patent Document 1 below.

JP 2002-236701 A

  An object of the present invention is to provide an image display method and an image display program for displaying an image having a large horizontal and vertical size (number of pixels) such as a newspaper on a viewer.

  The image display method of the present invention is an image display method in which an image larger than a display area for displaying an image of a viewer is divided and a divided image at least partially entering the display area of the viewer is displayed in the display area of the viewer. An arrangement of a plurality of frame elements corresponding to the display area in which images are individually applied and displayed is set in the viewer, and a divided image at a corresponding position is applied to each frame element so that it can be displayed or displayed. It is.

  The image display method of the present invention is an image display method in which an image larger than a display area for displaying an image of a viewer is divided and a divided image at least partially entering the display area of the viewer is displayed in the display area of the viewer. Each of the divided images included in the image area in a limited range with respect to the entire image, which is in a predetermined positional relationship with the viewer display area, including the divided image at least a part of which is included in the display area. An array of a plurality of frame elements corresponding to the display area to be displayed is set in the viewer, and the divided images at the corresponding positions are applied to the respective frame elements so that they can be displayed or displayed. When the relative movement of the image is instructed, the position of the frame element to be moved with respect to the display area of the viewer is calculated, and the frame element is moved to the position. The frame element is deleted from the position corresponding to the divided image that moves away from the viewer display area with the relative movement of the image, and the frame element is added to the position corresponding to the divided image that approaches the display area of the viewer. The position is changed, and the divided image at the corresponding position is applied to the frame element to be added so that it can be displayed or displayed. According to this, when the relative movement of the image with respect to the display area of the viewer is instructed, the position of the frame element to be moved with respect to the display area of the viewer is calculated, and the frame element is moved to that position. The amount of calculation can be reduced compared to the case of moving (divided image), and thereby the moving speed of the image can be increased (following performance can be improved).

  The image display program of the present invention is characterized by causing a processing device to execute the image display method of the present invention.

The image display method of the present invention can be combined with, for example, a method of downloading an image larger than the display area of the viewer from the server and displaying it on the viewer. Various aspects of this combination are shown below. According to each aspect, a divided image that at least partly enters the viewer display area is determined according to the relative position between the image and the viewer display area, and the corresponding divided image is preferentially transmitted from the server. Therefore, it is possible to display on the viewer with less waiting time compared to the case where the entire image is transmitted and displayed.
<< Aspect 1 >> A method for downloading an image larger than the display area of the viewer from the server and displaying the image on the viewer, enabling the image to be transmitted for each image obtained by dividing the image into a plurality of areas. An image display method for determining a divided image that at least partially enters the display area of the viewer according to a relative position with respect to the display area, preferentially transmitting the corresponding divided image from the server, and displaying the divided image on the viewer.
<< Aspect 2 >> A method for downloading an image larger than the display area of the viewer from the server and displaying the image on the viewer, dividing the image into a plurality of areas, preparing the server in advance, and displaying the image and the viewer display area An image display method for determining a divided image that at least partially enters the display area of the viewer according to the relative position, and transmitting the divided image preferentially from the server and displaying it on the viewer.
<< Aspect 3 >> A method of downloading an image larger than the display area of the viewer from the server and displaying the image on the viewer, wherein the image is displayed in one or more horizontal or vertical directions or in the horizontal and vertical directions than the viewer display area. A plurality of divided images that are prepared in advance in a server by dividing into a plurality of areas each having a short length in both directions, and at least a part of which enters the display area of the viewer according to the relative position between the image and the display area of the viewer An image display method in which a plurality of corresponding divided images are preferentially transmitted from the server, and arranged and displayed in the original arrangement state in the viewer.
<< Aspect 4 >> A method of downloading an image larger than the display area of the viewer from the server and displaying it on the viewer, dividing the image into a plurality of areas and preparing in advance on the server. According to the relative position with respect to the display area, a divided image having at least a part in the display area of the viewer is determined and the divided image is preferentially requested to the server, and the server preferentially requests the divided image corresponding to the request. An image display method for transmitting and displaying the received divided image by the viewer.
<< Aspect 5 >> A method of downloading an image larger than the display area of the viewer from the server and displaying the image on the viewer, wherein the image is displayed in one or more horizontal or vertical directions or in the horizontal and vertical directions than the display area of the viewer. The server is prepared in advance by dividing it into a plurality of regions each having a short length in both directions, and the viewer has a plurality of at least a part of the viewer's display region depending on the relative position between the image and the viewer's display region. The divided image is judged and the divided image is preferentially requested to the server, the server preferentially transmits a plurality of divided images according to the request, and the viewer arranges the received divided images in the original arrangement state. Image display method.
<< Aspect 6 >> A limited range having a predetermined positional relationship with respect to the viewer display area, including a split image that includes at least a part of the display area of the viewer and a split image adjacent to the periphery of the split image area. The image display method according to any one of aspects 1 to 5, wherein the divided images included in the image area are determined together, and the corresponding divided images are preferentially transmitted from the server.
<< Aspect 7 >> It is determined whether or not the divided image is a divided image that has already been downloaded and saved in the viewer. If the divided image has already been saved, the saved image is not downloaded again from the server. 7. The image display method according to any one of aspects 1 to 6, wherein the divided image that has been read is read and displayed.
<< Aspect 8 >> The divided image according to any one of Aspects 1 to 7, wherein the divided image is an image obtained by dividing the image in one direction in a horizontal direction or a vertical direction or in both a horizontal direction and a vertical direction. Image display method.
<< Aspect 9 >> The grid is formed by dividing in the horizontal direction every predetermined number of pixels starting from the left end position of the image, or in the vertical direction every predetermined number of pixels starting from the upper end position of the image Divided or formed by dividing the image horizontally by a predetermined number of pixels starting from the left end position of the image and dividing the image vertically by a predetermined number of pixels starting from the upper end position of the image The image display method according to aspect 8, wherein
<< Aspect 10 >> The divided images included in the limited range of image areas that are in a predetermined positional relationship with the viewer display area, including the divided images that are at least partially included in the viewer display area, are individually applied and displayed. A predetermined number of frame elements corresponding to the display area to be set are set in the viewer, and the divided images at the corresponding positions are respectively applied to the respective frame elements so that they can be displayed or displayed. The division image which leaves | separates from the display area of this is judged, the fitting to a frame element is cancelled | released, the division image which approaches a display area of a viewer is judged, and it applies to a frame element newly, Any one of aspect 1-9 Image display method.
<< Aspect 11 >> A divided image that approaches the display area of the viewer is assigned to the frame element that is given unique identification information to each of the frame elements and cancels the fitting of the divided image that moves away from the display area of the viewer with the relative movement of the image. The image display method according to aspect 10, which is newly applied.
<< Aspect 12 >> Unique identification information is given to each of the frame elements, and the viewer identifies the display information of the frame element in the display area of the viewer and the identification of the divided image applied to the frame element. The image display method according to aspect 10 or 11, wherein the information is stored in association with each other, and the viewer displays the divided image to be applied to each frame element at a predetermined position in the display area of the viewer based on the information.
<< Aspect 13 >> The identification information of the divided image has information corresponding to the address in the entire image as identification information in the entire image, and the viewer requests the divided image from the server with the identification information of the divided image. The image display method according to aspect 12, wherein a divided image corresponding to the identification information is determined and transmitted to the viewer.
<< Aspect 14 >> The image display method according to aspect 13, wherein the identification information of the divided images does not include information for identifying a file format of each divided image.
<< Aspect 15 >> When the block is composed of the entire predetermined number of frame elements and the relative movement of the image is instructed, the viewer calculates the coordinates of the origin of the block to move relative to the origin of the display area of the viewer. , By calculating the coordinates of the origin of each frame element to be moved based on the coordinates of the origin of the block obtained by the computation, respectively, and moving the origin of each frame element to the coordinates obtained by the computation, respectively The image display method according to any one of aspects 10 to 14, which realizes relative movement of the image.
<< Aspect 16 >> The divided image is an image obtained by dividing the image in a grid pattern in the horizontal direction, and the frame element applies a predetermined number of continuous divided images in the horizontal direction. The image is an image obtained by dividing the image in a grid pattern in the vertical direction and the frame element fits a predetermined number of continuous divided images in the vertical direction, or the divided image grids the image in the horizontal direction and the vertical direction. A predetermined number of continuous divided images in the horizontal direction, a predetermined number of continuous divided images in the vertical direction, or a predetermined number of continuous divided images in the horizontal direction. The image display method according to any one of aspects 10 to 15, wherein:
<< Aspect 17 >> An image having the same content is divided into a plurality of areas each having a plurality of magnifications and each of the magnifications so that the image can be transmitted from the server. An image display method for executing the described method.
<< Aspect 18 >> The image display method according to Aspect 17, wherein the number of pixels for dividing the image in the horizontal direction, the vertical direction, or the horizontal direction and the vertical direction is the same regardless of the magnification.
<< Aspect 19 >> When an image is displayed at one magnification and a pointer is placed at an arbitrary position on the image and the magnification is changed, the position on the image where the pointer is located is changed as a fixed point. The image display method according to aspect 17 or 18, wherein an image at a later magnification is displayed.
<< Aspect 20 >> An image having the same content is divided into a plurality of areas each having a plurality of magnifications and each of the magnifications so that the image can be transmitted from the server. An image display method for executing the described method, wherein the number of the frame elements is the same regardless of the magnification.
<< Aspect 21 >> The viewer is a Web browser, and each calculation in the Web browser is executed based on JavaScript (registered trademark) stored in HTML transmitted from the server. The image display method described in 1. According to this, image display can be performed without plug-in software.
<< Aspect 22 >> The image display method according to Aspect 21, wherein the frame element is set using a <DIV> tag described in HTML transmitted from a server.
<< Aspect 23 >> The image display method according to aspect 21 or 22, wherein attribute information such as a file name and / or a file format for each divided image is not incorporated in the HTML transmitted from the server.
<< Aspect 24 >> The image display method according to any one of Aspects 1 to 23, wherein the image is configured by mixing divided images of different file formats.

1 is a system configuration diagram showing an embodiment of the present invention. It is explanatory drawing of image division. It is a figure which shows the exchange of communication between the web browser 12 and the web server 10 when browsing the newspaper page in the system of FIG. This is an HTML source program for blocking 6 × 6 cells to which divided image data is applied. It is a figure which shows an example of the image of the newspaper page displayed on the Web browser 12 of FIG. It is a figure which shows an example of the positional relationship of the image of 1 page of newspaper pages, the display area of a browser, and a block. It is a figure which shows the relationship between a block and the display area of a browser, (a) is a case where there is no offset, (b) is a case where there exists an offset for -1 cell. It is a figure which shows an example of the coordinate value of the origin of each cell which comprises a block. It is a figure which shows the coordinate value of each division image which comprises the image of 1 page of newspapers, and the cell number of the cell to which each division image is applied. The relationship between the divided image coordinate value applied to each cell constituting the block, the cell number assigned to each cell, and the display position of each cell on the browser is obtained, the corresponding divided image is requested from the Web server, It is a figure which shows the function (extract) of JavaScript for applying each cell the division | segmentation image sent from the web server according to the request | requirement. It is a figure which shows an example of the movement operation | movement of the image by scroll operation. It is a flowchart which shows the control content at the time of scroll operation. It is a figure which shows the function of JavaScript for calculating the movement amount of a block and calculating | requiring the coordinate which should move the origin of a block. An example of changing the fitting of the divided image to each cell constituting the block by the block reset control is shown. It is a flowchart which shows the control content of display magnification change control. It is a figure for demonstrating the content of the calculation performed by step S26 of FIG.

  Embodiments of the present invention will be described below. In this embodiment, a case where a newspaper page image is distributed and viewed without plug-in software will be described. FIG. 1 shows a system configuration. A Web server (server computer) 10 and a Web browser (client computer, viewer) 12 are connected via a communication network 14 such as the Internet. In the Web server 10, an image database of newspaper is stored and prepared in advance. In this image database, one page of a newspaper is used as one image, and images of each page constituting the newspaper are displayed at various magnifications {length ratio, for example, 25%, 33%, 50%, 67% (or more). (Reduced image of actual newspaper page), 100% (actual image of actual newspaper page), 133%, 200%, 400% (more enlarged image of actual newspaper page)} (that is, the same page Saving images (with multiple magnifications). The file format of each divided image does not need to be the same. For example, a file format (JPEG format, PNG format, GIF format) with a high compression rate according to the characteristics (photograph, character, color, black and white, etc.) of each divided image Etc.). Therefore, an image of one newspaper page may be configured by mixing divided images of different file formats. Thus, the transmission time can be shortened by using a file format with a high compression rate for each divided image.

As shown in FIG. 2, an image of one page at one magnification is in a grid pattern for each predetermined number of pixels in the horizontal direction (X-axis direction) and vertical direction (Y-axis direction) from the upper left position (image origin position). Divided into a plurality of rectangular divided images. The number of pixels constituting one divided image is constant regardless of the difference in magnification, for example, 480 × 480 pixels (however, the horizontal direction in which the total number of pixels in one page in the horizontal direction is determined for one divided image) In the same way, the number of pixels of the divided image at the right end position is a fraction, and similarly, the total number of pixels in one page in the vertical direction is not divisible by the number of pixels in the vertical direction determined for one divided image. In this case, the number of pixels of the divided image at the lower end position is a fraction.) On the other hand, since the number of pixels constituting one page of paper varies according to the magnification {proportional to the square of the magnification (= length ratio)}, the number of divided images constituting one page of paper is The lower the image, the smaller the image, and the higher the image, the larger the image. As shown in FIG. 2, each divided image has a horizontal coordinate x and a vertical coordinate as coordinate values (divided image coordinate values) indicating the position (address) of each divided image in one page image. The file name corresponding to the divided image coordinate value [x, y], which is incremented by 1 as it goes to the right and down, is assigned to y, where the position of the divided image at the upper left corner is the origin [0, 0]. Saved. If the horizontal coordinate value of the rightmost divided image in the image of one page is x _l , and the vertical coordinate value of the lower divided image is y _l , the coordinate value of the last divided image at the lower right corner is [x _l , y _l ]. A specific divided image of a specific newspaper, a specific page, and a specific magnification is a combination of information of newspaper name, date, morning / evening, page number, magnification, and divided image coordinate value [x, y]. Specified (specified) by the identification information. When browsing newspaper pages, the web browser 12 transmits the identification information corresponding to the browsing position designated by the viewer, and the web server 10 analyzes the identification information and transmits the corresponding divided image. The web browser 12 receives the divided images and arranges and displays the original images. If the identification information as described above is used, the file name {identifier specifying the file format (.jpg) for each divided image is added to the HTML (step S2 in FIG. 3 to be described later) first transmitted from the Web server 10 to the Web browser 12. , .Png, .gif, etc.)} need not be incorporated (that is, the Web browser 12 can request individual divided images without knowing the file name and file format in advance). Therefore, the amount of HTML data can be small.

  In this embodiment, as will be described later (FIG. 6), a “block” having a size that allows the entire display area of the browser to be included is set on the image. This block is composed of, for example, 6 × 6 “cells” (frame elements). One cell corresponds to the size of one divided image (for example, 480 × 480 pixels), and the divided image at the corresponding position is fitted (assigned). The block moves in cell units with respect to the browser display area according to the movement of the image relative to the browser display area so that the entire browser display area always enters even if the image moves (scrolls). Accordingly, the divided images applied to the cells are also sequentially replaced.

  FIG. 3 shows communication exchange between the Web browser 12 and the Web server 10 when browsing newspaper pages. When the browser instructs the web server 10 to browse the XX newspaper published in the XX newspaper (morning or evening) from the web browser 12, an instruction for requesting HTML of the corresponding content is issued (S1). ). Upon receiving this request, the Web server 10 sets <DIV> tag for setting 6 × 6 cells to which the divided image data is applied and which position on the browser to which which divided image is applied to which cell, as shown in FIG. HTML including JavaScript for calculating whether or not to display is returned to the Web browser (S2). The 6 × 6 cells are given names “canvas0000” to “canvas0505” as shown in FIG. Of the four digits following “canvas”, the first two digits indicate the X-axis address (00 to 05) of the cell in the block, and the remaining two digits follow the Y of the cell in the block. An axial address (00 to 05) is shown.

  When the Web browser 12 receives the HTML, based on JavaScript described in the HTML, which divided image is applied to each cell and where the divided image applied to each cell is displayed on the browser 12 Is calculated. Then, it is determined whether or not the calculated divided image is a divided image that has already been downloaded to the web browser 12 and stored in the cache memory. For the already stored divided image, it is read out and the corresponding cell is read out. Apply to For the divided images that are not stored in the Web browser 12, the corresponding divided images are requested to the Web server 10 (S3). In response to the request, the Web server 10 transmits the corresponding divided image data (S4). The Web browser 12 receives the divided image data and applies it to the corresponding cell. In this way, the divided images are respectively applied to (associated with) 6 × 6 cells, and are displayed at the calculated positions (S5). As a result, the divided images are displayed seamlessly over the entire display area of the Web browser 12, and the newspaper image is displayed. An example of the display is shown in FIG. 5 (in FIG. 5, the boundary lines of the cells are virtually shown and are not displayed on the actual screen). Note that the web browser 12 displays a divided image of the first page of the newspaper that is instructed to be browsed from the web browser 12 at a predetermined magnification (a relatively low magnification so that the entire article on the page can be viewed) as an initial screen at the beginning of browsing. HTML transmitted from the Web server 10 is described so as to be requested and displayed on the server 10.

A divided image applied to each cell constituting the initial display control block will be described. Here, as shown in FIG. 6, an image 18 (image for one page of newspaper) larger than the browser display area 16 is initially set in a state in which the center of the browser display area 16 and the center of the image 18 are matched. Shall be displayed. Further, the block 20 is composed of 6 × 6 cells 22, and the left and upper sides of the block 20 are spaced one cell at a time (that is, the upper left corner of the browser display area 16 is second from the left of the block 20 and above Display the second cell). In the following description, coordinate values or numbers (addresses) are distinguished as follows according to their types.
(,): Pixel coordinate value (coordinate value in pixel unit)
[,]: Divided image coordinate value (coordinate value for each divided image in the entire image)
[,]: Cell number (number value for each cell in the block)
The pixel coordinate values are the origin (0, 0) at the browser origin (upper left corner), the X-axis polarity is + for the right direction,-is for the left direction, and the Y-axis direction polarity is + for the down direction. The direction is-.

In FIG. 6, each variable means the following.
X _i : width of the entire image (one page of newspaper) (pixel value)
Y _i : height (pixel value) of the entire image (one page of newspaper)
X _b : browser width (pixel value)
Y _b : browser height (pixel value)
X ₁ = X _i / 2: half value of image width (Expression 1)
Y ₁ = Y _i / 2: half value of image height (Expression 2)
X ₂ = X _b / 2: half value of browser width (Formula 3)
Y ₂ = Y _b / 2: half the browser height (Formula 4)

Note that the values of the width X _i and the height Y _i of the entire image are given to the Web browser by the Web server embedded in the HTML as attribute values of the hidden tag (step S2 in FIG. 3). An example of this hidden tag is shown below.
<INPUT TYPE = "hidden" NAME = "imageWidth" VALUE = "5986">
<INPUT TYPE = "hidden" NAME = "imageHeight" VALUE = "8130">
According to this example, X _i = 5986 (pixels) and Y _i = 8130 (pixels) are given. The browser width and height values X _b and Y _b are acquired by the browser itself based on JavaScript described in HTML (step S2 in FIG. 3) transmitted from the Web server. The browser width and height values X _b and Y _b are obtained by the following functions of JavaScript.
browserWidth = document.body.clientWidth; // Width of the displayed browser
browserHeight = document.body.clientHeight; // height of the displayed browser

In FIG. 6, assuming that the origin (upper left corner) of the browser is the origin ( ₀ , ₀ ), the coordinate value (X ₀ , Y ₀ ) of the origin of the image is given by the following equation.
X ₀ = X ₂ −X ₁ : X-axis origin of image (Formula 5)
Y ₀ = Y ₂ −Y ₁ : Y-axis origin of image (Formula 6)
Assuming that the size of one divided image (= size of one cell) is 480 × 480 pixels, the number of divided images of the entire image is given by the following equation.
G _xi = X _i / 480: Total number of divided images in the X-axis direction (Expression 7)
G _yi = Y _i / 480: Total number of divided images in the Y-axis direction (Expression 8)
When G _xi and G _yi have digits after the decimal point, the integer value obtained by rounding up the decimal point is the actual number of all divided images in the X-axis direction and the Y-axis direction. Further, the value obtained by rounding down the decimal point of G _xi is the horizontal coordinate value x ₁ (FIG. 2) of the rightmost divided image, and the value obtained by rounding down the decimal point of G _yi is the vertical coordinate of the divided image at the lower end. The value is y _l (same as above).

On the other hand, the number of divided images necessary for the display area 16 of the browser is given by the following equation.
G _xb = X _b / 480: Number of divided images required for display in the X-axis direction (Expression 9)
G _yb = Y _b / 480: Number of divided images necessary for display in the Y-axis direction (Expression 10)
The coordinates [x _f , y _f ] of the first divided image {the divided image to which the browser origin (0, 0) belongs (positioned)} that enters the browser display area 16 is given by the following equation.
x _f = - _{value by truncating the decimal quotient of (X 0/480)} ... ( Equation 11)
_{y f = - {(Y 0} /480) value by truncating the decimal quotient} (Equation 12)

In the cell arranged at the left end of the block (the cell number in the X-axis direction is S _xf , hereinafter referred to as “X-axis first cell”), the divided image whose X-axis divided image coordinate value is x _f −1. Apply. Similarly, in the cell arranged at the upper end of the block (the cell number in the Y-axis direction is S _yf , hereinafter referred to as “Y-axis first cell”), the divided image coordinate value in the Y-axis direction is y _f −1. Apply the divided images. That is,
S _xf = x _f −1 (Expression 13)
S _yf = y _f −1 (Expression 14)
And According to this, in the first cell [S _xf , S _yf ] of the block (cell arranged at the upper left corner of the block; hereinafter referred to as “first cell”), [x _f −1, y _f −1] Are divided images. -1 is added when S _xf = x _f and S _yf = y _f are set, as shown in FIG. 7A, the left end portion and the upper end portion of the block 20 are the left end portion of the display area 16 of the browser. When the image is moved (scrolled) in the lower right direction, new divided images that should enter the browser display area 16 from the left side and the upper side are newly acquired from the Web server. This is because a blank portion (portion where no image is displayed) is likely to occur in the left end portion and the upper end portion of the display area 16 of the browser during the waiting time until the image is transferred to. On the other hand, when −1 is added, as shown in FIG. 7 (b), the block 20 is arranged to be offset in the left direction and the upward direction by one cell or more with respect to the display area 16 of the browser in advance. Thus, when the image is moved in the lower right direction, it is possible to make it difficult to generate blank portions at the left end portion and the upper end portion of the display area 16 of the browser.

The coordinates of the divided image applied to the other cells constituting the block are the coordinates [x _f −1, y _f −1] of the divided image first applied to the cell [S _xf , S _yf ], in the X axis direction and the Y axis direction. It is calculated by adding one by one sequentially. That is, the first cell [S _xf , S _yf ] is set as the 0th cell, the m-th (m = 0, 1,..., 5) in the X-axis direction, and the n-th (n = 0, 1 _,. , 5), the divided image coordinate values applied to the cell [S _xm , S _yn ] are
_{S xm = S xf + m =} x f -1 + m ... ( Equation 15)
S _yn = S _yf + n = y _f −1 + n (Expression 16)
Given in. Therefore, the last cell [S _xl , S _yl ] of the block (cell arranged at the lower right corner of the block. Hereinafter referred to as “last cell”. Each cell arranged at the right end of the block is referred to as “X-axis last cell”. The coordinates of the divided images applied to the cells arranged at the bottom of the block are referred to as “Y-axis last cell”.
S _xl = S _xf + 5 = x _f +4 (Expression 17)
S _yl = S _yf + 5 = y _f +4 (Expression 18)
It becomes. As described above, the divided images to be applied to the 6 × 6 cells 22 constituting the block 20 are obtained.

Next, the display position on the browser of the 6 × 6 cells 22 constituting the block 20 will be described. The display position of each cell on the browser is specified (designated) by the coordinate value (pixel value) of the origin (upper left corner position) of each cell. The coordinate value of the origin of each cell is obtained as follows. First, the origin (X _b0 , Y _b0 ) of the first cell [S _xf , S _yf ] corresponds to the origin of the block (see FIG. 6).
_{X b0 = X 0 + (S} xf × 480) ... ( 19)
Y _b0 = Y ₀ + (S _yf × 480) (Expression 20)
Given in. Origin of other cells constituting the block are thus first cell determined by _{[S xf, S yf]} sequentially added to each origin (X _{b0, Y b0)} 480 in the X-axis direction and Y axis direction of the It is required by going. That is, the first cell [S _xf , S _yf ] is set as the 0th cell, the m-th (m = 0, 1,..., 5) in the X-axis direction, and the n-th (n = 0, 1 _,. , 5) The origin (X _bm , Y _bn ) of the cell [S _xm , S _yn ] is
_Xbm = _Xb0 + (m * 480) (Formula 21)
Y _bn = Y _b0 + (n × 480) (Formula 22)
Given in.

  In the HTML (Step S2 in FIG. 3) transmitted from the Web server, JavaScript for executing the operations corresponding to the above (Expression 1) to (Expression 22) is described, and the Web browser receives the HTML. Then, based on the JavaScript, the divided image coordinate values applied to 6 × 6 cells constituting the block and the display position of each cell on the browser (pixel coordinate position for displaying the origin position of each cell) are calculated. Then, the Web browser requests the corresponding divided image from the Web server using the calculated divided image coordinate value as identification information (uses the divided image already downloaded from the Web server and stored in the cache memory). (Step S3 in FIG. 3). In response to the request, the Web server 10 transmits the corresponding divided image data (S4), and the Web browser 12 receives the divided image data, applies it to the corresponding cell, and displays it at the determined position. (S5) (As is clear from FIGS. 6, 7, 9, 11 and the like, a divided image that is out of the browser display area even if it is applied to a cell is not displayed at that time. If you enter the display area of the browser, you can see it).

Here, an actual value is put into (Expression 1) to (Expression 22), and the divided image coordinate value applied to each cell, which is obtained by the browser, and the display position of each cell on the browser are confirmed. If the image size is X-axis direction: 5986 pixels, Y-axis direction: 8130 pixels, and the browser width is X-axis direction: 1020 pixels and Y-axis direction: 556 pixels, X _i = 5986, Y _i = 8130, X _b = 1020 and Y _b = 556. From (Expression 1) and (Expression 2), the half value X ₁ of the image width and the half value Y ₁ of the image height are
X ₁ = 5986/2 = 2993
Y ₁ = 8130/2 = 4065
It becomes. Further, according to (Equation 3) and (Equation 4), the browser width half value X ₂ and the browser height half value Y ₂ are
X ₂ = 1020/2 = 510
Y ₂ = 556/2 = 278
It becomes. Also, according to (Equation 5) and (Equation 6), the origin (X ₀ , Y ₀ ) of the image is
X ₀ = 510-2993 = -2483
Y ₀ = 278-4065 = -3787
It becomes.

Assuming that the size of one divided image is 480 × 480 pixels, the number of divided images of the entire image is as follows according to (Expression 7) and (Expression 8).
G _xi = 5986/480 = 12.4708
G _yi = 8130/480 = 16.9375
It becomes. The numerical values of G _xi = 12.4708 and G _yi = 16.9375 indicate that the total number of divided images is 13 in the X-axis direction and 17 in the Y-axis direction, and 13 × 17 = 221 as a whole. It shows that it becomes. Further, the lateral direction of the coordinate values x _l of the divided image values truncating the decimal point of the rightmost G _xi, vertical coordinate values of the divided image values truncating the decimal point of the lower end of the G _yi is y _l It is. That is, x _l = 12 and y _l = 16.
According to (Equation 9) and (Equation 10), the number of divided images necessary for the display area of the browser is
G _xb = 1020/480 = 2.125
G _yb = 556/480 = 1.15833
It becomes. The numerical values G _xb = 2.125 and G _yb = 1.15833 indicate that in order to display an image in the entire display area of the browser, at least four cells constituting the block are in the X-axis direction and the Y-axis direction. Indicates that at least three are required. In this embodiment, in order to make it difficult for blank portions (portions where no image is displayed) to occur during an image moving (scrolling) operation, a total of 6 in the X-axis direction and 6 in the Y-axis direction as described above. X6 = A block is composed of 36 cells. If the number of cells that make up a block is increased, blank areas can be made less likely to occur during the movement of the image, but on the other hand, it takes time to calculate the coordinates of each cell during the movement of the image. Since the speed may be slow (however, depending on the ability of the CPU), the number of cells constituting the block is set in consideration of preventing the generation of a blank portion during the moving operation and the moving speed of the image. .

According to (Expression 11) and (Expression 12), the coordinates [x _f , y _f ] of the first divided image that enters the display area of the browser are
x _f = − {value obtained by rounding down the decimal point of the quotient of (−2483/480)} = 5
y _f = − {value obtained by rounding down the quotient of (−3787/480)} = 7
It becomes. Therefore, the coordinates of the divided image applied to the first cell [S _xf , S _yf ] of the block are expressed by (Expression 13) and (Expression 14) as follows:
S _xf = 5-1 = 4
S _yf = 7-1 = 6
It becomes. Further, the coordinates of the divided image applied to the last cell [S _xl , S _yl ] of the block are expressed by (Expression 17) and (Expression 18), respectively.
S _xl = S _xf + 5 = 9
S _yl = S _yf + 5 = 11
It becomes.

(Equation 19) and (Equation 20), the first cell _{[S xf, S yf]} origin (X _{b0, Y b0)} is
_{X b0 = -2483 + (4 ×} 480) = - 563
Y _b0 = −3787 + (6 × 480) = − 907
It becomes. FIG. 8 shows the coordinate values of the origin of each cell obtained by (Expression 21) and (Expression 22) based on the coordinates ( _Xb0 , _Yb0 ) of the first cell.

Here, a method for assigning cell numbers of the cells 22 constituting the block 20 will be described. The addition of the cell number is also executed based on JavaScript described in HTML transmitted from the Web server. The cell number [S _x , S _y ] of each cell indicates the coordinates [x, y] of the divided image applied to each cell, the total number of cells in the X axis direction constituting the block in the X axis direction, and the Y axis The direction is given as a remainder value divided by the total number of cells in the Y-axis direction constituting the block. According to this, the cell number (cell number assigned to each divided image) of the cell to which each divided image is applied is uniquely determined for each divided image. In this embodiment, since the total number of cells in the X-axis direction and the Y-axis direction is 6, cell numbers are repeated 0, 1, 2,..., 5 in both the X-axis direction and the Y-axis direction. In this case, the cell numbers of the cells to which the respective divided images are applied are shown in FIG. Of the numerical values described in the respective divided image positions in FIG. 9, the upper row shows the coordinate values of each divided image 24, and the lower row shows the cell numbers of the cells to be applied. Even if the cell number is repeatedly used, the number of cells in the block is only 6 × 6, so the same cell number is not used simultaneously in the block. By repeatedly using cell numbers in this way, as shown in FIG. 4, it is sufficient to prepare only 6 × 6 <DIV> tags for setting cells described in HTML.

  As described above, based on JavaScript described in the HTML transmitted from the Web server, the coordinate value of each divided image 24 applied to the 6 × 6 cells 22 constituting the block 20 and the cell of each cell 22 When the number and the display position of each cell 22 on the browser (pixel coordinate position for displaying the origin position of each cell) are obtained, the web server is requested to transmit the corresponding divided image 24 (step S3 in FIG. 3). When the divided image data corresponding to the request is sent from the Web server (S4), it is applied to the corresponding cell number and displayed on the browser (S5). As a result, the divided image 24 is seamlessly displayed in the entire display area of the Web browser 12 and the newspaper image 18 is displayed.

  FIG. 10 shows the coordinate value of each divided image 24 applied to each cell 22 constituting the block 20, the cell number assigned to each cell 22, the display position of each cell 22 on the browser (the origin position of each cell). ), A request for a corresponding divided image to the Web server, and a JavaScript function (excerpt) for applying the divided image 24 sent from the Web server to each cell 22 in response to the request is shown. This JavaScript function starts from the divided image [0, 0] at the upper left corner of the image, scans the position of the divided image in the Y-axis direction, determines the presence or absence of the divided image included in the block, and determines the divided image included in the block. If there is an image, the remainder obtained by dividing the coordinate value x in the X-axis direction of the divided image by 6 is assigned as the cell number sellX in the X-axis direction to the cell to which the divided image is applied. A remainder obtained by dividing the coordinate value y in the axial direction by 6 is assigned as a cell number sellY in the Y-axis direction. And "document.all (" canvas "+ sellX + sellY) .innerHTML =" <IMG ID = 'image "+ x + y +"' SRC = "image.cgi? A = xxx & b = xxx & c = xxx & d = xxx & e = xxx & f = xxx & g = xxx "STYLE = 'left:" + originX + "; top:" + originY + ";'>"; The divided image sent from is applied to the corresponding cell. The above JavaScript function is the coordinate value “of the divided image that applies the DIV tag (see FIG. 4) having the ID of“ canvas sellX sellY ”(sellX = 00 to 05, sellY = 00 to 05) to this cell. This means that the image is converted into an IMG tag having an ID of “image xy” and the divided image data from “image.cgi” (image data search and transfer module on the Web server side) is embedded as the source of the IMG tag. At that time, “a = xxx & b = xxx & c = xxx & d = xxx & e = xxx & f = xxx & g = xxx” are parameters for specifying the images stored in the Web server (newspaper name, date, morning / evening, page number, magnification) As a value for searching for a specific image file. "STYLE = 'left:" + originX + "; top:" + originY "indicates the coordinate position (pixel value) on the display area of the browser that displays the origin (upper left position) of this cell (divided image).

  When the above processing is performed up to the last divided image in the Y-axis direction of the column, the process moves to the next column to the right and similarly determines from the upper end whether there is a divided image included in the block, and the divided image included in the block. A cell number sellX in the X-axis direction and a cell number sellY in the Y-axis direction are assigned to the cells to which the image is applied. When the last divided image in the last column in the X-axis direction is reached, the process is terminated.

Scroll Control Next, a method of moving the image to an arbitrary position on the browser display screen (that is, moving the browsing position) by the viewer's scroll operation after the initial display as described above will be described. . FIG. 11 shows an image moving operation by a scroll operation. In FIG. 11, when the image 18 is moved X _d (pixel value) in the right direction in the X-axis direction and Y _d (pixel value) in the lower direction in the Y-axis direction (the image position after the movement is indicated by reference numeral 18 ′). .) The block 20 moves together with the image 18, but this movement causes the block 20 to move relative to the display area 16 of the browser, and if no allowance is made, the block 20 will eventually deviate from the display area 16 of the browser. . Accordingly, the position of the block 20 relative to the image 18 is changed in accordance with the amount of movement, and control (resetting of the block) for updating the fitting of the divided image to each cell 22 constituting the block 20 is performed accordingly. By resetting the block, the block 20 is controlled so as to always include the entire browser display area 16 (the entire browser display area 16 is always included in the block 20). In the example of FIG. 11, the block 20 moves to the right relative to the browser display area 16 by the scroll operation, and the cell boundary line exceeds the origin of one browser. , One column of cells at the right end is deleted, and one column of cells is added to the left end accordingly. There is no change in the five columns of cells between them.

  FIG. 12 shows a control flow during the scroll operation. The control in FIG. 12 is performed by JavaScript described in HTML transmitted from the Web server. The control at the time of the scroll operation includes control for moving the image and control for resetting the block. First, image movement control will be described. Place the mouse cursor (pointer) at an arbitrary position on the screen on which the image of the newspaper is displayed and press the left mouse button (mouse down operation) (step S11 in FIG. 12). When this is done (drag operation), the image moves following the mouse cursor (S12). In this case, if the movement amount is calculated for each cell, the calculation process takes time, and the movement operation is slowed down. Therefore, as in the HTML of FIG. 4, the entire <DIV> tag for setting 6 × 6 cells is bundled as a single block with the <DIV> tag whose name is canvas BLOCK, and the single block is moved. The origin after the movement of the block is calculated by calculating the amount, and the coordinates of the origin of each cell constituting the block are calculated and determined based on the coordinates of the origin of the block. According to this, the relative position of the origin of each cell with respect to the origin of the block is determined in advance and can be obtained by a simple calculation, while the calculation of the movement amount requiring a complicated calculation only needs to be performed for one block. Therefore, the amount of calculation is small as a whole compared to the case where the amount of movement is calculated in units of cells (for each cell), and the moving operation can be speeded up.

FIG. 13 shows a JavaScript function for calculating the movement amount of the block (image) (= movement amount of the mouse cursor) to obtain the coordinates to be moved at the origin of the block. When the coordinates of the origin of the block to be moved are obtained by this function, the coordinates become the coordinates of the origin of the first cell [S _xf , S _yf ] of the block. The coordinates of each origin are obtained by sequentially adding 480 to each. By repeating such calculation throughout the movement of the mouse cursor, the image can be moved following the mouse cursor. After moving the mouse cursor to an arbitrary position, when the mouse button is released (mouse up operation), the image stops at that position.

  Next, block reset control will be described. When the drag operation is finished and the mouse up operation is performed, the cell position (divided image position) to which the origin (0, 0) of the browser belongs is determined on the image after movement, and the position changes before the drag. Whether or not {that is, whether the origin (0, 0) of the browser exceeds the cell boundary} is determined (step S13 in FIG. 12). If it has changed (when the cell boundary is exceeded), the block position is moved in the same direction as the image movement, and the block is configured. The block is reset by updating the fitting of the divided image to each cell (S14).

Block reset control is realized by the following calculation. If the movement amount of the image by the drag operation is X _{d in} the right direction in the X-axis direction and Y _{d in} the downward direction in the Y-axis direction as shown in FIG. 11, {the movement amounts X _d and Y _d of the image are the drag end position ( It is obtained by subtracting the mouse cursor coordinate value at the drag start position (mouse down operation position) from the mouse cursor coordinate value at the mouse up operation position. }, The coordinate value (X _d0 , Y _d0 ) of the origin of the image after movement is given by the following equation.
_Xd0 = _Xf0 + _Xd : X-axis origin of the image after movement (Expression 23)
Y _d0 = Y _f0 + Y _d : Y-axis origin of the image after movement (Expression 24)
However, X _f0 : The final X-axis origin of the image by the previous scroll operation. For the first scroll operation, X _f0 = X ₀ (X-axis origin of the image at the initial display).
Y _f0 : The final Y-axis origin of the image by the previous scroll operation. For the first scroll operation, Y _f0 = Y ₀ (the Y-axis origin of the image at the time of initial display).

Also, the coordinates [x _df , y _df ] of the first divided image that enters the browser display area after movement {the divided image to which the browser origin (0, 0) belongs} are given by the following equations.
x _df = − {value obtained by rounding down the decimal point of the quotient of (X _d0 / 480)} (Expression 25)
y _df = − {value obtained by rounding down the decimal point of the quotient of (Y _d0 / 480)} (Equation 26)
Therefore, the numbers S _xd and S _yd where the cell boundary exceeds the origin (0, 0) of the browser by dragging are given by the following equations.
S _xd = x _f0 −x _df (Equation 27)
S _yd = y _f0 −y _df (Equation 28)
However, _xf0 : X-axis coordinate of the first divided image that enters the browser display area when the previous block was reset
y _f0 : Y-axis coordinate of the first divided image that enters the browser display area when the previous block was reset

If S _xd obtained by (Equation 27) is 0, it can be seen that the boundary of the cell does not exceed the browser origin (0, 0) in the X-axis direction. You can see that the cell boundary has crossed the browser origin (0,0) to the right. If the value is-, the number of cell boundaries has crossed the browser origin (0,0) to the left. I understand that. If S _yd obtained by (Equation 28) is 0, it can be seen that the boundary of the cell does not cross the browser origin (0, 0) in the Y-axis direction. It can be seen that the cell boundary of the minute has crossed the browser origin (0,0) downward, and if the value is-, the cell boundary for the number of cells is directed upward from the browser origin (0,0). You can see that

When S _xd and S _yd are both 0 as a result of the calculations of (Expression 27) and (Expression 28), the position of the divided image to which the browser origin (0, 0) belongs does not change before and after the drag. Therefore, the block is not reset. On the other hand, if at least one of S _xd and S _yd is other than 0 as a result of the calculations of (Expression 27) and (Expression 28), the position of the divided image to which the browser origin (0, 0) belongs is dragged. Since it has changed before and after, the block is reset.

The resetting of the block is realized by moving the entire block relative to the image in a direction opposite to the moving direction of the image by the number of cells corresponding to S _xd and S _yd . By resetting the block, the divided image is applied to each cell constituting the block as follows. A divided image having a divided image coordinate value x _df −1 in the X-axis direction is applied to a cell (X-axis first cell) S _xdf arranged at the left end of the block. Similarly, a divided image having a divided image coordinate value y _df −1 in the Y-axis direction is applied to a cell (Y-axis first cell) arranged at the upper end of the block. That is,
S _xdf = x _df −1 (Expression 29)
S _ydf = y _df −1 (Equation 30)
And According to this, the divided image of [x _df −1, y _df −1] is applied to the cell (first cell) [S _xdf , S _ydf ] arranged in the upper left corner of the reset block. Adding -1 is the same purpose as adding -1 in (Expression 13) and (Expression 14). That is, when the image is moved in the lower right direction by arranging the block offset leftward and upward by one cell or more with respect to the display area of the browser, the left end portion and the upper end of the browser display area Makes it difficult to create blank areas.

The coordinates of the divided image applied to the other cells constituting the block are the coordinates [x _df −1, y _df −1] of the divided image initially applied to the cell [S _xdf , S _ydf ], and the X axis direction and the Y axis direction. It is calculated by adding one by one sequentially. That is, with the first cell [S _xdf , S _ydf ] as the 0th cell, the mth (m = 0, 1,..., 5) in the X axis direction and the nth (n = 0, 1,...) In the Y axis direction. , 5) The divided image coordinate values applied to the cell [S _xdm , S _ydn ] are
S _xdm = S _xdf + m = x _df −1 + m (Equation 31)
S _ydn = S _ydf + n = y _df −1 + n (Expression 32)
Given in. Therefore, the coordinates of the divided image applied to the cell (last cell) [S _xdl , S _ydl ] arranged at the lower right corner of the block are
S _xdl = S _xdf + 5 = x _f +4 (Expression 33)
S _ydl = S _ydf + 5 = y _f +4 (Formula 34)
It becomes.

  As described above, the divided images to be applied to 6 × 6 cells constituting the reset block are obtained. When a divided image to be applied to 6 × 6 cells is obtained, a divided image newly entered into the block area is requested to the Web server if it has not been acquired, and is already downloaded from the Web server and stored in the cache memory. The stored divided images are read out and applied to the corresponding cells for display (as is clear from FIG. 6, FIG. 7, FIG. 9, FIG. 11, etc.) The divided images that are out of the area are not displayed at that time, but they can be displayed if they enter the display area of the browser by scrolling). As shown in FIG. 9, the cell number of the cell to which each divided image is applied (cell number assigned to each divided image) is uniquely determined for each divided image. The cell number is not changed for a divided image that has remained in the block since the previous resetting of the block (it did not come out of the block by the scroll operation).

  FIG. 14 shows an example of a change in the fitting of the divided image to each cell constituting the block by the above-described block reset control. Of the numerical values described in each cell position in FIG. 14, the upper row shows the divided image coordinate values, and the lower row shows the cell numbers. In this example, when the image is moved by scrolling, the cell boundary exceeds the browser origin (0, 0) by one in the right direction in the X-axis direction and does not exceed one in the Y-axis direction. (When the image moves as shown in FIG. 11).

Display Magnification Change Control Control when changing the display magnification while browsing a newspaper will be described. In this display magnification change control, the display magnification is changed with the position of the mouse cursor (pointer) as a fixed point (that is, the position on the paper where the mouse cursor is located does not change before and after the magnification change). Control) FIG. 15 shows the control flow. The control in FIG. 15 is performed by JavaScript described in HTML transmitted from the Web server. While browsing the newspaper, the user places the mouse cursor on an arbitrary position on the displayed newspaper image (the article position to be viewed by changing the display magnification) (S21), and right-clicks the mouse (S22). Then, the coordinate value of the mouse cursor (pointer) at that time {pixel value with the origin (0, 0) of the browser as the origin} is acquired (S23). The coordinate values (X _d0 , Y _d0 ) of the origin of the image are given by the initial values (X ₀ , Y ₀ ) according to (Equation 5) and (Equation 6). Since it is updated by (Expression 23) and (Expression 24), the coordinate value (X _d0 , Y _d0 ) of the origin of the image at the time of the display magnification change operation has already been acquired.

  A pop-up menu for selecting a display magnification is displayed by right-clicking the mouse (S24). When the viewer performs an operation of selecting an arbitrary magnification from the display magnification values (length ratio) displayed in the pop-up menu (S25), the mouse cursor position at the time of the right click is selected as a fixed point. The calculation for obtaining the origin position of the image necessary for displaying the image at the magnification is executed (S26). The contents of the calculation will be described with reference to FIG. In the example of FIG. 16, the display magnification changing operation position (mouse cursor position when right-clicked on image 1 (18-1) displayed before the display magnification is changed, hereinafter referred to as “processing center”) is immovable. This shows a case where the image 2 (18-2) is enlarged and displayed as a point.

In FIG. 16, each variable means the following.
X _m: X-axis direction between the origin and the processing center of the browser X _m11: X-axis direction distance X between browsers origin and the origin of the image 1 _m12: X-axis direction between the origin and the processing center of the image 1 X _m21 : X-axis direction distance between the origin of the browser and the origin of image 2 X _m22 : X-axis direction distance between the origin of image 2 and the processing center Y _m : Y-axis direction distance between the origin of the browser and the processing center Y _m11 : Browser Y-axis direction between the origin and the origin of the image 1 Y _m12: Y-axis direction between the origin and the processing center of the image 1 Y _m21: Y-axis direction distance Y between the browser of the origin and the origin of the image 2 _m22: image The distance in the Y-axis direction between the origin of 2 and the processing center When the ratio of the display magnification of image 2 to the display magnification of image 1 is α (α> 1),
X _m22 = α · X _m12 (Formula 35)
Y _m22 = α · Y _m12 (Formula 36)
Holds. Further, from FIG. 16, X _m12 = X _m + X _m11 (Expression 37)
Y _m12 = Y _m + Y _m11 (Formula 38)
It is. Substituting (Expression 37) and (Expression 38) into (Expression 35) and (Expression 36),
X _m22 = α · X _m + α · X _m11 (Formula 39)
Y _m22 = α · Y _m + α · Y _m11 (Formula 40)
It becomes.

_{X m21} = X m22 -X _m ... from FIG. 16 (formula 41)
_{Y m21 = Y m22 -Y m ...} ( Equation 42)
It is. Substituting (Equation 39) and (Equation 40) into (Equation 41) and (Equation 42),
X _m21 = (α · X _m + α · X _m11 ) −X _m = (α−1) X _m + α · X _m11 (Formula 43)
Y _m21 = (α · Y _m + α · Y _m11 ) −Y _m = (α−1) Y _m + α · Y _m11 (Formula 44)
It becomes. The coordinate values (X _m21 , Y _m21 ) (pixel values) obtained by (Expression 43) and (Expression 44) are the origin positions of the images after the magnification change.

When the origin position of the image after the magnification change is obtained by the above calculation in step S26 of FIG. 15, a divided image to be applied to 6 × 6 cells constituting the block is calculated (S27). Note that, as described above, the number of pixels constituting one divided image applied to one cell is constant regardless of the difference in magnification, for example, 480 × 480 pixels. The divided images applied to each cell can be calculated based on the above (Formula 11) to (Formula 16). That is, the coordinates [x _f , y _f ] of the first divided image {divided image to which the browser origin (0, 0) belongs} are obtained from (Expression 11) and (Expression 12) (where, (Expression 11) and (Expression 12) are obtained by replacing the initial values X ₀ and Y ₀ of the origin of the image with the original position X _m21 of the image after the magnification change obtained in (Expression 43) and (Expression 44). Y _m21 is used).

When the coordinates [x _f , y _f ] of the first divided image that enters the display area of the browser are obtained, the cell S _xf (X-axis first cell) arranged at the left end of the block according to the above (Expression 13) and (Expression 14). X _f −1 is obtained as a divided image coordinate value applied to (). Similarly, y _f −1 is obtained as a divided image coordinate value applied to the cell S _yf (Y-axis first cell) arranged at the upper end of the block. Further, with the first cell [S _xf , S _yf ] as the 0th cell, the m-th (m = 0, 1,..., 5), Y-axis in the X-axis direction according to (Expression 15) and (Expression 16). [X _f −1 + m, y _f −1 + n] are respectively obtained as the divided image coordinate values applied to the n-th (n = 0, 1,..., 5) cells [S _xm , S _yn ] in the direction.

When the divided image to be applied to 6 × 6 cells constituting the block is calculated by the above calculation in step S27 of FIG. 15, 6 × 6 constituting the block according to (Equation 19) to (Equation 22). The display positions of the cells on the browser are obtained (however, the origin positions X _m21 and Y _m21 of the image after the magnification change are used instead of the initial values X ₀ and Y ₀ of the origin of the image) (S28). That is, the coordinates of the origin of the block are obtained by (Expression 19) and (Expression 20), and further, the coordinates of the origin of each cell are obtained by (Expression 21) and (Expression 22).

  As described above, when the divided image to be applied to the 6 × 6 cells after the magnification change and the display position thereof are obtained, the unacquired divided image is requested to the Web server (S29). The divided images that have been downloaded and stored in the cache memory are read out and applied to the corresponding cells for display (S30) (as is clear from FIGS. 6, 7, 9, and 11). A split image that falls outside the browser display area even if applied to a cell is not displayed at that time, but can be displayed if it enters the browser display area by a scroll operation).

  As described above, the display magnification is changed with the processing center as a fixed point. Although the case where the image is enlarged and displayed has been described above, when the image is reduced and displayed, the processing content is the same as that when the image is enlarged and the display magnification ratio α is changed to α <1.

When a predetermined page turning operation is performed with a toolbar on the browser screen while browsing the page turning control newspaper, the Web browser performs a predetermined magnification on the indicated page based on JavaScript described in HTML. A request is made to the Web server for a divided image (relatively low magnification so that the entire article on the page can be viewed) (the divided image already downloaded from the Web server and stored in the cache memory is read and used). Similar to the initial screen at the beginning of the browsing, the image is initially displayed in a state where the center of the display area of the browser matches the center of the image. The scroll control and magnification change control after the initial display are executed in the same manner as described above.

  In the embodiment described above, the image is divided in both the vertical and horizontal directions, but can be divided only in one vertical and horizontal direction. Further, although the cells (frame elements) are arranged in both the vertical and horizontal directions, they can be arranged only in one vertical and horizontal direction. Further, although the divided images and cells are square, they can also be rectangular. Divided images and cells can also be divided into shapes other than rectangles. Further, although the number of cells constituting the block is the same in the vertical and horizontal directions, the number of cells in the vertical and horizontal directions may be different. Further, the block is offset by one cell leftward and upward in advance with respect to the display area of the browser. Further, the divided images are prepared in advance in the server and transmitted after waiting for the request from the viewer. However, the divided images can be generated and transmitted after waiting for the request from the viewer. In addition, after the initial display, the surrounding divided images are downloaded after waiting for the scrolling operation. However, after the initial display, the surrounding divided images can be downloaded sequentially without waiting for the scrolling operation. Moreover, although the case where the newspaper was browsed was demonstrated, this invention is applicable also when browsing other images (for example, comics). Further, the case of browsing using a Web browser has been described, but the present invention can also be applied to the case of browsing using plug-in software.

In this application, the following invention is described as an invention which can be described depending on claims 1 and 2 of the claims.
<Claim 3>
The arrangement of the frame elements includes a frame element that individually applies a divided image that at least partially enters a display area of a viewer, and a frame element that individually applies adjacent divided images around the area of the divided image. Item 3. The image display method according to Item 2.
<Claim 4>
The image display method according to claim 2 or 3, wherein the divided image is an image obtained by dividing the image in one of a horizontal direction or a vertical direction, or in a grid pattern in both the horizontal direction and the vertical direction.
<Claim 5>
The grid is formed by dividing in the horizontal direction every predetermined number of pixels starting from the left end position of the image, or formed by dividing in the vertical direction every predetermined number of pixels starting from the upper end position of the image Or divided horizontally by a predetermined number of pixels starting from the left end position of the image and divided vertically by a predetermined number of pixels starting from the upper end position of the image The image display method according to claim 4.
<Claim 6>
Unique identification information is given to each frame element,
“Delete the frame element from the position corresponding to the divided image that moves away from the display area of the viewer with relative movement of the image, and add the frame element to the position corresponding to the divided image that approaches the display area of the viewer”, and “ The process of “fitting a divided image at the corresponding position to the added frame element”
Using the frame element to be deleted as the frame element to be added and dividing the image to be applied to the frame element, the divided image at a position corresponding to the frame element to be added from the divided images applied to the frame element to be deleted The image display method according to claim 2, wherein the image display method is performed by changing to the above.
<Claim 7>
The viewer holds the unique identification information in association with the information on the display position of the frame element in the display area of the viewer and the identification information of the divided image applied to the frame element, and the viewer stores each frame element based on the information. The image display method according to claim 6, wherein the divided image to be applied to is displayed at a predetermined position in the display area of the viewer.
<Claim 8>
The image display method according to claim 7, wherein the identification information of the divided image includes information corresponding to an address in the entire image as identification information in the entire image.
<< Claim 9 >>
When a plurality of frame elements constitute a block and relative movement of the image is instructed, the viewer calculates the coordinates of the origin of the block to be moved with respect to the origin of the display area of the viewer, and obtains it by the calculation. Based on the coordinates of the origin of the obtained block, the coordinates of the origin of each frame element are calculated, respectively, and the origin of each frame element is moved to the coordinates obtained by the calculation, respectively. The image display method according to claim 2, wherein the movement is realized.
<Claim 10>
The divided image is an image obtained by dividing the image in a grid pattern in the horizontal direction and the frame element fits a plurality of continuous divided images in the horizontal direction. Alternatively, the divided image is the image in the vertical direction. It is an image divided into a grid and the frame element applies a plurality of continuous divided images in the vertical direction, or the divided image is an image obtained by dividing the image into a grid in the horizontal and vertical directions. And the frame element applies a plurality of continuous divided images in the horizontal direction, a plurality of continuous divided images in the vertical direction, or a plurality of continuous divided images in the horizontal direction and a plurality of continuous divided images in the vertical direction. The image display method as described in any one of these.
<Claim 11>
The image display method according to claim 1, wherein the viewer is a web browser, and each calculation in the web browser is executed based on JavaScript (registered trademark).
<Claim 12>
The image display method according to claim 11, wherein the frame element is set using a <DIV> tag.

  DESCRIPTION OF SYMBOLS 10 ... Web server (server computer), 12 ... Web browser (client computer, viewer), 14 ... Communication network, 16 ... Browser display area (viewer display area), 18, 18-1, 18-2 ... Image, 20 ... block, 22 ... cell (frame element), 24 ... divided image

Claims (4)

In an image display method for dividing an image larger than a display area for displaying an image of a viewer and displaying a divided image in which at least a part of the image is displayed in the display area of the viewer in the display area of the viewer,
An array of a plurality of frame elements corresponding to a display area in which the divided images are individually applied and displayed is set in the viewer, and the divided images at the corresponding positions are applied to the respective frame elements so that they can be displayed or displayed. Image display method. In an image display method for dividing an image larger than a display area for displaying an image of a viewer and displaying a divided image in which at least a part of the image is displayed in the display area of the viewer in the display area of the viewer,
Each of the divided images included in the image area of a limited range with respect to the entire image, which is in a predetermined positional relationship with the viewer display area, including the divided images that at least partly enter the viewer display area is individually applied. The arrangement of a plurality of frame elements corresponding to the display area to be displayed in the viewer is set in the viewer, and the divided images at the corresponding positions are applied to the respective frame elements to display or display them, and the display area of the viewer When the relative movement of the image with respect to is instructed, the position where the frame element should move relative to the display area of the viewer is calculated, the frame element is moved to that position, and the image moves away from the viewer display area along with the relative movement of the image Remove the frame element from the position corresponding to the image, add the frame element to the position corresponding to the divided image that approaches the viewer display area, and the position of the frame element array relative to the image Changed, the frame element to the additional, display by applying the divided images corresponding position or the image display method of the state to show.   An image display program for causing a processing device to execute the image display method according to claim 1.   A method of downloading an image larger than the display area of the viewer from the server and displaying the image on the viewer, wherein the viewer is a Web browser, and the image can be transmitted for each image obtained by dividing the image into a plurality of areas from the server. According to the relative position between the image and the display area of the web browser, a divided image that at least partially enters the display area of the web browser is determined, and the corresponding divided image is preferentially transmitted from the server and displayed on the web browser. Image display method.

Images