Use CSS to achieve text-to-image effects_CSS/HTML

For a piece of text, when the mouse clicks on the text, the text disappears, but the place where the original text was originally turned into a picture. When the mouse clicks on the picture, the picture disappears and the original text reappears. It's like magic, isn't it interesting?! This effect can also be achieved using Dreamweaver's Behavirs function, but that requires adding a JavaScript program, which obviously adds a lot of code. Using CSS to create this effect requires much less code.

Principle: Take advantage of the fact that CSS property values ​​can be changed dynamically.

Idea: Define two attribute values ​​​​of the CSS attribute of an HTML element, and then use an event to trigger it. Once the event occurs, the attribute value of the HTML element is changed to achieve the desired purpose.

Production method:

1. Enter a piece of text in the web page, enclose it with the "Span" tag, and add a CSS "ID" attribute to it (that is, give the text a codename, such as: "Text1", for identification); insert another picture, also enclose it with "Span", and add an "ID" attribute to it, such as: ID="image1";

2. Add the following CSS code between 〈head〉 and 〈/head〉 of the web page source code:

　〈style type="text/css"〉