HTML.co.uk

While viewing any ecommerce site, it is a very common observance that you can maximise and restore the image within the same page. There is usually small clickable area on the image. Whenever you click on that particular area the image is maximized and on this maximized image there is yet more clickable area on which when you click the image is restored to its normal or original size. There is a special method where in there is no special clickable area but once you click on the image anywhere for that matter, it gets maximized covering all the minutest details even the text of any kind. And once you click again on the image it restores back to its original size.

One way of achieving this would be to buy a program that would do the required task wherein you are not really aware about the program that is being written but are just able to produce the image with effects. Another method that is not known to all and is a special method that uses HTML, CSS and java script called the layered method can also be used for achieving this. For this you just need to be aware about the basics of HTML, CSS and java script.

According to this Layer Method, the image as we all know has an event called the onclick event, which calls the Java Script function. In Java Script there is a special global variable which is used to indicate whether the image is maximized or not. The java script function makes use of this variable for changing the dimensions as well as the layer of the image by changing the CSS properties. Here the term Layering simply indicates that one HTML element is capable of appearing in front of the other HTML element thereby covering the rear image completely or partially. However many of the browsers do not actually support this concept of layering in the format that has been specified by the W3C.

Whenever you place the mouse on the HTML element its title attribute produces a tool tip. The image that is being considered is further given a title attribute which reads Click To Maximize. Therefore whenever the mouse is clicked the image gets to its maximum size and the value of tool tip changes to Click To Restore. When you further click the image the image is restored to its original size and the tool tip value further changing to Click To Maximise again.

It has most commonly been observed that whenever the image is increased in size or dimensions from its original size the resolution or the fineness is usually lost whereas the same is not true while reducing the size. The simple solution to this problem is to make the original size taken from the digital camera or the scanner to be the largest size that can be displayed on the web page. Let this be the size that would be downloaded on to the web page. Now the maximized size should never be greater than the original size which is obtained from the digital camera or the scanner.

Whenever the image is maximised its position is usually changed and it covers all the other elements around it. It may not be a major problem as during the enlargement of the image the main concentration is on the enlarged image rather than anything else. But still there is a solution to this problem. Browsers do not usually handle the CSS position: absolute property as it actually should. The maximised image is in the table cell. Therefore giving the Table Cell the attribute and value valign = top would perfectly solve the problem.

HTML images as discussed earlier, plays a very important role in attracting the web traffic towards your web site. Images are those elements of HTML documents, which add life to the web page and increase its worth. Images and other type of graphics can be used in a number of ways for different purposes but there are some important things, which should be considered before using them.

Why to use Graphics?

The first and foremost thing is to determine that why you should include graphics into your web page. Is there actually a need to use them? This is very important because images make the web sites heavy and it takes more time to load the web pages. Secondly, if you use too much of images then the user will get confused and the main subject matter of the document will get lost. Thus it should be well determined in advance that whether an image is required or not.

What type of graphics should be used?

If there is a scope for an image in the web site then a proper analyses regarding its design, color, size and position should be done. The size and the position of the image totally depend upon the type of content of the HTML document. The color, border style and the contrast too must be selected keeping in mind the background of the web site. The image should attract the viewer and it should give a soothing effect. If there is an ugly image with dark colors, then nobody will like to visit the web page.

Some important rules to be followed while using the images:

• Before using an image, check about its copyrights. One cannot use company logos, images, patented graphics etc.
• Never use any kind of offensive or pornographic images.
• Don’t use those images which make web pages heavy to load.
• Choose the right format for your image. If you want to use animation then .GIF is the best format to use otherwise if you want good resolution then go with JPEG/JPG.
• Images should be clear enough to view.

About Image size hints:

Size hints are used to explicitly define the height and width of the image. It has two main advantages:

1) If a user has disabled inline images in his browser the size hints for the image are not given, then instead of the image a small box will appear which will spoils all the formatting of the web page. If you give the size hints, then a blank box of the same size as of image will appear. This will preserve the formatting and appearance of the web page as it is.
2) Image size hints let the browser to display the formatted content/text quickly and download the image side by side. Thus, the user gets the main content even if the full image is not there and does not sits idle.

Size hints can be used by specifying HEIGHT and WIDTH attributes of <IMG> tag. For example:

<HTML>
<IMG SRC=”Content Mantra.jpg” WIDTH=”300” HEIGHT=”250”>
</HTML>