Chapter 6 Image Processing
Images make HTML pages beautiful and vivid. The formats of images displayed by the browser are JPEG, BMP, and GIF. BMP files have a large storage space and are not recommended for transmission. Compared with commonly used JPEG and GIF images, JPEG images support millions of colors, even if data is lost during transmission, there will be no obvious difference in quality. The space occupied is larger than that of GIF. GIF images only contain 265 colors. Although the quality is not as high as JPEG images, the space occupied is small, the fastest download speed, supports animation effects, and transparent background color. Therefore, the format of the image-based Meihua page is determined based on the actual situation.
6-1 set the background image
In addition to using a single color as the background, you can also use images to set the background.
Set the format of the background image:
<Body background = "image-URL">
"Image-URL" indicates the position of the image.
Example: 6-1.html
<HTML>
<Head>
<Title> set the background image </title>
</Head>
<Body background = "imge/11.gif">
<Center>
<P> & nbsp; </P>
<P> & nbsp; </P>
<P> & nbsp; </P>
<P> & nbsp; </P>
<P> <font color = "#006600" size = "+ 6"> hope, hope, Dongfeng, spring approaching </font>
</P>
</Center>
</Body>
</Html>
6-2 insert an image tag in the webpage
Insert an image in the webpage with a single tag . When the browser reads the tag, the image set by this tag is displayed. If you want to modify the inserted image, it is not enough to use this attribute, but it must be done with other attributes.
Insert attributes of the Image Tag
| Genus | Description |
| SRC | Path of the image URL |
| ALT | Prompt text |
| Width | Generally, the width is set to the actual size of the image to avoid distortion. It is best to use an image tool to change the image size. |
| Height | Generally, the height is set to the actual size of the image to avoid distortion. It is best to use an image tool to change the image size. |
| DYNSRC | URL path of the AVI file |
| Loop | Set the number of AVI file loop playback times |
| Loopdelay | Set AVI file loop playback latency |
| Start | Sets the playback mode of an AVI file. |
| Lowsrc | Set a low-resolution image. If you add a large image, you can first display the image. |
| Usemap | Image Map |
| Align | Arrange attributes between images and text |
| Border | Border |
| Hspace | Horizontal spacing |
| Vlign | Vertical spacing |
Format and general attribute settings:
6-1-1 insert Image
Example: 6-2-1.html
<HTML>
<Head>
<Title> insert a common image </title>
</Head>
<Body>
<Body>
<Center>
<H2> love is in the late autumn </H2>
</Center>
<WBR>
<P> the autumn rain is everywhere. <Br>
The autumn wind of the week is everywhere in the suburbs of the depression. Unable to fight against the autumn wind of the dead leaves, can only with silk care, helpless wandering away from the branches of nostalgia. The wail of autumn Chan gradually fell short, and there were more fallen leaves on the ground ...... <Br>
At dusk, I walk in the forest in the suburbs and want to savor the cold autumn rain. <Br>
However, "from rain to late autumn, it is easy to work in the forest, Xiao is difficult to be at this time." At this time, who can listen to my feelings? <Br>
</P>
</WBR>
</Body>
</Html>
6-2-2: Set the upper left and lower left spaces (in the upper left corner ).
Example: 6-2-2.html
<HTML>
<Head>
<Title> set the distance between the image and text </title>
<Body>
<Font size = "+ 3"> the autumn rain is everywhere. <Br>
The autumn wind of the week is everywhere in the suburbs of the depression. Unable to fight against the autumn wind of the dead leaves, can only with silk care, helpless wandering away from the branches of nostalgia. The wail of autumn Chan gradually fell short, and there were more fallen leaves on the ground ...... <Br>
At dusk, I walk in the forest in the suburbs and want to savor the cold autumn rain.
However, "from rain to late autumn, it is easy to work in the forest, Xiao is difficult to be at this time." At this time, who can listen to my feelings? </Font> <br>
</Body>
</Html>
6-2-3: Set the method for calligraphy and painting
The align attribute is used to set the align between an image and a text. Align can be aligned in two ways: absolute and relative. The effect of the absolute alignment method is the same as that of the text. There are only three types of effects: Center (middle), left (left), right (right ). The Relative Text alignment mode refers to the relative position of an image and a line of text.
Set its attribute align
| Property Value | Matching Method |
| Top | Upper alignment |
| Middle | Center alignment |
| Bottom | Bottom alignment |
| Left | Left aligned |
| Right | Right alignment |
Example: 6-2-3.html
<HTML>
<Head>
<Title> controls the horizontal alignment of the image to the text baseline </title>
</Head>
<Body>
This image is a multi-line text line aligned on the top of the text line. <br> imagine that haitang is charming and smooth on the night of yuyue; why are the birds with different branches dreaming? Why don't you go to sleep with your eyelids? What is he waiting? Can't bear that faint moon? Can't bear the thin curtain? No, no, no. You got the curtain and went down to it. You have to go to the curtain.-Are you looking for the shutter? His love and charm are like this! What about the hazy moon? What about the birds? However, how can I handle this problem? <Br> I have a great call. Can you come out?
<Br> the layout of this page is as economical as it is, and the color is as soft as it is, so it is brilliant and attractive. Although it is a small area, and the love rhyme is thick, it is more than enough. I read this picture. However, I was surprised: I couldn't help myself. Therefore, I will write down my feelings in detail to express this karma. However, I am a layman in Chinese and western paintings, and I can't help but laugh at what I say. -- It's up to him.
<P>
<HR color = "#00ff00">
This image is aligned with multiple lines of text on the text baseline <br> imagine that haitang is charming and smooth on the night of yuyue; why are the birds with different branches dreaming? Why don't you go to sleep with your eyelids? What is he waiting? Can't bear that faint moon? Can't bear the thin curtain? No, no, no. You got the curtain and went down to it. You have to go to the curtain.-Are you looking for the shutter? His love and charm are like this! What about the hazy moon? What about the birds? However, how can I handle this problem? <Br> I have a great call. Can you come out?
<Br> the layout of this page is as economical as it is, and the color is as soft as it is, so it is brilliant and attractive. Although it is a small area, and the love rhyme is thick, it is more than enough. I read this picture. However, I was surprised: I couldn't help myself. Therefore, I will write down my feelings in detail to express this karma. However, I am a layman in Chinese and western paintings, and I can't help but laugh at what I say. -- It's up to him.
<P>
<HR color = "#00ff00">
This image is aligned with a single line on the top of the text baseline <p>
<HR color = "#00ff00">
This image is aligned with the text baseline in a single line. </P>
<P>
<HR color = "#00ff00">
<P>
This image is aligned with the text baseline with a middle line. </P>
<P> & nbsp; </P>
<P> <a href = "#" onclick = "javascript: window. History. Back ()"> return </a> </P>
<P>
</Body>
</Html>
6-2-4 image size setting
Example: 6-2-4.html
<HTML>
<Head>
<Title> image size setting </title>
</Head>
<Body>
<Center>
<P>
Zoom out image
<P>
<P> source Image Display
<P>
<P> enlarge the image
<P>
</P>
</Center>
</Body>
</Html>
6-2-5 image border settings
Example: 6-2-5.html
<HTML>
<Head>
<Title> set the border of the image </title>
</Head>
<Body>
<Center>
<Div align = "center">
<PRE> </PRE>
</Div>
</Body>
</Html>
6-3 image hyperlinks
6-3-1 image hyperlink
The image link and text link are the same, both of which are completed using the <A> label, you only need to put the label on the <A> and </a> tab. The image linked with an image has a blue border. The border color can also be set in the <body> label.
Example: 6-3-1.html
<HTML>
<Head>
<Title> use an image as the selected object </title>
</Head>
<Body>
<P align = "center"> & nbsp; </P>
<H1 align = "center"> hyperlink to an image <P>
<Center>
<A href = "http://www.sohu.com/" target = "_ blank"> </a> <p>
<A href = "http://www.baidu.com/"> </a> <p>
<A href = "http://www.sina.com.cn"> </a>
</Center>
</Body>
</Html>
6-3-2 image map hyperlink
In HTML, images can also be divided into multiple hotspot areas, each of which is linked to resources of different web pages. The essence of this effect is to divide an image into different hotspot areas and then create hyperlinks for different areas. This is the image map. Three tags are used to complete the map area hyperlink: <map> <area> The following describes the usage of these tags:
Format of the image map label:
<! -- When inserting an image, you must set the parameter usemap = "# image name" in the tag to reference the image map (image name). -->
<Map Name = "Graph name">
<! -- Use <map> to mark and set the region of the image map, and use the name attribute to name the image -->
<Area shape = shape coords = region coordinate list href = "url resource address">
...... How many hotspot regions can be defined as needed
<Area shape = shape coords = region coordinate list href = "url resource address">
</Map>
[1] shape -- Define hotspot shape
Shape = rect: rectangle
Shape = circle: Circle
Shape = poly: Polygon
[2] coords -- defines the coordinates of regional points
A. rectangle: four digits are required. The first two digits are the coordinates in the upper left corner, and the last two digits are the coordinates in the lower right corner.
Example: <area shape = rect coords =, 50, href = "url">
B. Circle: three digits must be used. The first two digits are the coordinates of the center, and the last digit is the radius length.
Example: <area shape = circle coords = 85,155, 30 href = "url">
C. Any image (polygon): Fill in the coordinates of each turning point of the image in order
Example: <area shape = poly coords = 232,70, 285,70, 90, 78 href = "url">
Note the following points when creating the results described in this article:
1. Do not forget to set the usemap parameter in the mark, and the usemap parameter value must be the same as the name parameter value in the <map> mark, that is, the "Image Map Name" must be consistent;
2. All hotspot areas in the same "image map" must be within the range of the image map, that is, all <area> tags must be between <map> and </map>;
3. The coordinate format set by the cords parameter in the <area> label must match the shape of the region to which the shape parameter is set, to avoid appearing in the region of the rectangle set by the shape parameter, what we set in cords is the coordinate of vertices in the polygon area.
Instance 6-3-2.html
<HTML>
<Head>
<Title> Image Map </title>
</Head>
<Body>
<Map Name = "yxdt">
<Area shape = "rect" coords = "180,120," href = "http://www.baidu.com/" target = "_ blank" alt = "click to link to Baidu search">
<Area shape = "circle" coords = "283,95, 45" href = "http://www.sina.com.cn" target = "_ blank" alt = "click to link to Sina website">
</Map>
<P> & nbsp; </P>
<P> & nbsp; </P>
<P> & nbsp; </P>
<P> & nbsp; </P>
<P> & nbsp; </P>
<P> & nbsp; </P>
<P> <a href = "#" onclick = "javascript: window. History. Back ()"> return </a> </P>
</Body>
</Html>
6-4 Use the label to insert an AVI file
Format:
tag insert AVI file attributes
| Genus | Description |
| DYNSRC | Path of the AVI file |
| Loop | Set the number of AVI file Loops |
| Loopdelay | Set AVI file loop latency |
| Start | Sets the file playback mode fileopen/Mouseover (play when the webpage is opened/play when the mouse slides to the AVI file) |
Example: 6-4.html
<HTML>
<Head>
<Title> set the border of the image </title>
</Head>
<Body>
<Center>
<P align = "center">
</P>
</Center>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
