Using CSS to implement the text change image effect _css/html

A paragraph of text, when the mouse click on the text above, the text disappears, the original text of the place but immediately became a picture, when the mouse click on the picture, the picture disappears, the original text again reproduced, like magic, is there meaning?! This effect is also achievable with the behavirs feature of Dreamweaver, but it adds a lot of code to a JavaScript program. and using CSS to make this effect, the increase in code is much less.

Principle: Using CSS property values can dynamically change the characteristics.

Idea: Define two property values for an HTML element CSS property, and then trigger it with an event that, once the event occurs, changes the value of the HTML element's attributes to achieve the intended purpose.

Production method:

1, enter a paragraph in the Web page, with the "span" tag to enclose it, and give it a CSS "ID" attribute (that is, to write a code for the text, such as: "Text1", in order to identify); Insert a picture, also use "span" to enclose it, and add an "id" to it. attributes, such as: Id= "Image1";

2, in the page source code between 〈head〉 and 〈/head〉 add the following CSS code:

〈style type= "Text/css"

〈!--

. style1 {position:absolute; top:200px; left:180px;

Background-color: #ccccff; Visibility:hidden}

. style2 {position:absolute; top:200px; left:180px;

Background-color: #ccccff; }

. style3 {position:absolute; top:190px; left:180px;

Visibility:hidden}

. style4 {position:absolute; top:190px; left:180px;}

--〉

〈/style〉

The values of "top" and "left" in the above code are used to position text and pictures in the Web page, and "Backgroud-color" is used to determine the background color of the text, which is modified according to the actual situation. Visibility is the CSS property that determines whether the current object is displayed, in this case, the property value is changed dynamically to achieve the effect;

3, the "Text1" in the "span" loaded CSS ". Style2", so that the beginning of the text is displayed, and then load an "onclick" trigger event, once this event occurs, will do two things, one is to let "Text1" using CSS ". Style1", The text is hidden, and the second is to let the "image1" use CSS ". Style4" to make the image display. In this way, "Text1" and the text of the code is this: 〈span id= "Text1" class= "Style2" onclick= "document.all.text1.classname=" Style1 "; Document.all.image1.classname= ' style4 ' "〉〈font color=" #0000FF "mouse click on this text and the text disappears into an image. Click on the image and the image disappears to revert to text. 〈/font〉

〈/span〉
4, the same "Image1" in the "span" loaded CSS ". Style3", so that the picture is hidden at the beginning, and then load an "onclick" trigger event, once this event occurs, will do two things, one is to let "Text1" using CSS. Style2 ", the text display, and the second is to let" image1 "using CSS". Style3 ", so that the image is hidden. So, the code for "Image1" and that picture is this:

〈span id= "Image1" class= "Style3" onclick= "document.all.text1.classname=" ' Style2 ';d ocument.all.image1.

Classname= ' Style3 ' "〉〈img src=" Image/line.gif "width=" 316 "

Height= "26" 〉〈/span〉

The code in the above Code "IMG" in the actual production will vary with the inserted picture.

