System and method for scaling up an image of an article displayed on a sales promotion web page

Abstract

Method and arrangement for scale-up of an image of an article displayed on a sales promotion web page is disclosed. The method includes displaying an image of an article on a sales promotion web page in a first scale. The method then includes, based on cursor-selection of the displayed image, enlarging the scale of the image to a second larger scale on the same web page.

We claim: 
     
       1. A method comprising:
 displaying a first image in a main display area and a second image in a thumbnail display area on a web page hosted on a web server, wherein the first image is displayed in a first scale and the second image is displayed in a second scale that is smaller than the first scale; 
 receiving a selection of the second image; 
 based on the selection, moving the second image to a first location associated with the first image and moving the first image to a second location corresponding to a previous location of the second image on the web page displaying the second image in the main display area by replacing the first image, wherein the second image is enlarged to the first scale as the second image is moved to the first location, the enlarging being performed in a continuous and animated manner, without refreshing the web page presented in the first scale, and the first image is presented in the second scale; 
 while the second image is located at the first location displayed in the main display area, detecting that an indicator is positioned at a first point over the second image, wherein movement of the indicator is controlled by a user; 
 in response to detecting that the indicator is positioned at the first point, enlarging a portion of the second image corresponding to the first point, wherein the portion of the second image that is enlarged is presented in a third scale that is larger than the first scale; and 
 after enlarging the portion of the second image, relocating web page elements to accommodate the enlarged portion of the second image, wherein relocating the web page elements comprises animating the web page elements to smoothly move from an original position and size to a new position and new size; 
 receiving a further selection of an image presented in the second scale from the thumbnail display area; and 
 presenting the selection of the image presented in the second scale in the same scale as the scale of a most recently enlarged image. 
 
     
     
       2. The method of  claim 1 , wherein enlarging the portion of the second image is performed by smoothly expanding the portion of the second image to the third scale. 
     
     
       3. The method of  claim 2 , wherein the portion of the second image that is enlarged to be presented in a third scale is presented at a first resolution level and a second portion of the second image that is not enlarged is presented at a second resolution level, the first resolution level being higher than the second resolution level that is higher than the resolution level of the second image that is presented at the first scale. 
     
     
       4. The method of  claim 1 , further comprising:
 displaying alternative thumbnail images on the web page in the thumbnail display area, wherein the second image comprises one of the alternative thumbnail images; 
 receiving a designation of a selected thumbnail image, the selected thumbnail image being the second image; 
 exchanging the selected thumbnail image with the first image by smoothly enlarging the selected thumbnail image, smoothly reducing the first image in size, and smoothly transitioning the first image to the thumbnail display area and the selected thumbnail image to each other's respective location to the main display area; and 
 presenting an animated movement of information associated with at least one of the selected thumbnail image and the first image. 
 
     
     
       5. The method of  claim 1 , further comprising removing the web page elements to accommodate the second image. 
     
     
       6. The method of  claim 1 , further comprising converting the web page elements to semi-transparent form and at least partially overlaying the web page elements in semi-transparent form on the first second image. 
     
     
       7. A system comprising:
 a computer processor; and 
 a memory containing instructions that, when executed, cause the computer processor to: 
 display a first image in a main display area and a second image in a thumbnail display area on a web page hosted on a web server, wherein the first image is displayed in a first scale and the second image is displayed in a second scale that is smaller than the first scale; 
 receive a selection of the second image; 
 based on the selection, move the second image to a first location associated with the first image and moving the first image to a second location corresponding to a previous location of the second image on the web page display the second image in the main display area by replacing the first image, wherein the second image is enlarged to the first scale as the second image is moved to the first location, the enlarging being performed in a continuous and animated manner presented in the first scale, and the first image is presented in the second scale, without refreshing the web page; 
 while the second image is located at the first location displayed in the main display area, detect that an indicator is positioned at a first point over the second image, wherein movement of the indicator is controlled by a user; 
 in response to detecting that the indicator is positioned at the first point, enlarge a portion of the second image corresponding to the first point, wherein the portion of the second image that is enlarged is presented in a third scale that is larger than the first scale, and 
 after enlarging the portion of the second image, relocate web page elements to accommodate the enlarged portion of the second image, wherein relocating the web page elements comprises animating the web page elements to smoothly move from an original position and size to a new position and new size; 
 after enlarging the portion of the second image, receiving a selection of the first image or a third image; and 
 in response to the selection of the first image or the third image, displaying the selected first image or third image in the third scale. 
 
     
     
       8. The system of  claim 7 , wherein enlarging the portion of the second image is performed by smoothly expanding the portion of the second image to the third scale. 
     
     
       9. The system of  claim 8 , wherein the portion of the second image that is enlarged to be presented in a third scale is presented at a first resolution level and a second portion of the second image that is not enlarged is presented at a second resolution level, the first resolution level being higher than the second resolution level that is higher than the resolution level of the second image that is presented at the first scale. 
     
     
       10. The system of  claim 7 , wherein the instructions further cause the computer processor to:
 display alternative thumbnail images on the web page in the thumbnail display area, wherein the second image comprises one of the alternative thumbnail images; 
 receiving a designation of a selected thumbnail image, the selected thumbnail image being the second image; 
 exchange the selected thumbnail image with the first image by smoothly enlarging the selected thumbnail image, smoothly reducing the first image in size, and smoothly transitioning the first image to the thumbnail display area and the selected thumbnail image to each other's respective location to the main display area; and 
 present an animated movement of information associated with at least one of the selected thumbnail image and the first image. 
 
     
     
       11. The system of  claim 7 , wherein the instructions further cause the computer processor to:
 remove the web page elements to accommodate the second image. 
 
     
     
       12. The system of  claim 7 , wherein the instructions further cause the computer processor to:
 convert the web page elements to semi-transparent form and at least partially overlaying the web page elements in semi-transparent form on the first second image. 
 
     
     
       13. A non-transitory computer-readable medium storing instructions that, when executed by a computer processor, cause the computer processor to:
 display a first image in a main display area and a second image in a thumbnail display area on a web page hosted on a web server, wherein the first image is displayed in a first scale and the second image is displayed in a second scale that is smaller than the first scale; 
 receive a selection of the second image; 
 based on the selection, move the second image to a first location associated with the first image and moving the first image to a second location corresponding to a previous location of the second image on the web page display the second image in the main display area by replacing the first image, wherein the second image is enlarged to the first scale as the second image is moved to the first location, the enlarging being performed in a continuous and animated manner, without refreshing the web page presented in the first scale, and the first image is presented in the second scale; 
 while the second image is located at the first location displayed in the main display area, detect that an indicator is positioned at a first point over the second image, wherein movement of the indicator is controlled by a user; 
 in response to detecting that the indicator is positioned at the first point, enlarge at least a portion of the second image corresponding to the first point, wherein the at least the portion of the second image that is enlarged is presented in a third scale that is larger than the first scale, and 
 after enlarging the at least the portion of the second image, relocate web page elements to accommodate the at least the portion of the second image, wherein relocating the web page elements comprises animating the web page elements to smoothly move from an original position and size to a new position and new size; 
 receiving a further selection of an image presented in the second scale from the thumbnail display area; and 
 presenting the selection of the image presented in the second scale in the same scale as the scale of a most recently enlarged image. 
 
     
     
       14. The non-transitory computer-readable medium of claim 13, wherein the portion of the second image that is enlarged is presented at a higher resolution level than the portion of the second image prior to being enlarged. 
     
     
       15. The non-transitory computer-readable medium of claim 13, wherein the instructions further cause the computer processor to:
 display alternative thumbnail images on the web page in the thumbnail display area, wherein the second image comprises one of the alternative thumbnail images;   receiving a designation of a selected thumbnail image, the selected thumbnail image being the second image;   exchange the selected thumbnail image with the first image by smoothly enlarging the selected thumbnail image, smoothly reducing the first image in size, and smoothly transitioning the first image to the thumbnail display area and the selected thumbnail to the main display area; and   present an animated movement of information associated with at least one of the selected thumbnail image and the first image.   
     
     
       16. The non-transitory computer-readable medium of claim 13, wherein the instructions further cause the computer processor to:
 remove the web page elements to accommodate the second image.   
     
     
       17. The non-transitory computer-readable medium of claim 13, wherein the instructions further cause the computer processor to:
 convert the web page elements to semi-transparent form and at least partially overlaying the web page elements in semi-transparent form on the second image.   
     
     
       18. The method of claim 1, comprising displaying the enlarged portion in an overlay at least partially overlaying the web page elements. 
     
     
       19. The system of claim 7, wherein the instructions further cause the computer processor to: display the enlarged portion in an overlay at least partially overlaying the web page elements. 
     
     
       20. The non-transitory computer-readable medium of claim 13, wherein the instructions further cause the computer processor to: display the enlarged portion in an overlay at least partially overlaying the web page elements. 
     
     
       21. The method of claim 1, comprising:
 displaying alternative thumbnail images for the same item on the web page in the thumbnail display area, wherein the second image comprises one of the alternative thumbnail images.   
     
     
       22. The method of claim 1, wherein the relocating the web page elements to accommodate the enlarged portion of the second image, further includes relocating the web page elements to accommodate the thumbnail display area.