HTML Advanced application Tips (iv) Using a good basic image tag img

Skills

The most fascinating thing about the web is the colorful images. The success of the site can not have a gorgeous image, otherwise it will make the survey people feel uninteresting. The following describes the basic image tag: in the HTML language. Its basic grammatical structure is as follows:

Align=top|middle|center|bottom|left|right
Class=type
Id=value
Name=value
Src=url
Title=text
Alt=value
Border=n
Height=n
Width=n
Hspace=n
Vspace=n
Ismap=image
Usemap=url
Onload=function
Onabort=function
Onerror=function
Dynsrc=url
Controls=controls
Loop=n
Start=type>

As you can see, there are up to 21 application parameters for basic image tag . Of course, we only use a few of these items, only if we need to implement special effects, we need more parameters. Here are the specific meanings of each parameter:

Align: Specifies whether the image is positioned on the left, right, center, top, or bottom. By default, it is up, that is, align=top. This parameter is useful when you are in a picture-and-text mixed row.

Class and ID: Specifies the ID number of the type and image to which the image belongs.

Name: Lets you set the names of the images.

src: Specify the URL address of the inserted image, which is the image filename with the path.

Title: Sets the caption of the image.

ALT: Represents an alternate word for an image, used primarily to display information about the image when the browser has not yet mounted the image (or turns off the image display). This is the most easily overlooked parameter for beginners, because it does not set the normal display of the problem.

Border: Sets the border of the picture.

Height and width: Used to specify the height and width of the image, and can be different from the original width and height of the picture.

Hspace and vspace: Used to set the left and right border of the image and the size of the top and bottom border, in the text mixed row.

ISMP and Usemap: used when applying image maps. ISMAP represents the image map data stored in the server, when the mouse on a region on the image, you can transfer the coordinates of this area to the server processing. Usemap is used to set the name of the image map.

OnLoad, Onabort, onerror corresponding to the Set subroutine, respectively, in the image is loaded, canceled load, loading errors in the case of their corresponding subroutine, not commonly used.

DYNSRC: Specifies the URL address of the image fragment to be downloaded.

CONTROLS: Set the control button for video playback.

Loop: Specifies the number of times the video fragment is played, and when Loop=-1, the image fragment loops until the page is updated.

Start: Set when to start playing video clips, there are three choices: Start=fileopen means that the page is loaded to start playing, the default is this state; Start=mouseover says that when the mouse moves to the image, it starts playing; Start=fileopen, MouseOver says it starts playing when one of the above two situations occurs.

Application Skills

1. Add a border to the picture

Above this picture's border is border= "4" The effect, note: The border color default is black, is not beautiful, but the mark also has not set the border color The parameter, we can by the setting class parameter calls the CSS to change the border color the goal, The complete code for this example is:

and

<style type= "Text/css" >
<!--
. style1 {border-color: #009900}
-->
</style>

2, to the picture plus dynamic description and alternative text

If you want to make a short line of text that appears when you move the mouse over the picture, you don't have to use layer technology (except for special effects) and you can set the title argument. Example: In the example of the picture code changed to this: . In this way, when the mouse moved to the picture, it will show the text "Web teaching Network-Professional web page teaching site."

Add alternative text to the picture is a good habit, like the example set alt parameter, when the user turned off the image display or the page just downloaded, the picture has not come and display, the image of alternative text will be displayed, so that users can know the corresponding image content.

3, image and text mixed row

Graphic mixed row is mainly set align parameters. Here to note:

1 The effects of top, middle, center, and bottom are just one line of text, with left and right parameter values when multi-line text is aligned with the image.

2 the alignment parameter in align the effect is the position of the picture and the surrounding text, and the position alignment of the picture in the page is set in the page element where the picture is located. As in the following code:

<p align= "left" > Graphic Mix example </p>

In the above code, the align= "left" in tag <p> indicates that the position of the picture is in the left of the window, while the align= "top" in indicates that the text next to the picture is aligned with that of the picture.

3 in order to avoid the picture and side text too close to read, you can set the hspace parameters to control the distance between the picture and the text, general settings hspace= "10" (indicating that the picture has 10 pixels in the blank) can achieve better results.

4, dynamic replacement of the image

The mouse is not on the picture

Move the mouse over the picture

When the user's mouse is placed on the picture, the picture will be automatically replaced, the mouse left, the picture will revert to the original sample. As shown above, when you move the mouse over it, the effect appears to be that the white window is unfolding up and down, actually changing a picture. The mouse moves away and restores its original shape. To make this effect, first set the name for the image to be replaced, in this case the Name= "WEBJX", and then set the Onmuseover and onmouseout parameters. The complete code for this example tag is as follows:

Using this example to create a dynamic button will achieve very attractive results.

5. Add video clips to the Web page

Example: In the video directory there is an introduction to "Web production" of the image fragment file "Web.avi", is now to play in the Web page. So the source code is this:

The effect of the above code is that when the mouse moves the image fragment, it starts to play the media player once, and also sets the display player Control Panel to control the playback process.

As you can see from the above code, adding image fragments to a Web page is basically the same as adding a normal image, such as specifying a source, setting size, and replacing text. But here, please note that when you add an image fragment, you use the "dynsrc" parameter, and you cannot use the "src" parameter in the same tag, or you will not be able to play an image fragment, only to display alternate text.