CSS style sheet implements text-changing image effects

css| Effect | style sheet

A paragraph of text, when the mouse clicks on the text above, the text disappears, the original text of the place has immediately become a picture, when the mouse clicks on the picture, the picture disappears again, the original text again, like magic, is not mean?! This effect can also be achieved with the Dreamweaver behavirs function, but adding a JavaScript program adds a lot of code. and using CSS to make this effect, the increase in code is much less.

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

Idea: Define an HTML element CSS attribute of two attribute values, then use an event to trigger, once the event occurs, then change the HTML element attribute value, so as to achieve the intended purpose.

Production method:

1, enter a paragraph of text in the webpage, enclose it with "Span" mark, and give it a CSS "id" attribute (that is, a code for this text, such as: "Text1" to identify), and then insert a picture, also use "Span" to enclose it, also give it an "id" Properties, such as: Id= "Image1";

2, in the Web page source code between the 〈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 "top" and "left" in the code above are used to position text and pictures in a 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 to determine whether the current object is displayed CSS properties, this example is dynamically changing this property value to achieve the effect;

3, in "Text1" in that "span" load CSS. Style2 ", let the text at the beginning is displayed, and then load an" onclick "trigger event, once this event occurs, will do two things, one is to let" Text1 "adopt CSS". Style1 ", The second is to let the "Image1" using CSS ". Style4", let the image display. So, the code for "Text1" and that text is this:

〈span id= "Text1" class= "Style2"
〈font color= "#0000FF" the mouse clicks on the text, and the text disappears into the image. Click on the image and the image disappears and reverts to the text. 〈/font〉
〈/span〉

4, also in "Image1" in that "span" load 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 second is to let" image1 "using CSS". Style3 ", so that the image hidden. So, the code for "Image1" and that picture is this:

〈span id= "Image1" class= "Style3" 〉〈img src= "Http://www.webjx.com/htmldata/2006-09-06/image/line.gif" width= "316" Height= "26"
〈/span〉

The code in "IMG" in the above code will change as the picture is inserted in the actual production.