Using CSS to realize the effect _css/html of text-changing image

Source: Internet
Author: User
Tags visibility

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. In this way, the "Text1" and the text of the code is such: 〈span id= "Text1" class= "Style2" onclick= "document.all.text1.classname=" ' Style1 '; Document.all.image1.classname= ' Style4 ' "" 〉〈font color= "#0000FF" the mouse clicks on the text and the text disappears into an 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" 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 "IMG" in the above code will change as the picture is inserted in the actual production.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.