Cascading Style Sheets with CSS text change images to achieve special effects
A section of text, when the mouse click in the text above, the text disappeared, but where the original text into a picture immediately, when the mouse click on the picture, the picture has disappeared, the original text and reproducibility, as change Like magic, is not interesting? this effect using the Dreamweaver Behavirs function can be achieved, but to add a Javascript procedures, significantly increased the number of code. CSS will use to produce this effect, the code has to increase much less.
Principle: The CSS attribute value to the characteristics of dynamic change.
Thinking: a definition of HTML element CSS attributes of the two attribute values, and then to trigger an event, once the incident occurred, the change HTML element attribute value, so as to achieve the desired objectives.
Production Methods:
1, a section of the web site, enter text, "Span" tags enclose it, and give it a CSS and the "ID" attribute (that is, made to the wording of a code, such as: "Text1" for the identification) ; to insert a picture, and is also "Span" enclose it, but also to increase it a "ID" attributes, such as: ID = "image1";
2, the website source code and <head> </ head> add between this CSS code below:
<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>
In the above code, "top" and "left" for the value of positioning text and picture in the page position, "backgroud-color" for the text background color, according to the value of these properties practical situation. Visibility is to decide whether the current display attributes of CSS, this is a dynamic change of this property values to achieve the desired effect;
3, "Text1" that "span" in the loading of CSS. "Style2" so that part of the text is the beginning of the show, and reloading a "onclick" trigger events, if this incident will do two matter, first, let the "Text1" by the CSS. "style1" the hidden text; Second is the "image1" by the CSS. "style4" to display images. In this way, "Text1" and the text of that part of the code is as follows: <span id = "text1" class = "style2" onclick = "document.all.text1.className = 'style1'; document.all.image1.className = 'style4' "> <font color="#0000FF"> mouse in this text, click, text disappear into images. Click on the image, the image disappeared, revert to the text. </ Font>
</ Span>
4, the same "image1" that "span" in the loading of CSS. "Style3", a picture began toé‚£å¼ is hidden, and reloading a "onclick" trigger events, if this incident will be done two things, first, let the "Text1" by the CSS. "style2", the text shows that the second is the "image1" by the CSS. "style3" to hide images. In this way, "image1" and the codeé‚£å¼ picture is this:
<Span id = "image1" class = "style3" onclick = "document.all.text1.className = 'style2'; document.all.image1.
ClassName = 'style3' "> <img src =" image / line.gif "width =" 316 "
Height = "26"> </ span>
Above code "img" in the code in the actual production will insert a picture with the different changes.
Tags: Border Style, css style, css style sheet, div effects, div style, style
Leave a Reply