Use CSS to implement text-to-image effects

A paragraph of text. When the mouse clicks on the text, the text disappears, but the original text is immediately changed to an image. When the mouse clicks on the image, the image disappears again, the original text is reproduced again. Is it interesting like magic ?! This effect can also be achieved using the behavirs function of Dreamweaver, but you need to add a javascriptProgram, Significantly increasedCode. CSS is used to make this effect, but the added code is much less.

Principle: The attribute values of CSS can be dynamically changed.

Idea: define two attribute values for the CSS attribute of an HTML element and use an event to trigger it. Once an event occurs, the attribute values of the HTML element are changed to achieve the expected purpose.

Production method:

1. Enter a piece of text in the webpage, enclose it with the "span" mark, and add a CSS "ID" attribute to it (that is, compile a code for this text, for example, "text1" for recognition); insert an image, also use "span" to enclose it, and add an "ID" attribute to it, such: id = "image1 ";

2. on the webpageSource codeAdd the following CSS code between

<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: pixel PX; left: 180px;

Visibility: hidden}

. Style4 {position: absolute; top: pixel PX; left: 180px ;}

--> --〉

</Style> 〉

The values of "TOP" and "Left" in the above Code are used to locate the text and image in the webpage, and "backgroud-color" is used to determine the background color of the text, these attribute values must be modified based on actual conditions. Visibility is the CSS attribute that determines whether the current object is displayed. In this example, the attribute value is dynamically changed to achieve the effect;

3. Load the CSS "in the" span "of" text1 ". style2 "enables that text to be displayed at the beginning and loads an" onclick "trigger event. Once this event occurs, two things will be done, first, let "text1" use CSS ". style1 "to hide the text. Second," image1 "adopts CSS". style4 "to display the image. In this way, the code of "text1" and that section of the text is as follows: <span id = "text1" class = "style2" onclick = "document. all. text1.classname = ''style1'; document. all. image1.classname = ''style4'' "> <font color =" # 0000ff "> click the text and the text disappears into an image. Click on the image. The image disappears and is restored to text. </Font> 〉

</Span> 〉
4. Add the CSS "in the" span "of" image1 ". style3 ", so that the image is hidden at the beginning, and then loads an" onclick "trigger event. Once this event occurs, two things will be done, first, let "text1" use CSS ". style2 "to display the text. Second, let" image1 "use CSS". style3 "to hide the image. In this way, the code for "image1" and the image is as follows:

<Span id = "image1" class = "style3" onclick = "document. All. text1.classname = ''style2'; document. All. image1.

Classname = ''style3' ">

Height = "26"> </span> 〉

In the above code, the code in "IMG" will change as the picture is inserted.