CSS a landscape picture, when the mouse in the picture above, immediately display the text description of the picture, and the text of the local image becomes blurred, when the mouse moved away from the picture, the picture on the text disappeared again, the picture returned to the original. How has this effect been achieved? With Dreamweaver behavirs function can be realized, I introduced here is to use CSS to make, the source code of the Web page appears to be more concise.
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, in the Web page to enter a paragraph of text (picture description), surround it with a "span" tag and add it with a CSS "ID" attribute (that is, "Text1"), and then insert a picture and surround it with "span", as well. Also give it an "ID" attribute, such as: Id= "Image1";
2, in the Web page source code between the 〈head〉 and 〈/head〉 add the following CSS code:
〈!--
. style1 {position:absolute; left:210px; top:245px; width:218px; height:169px; Z-index:2}
. style2 {position:absolute; left:210px; top:245px; width:218px; height:169px; z-index:1}
. style3 {position:absolute; left:183px; top:245px; width:238px; height:159px; z-index:1; Filter:alpha (Opacity=10, finishopacity=100, style=1, startx=0, starty=0, finishx=50, Finishy=50)}
. style4 {position:absolute; left:183px; top:245px; width:238px; height:159px; Z-index:2}
--〉
〈/style〉
The values "Top", "left", "width", and "height" in the code above are used to position and range the text and pictures in the Web page, and these values are modified to suit the actual situation. "Z-index" is the order in which the current object's layer is to be overridden, changing its value to make the overlay order change. This example is to dynamically change this attribute value to achieve the desired effect;
3, in "TEXT1" that "span" loading CSS. Style2 ", let the text at the beginning is in the lower level, and then load a" onmouseout "trigger event, once this event occurs, will do two things, one is to let" Text1 "using CSS. Style2 ", so that the text moved to the lower level, and the second is to let" image1 "using CSS". Style4 ", so that the picture moved to the top. So, the code for "Text1" and that text is this:
〈span id= "Text1" class= "Style2" 〉〈font color= "#0000FF" 〉〈br〉〈br〉 This is the famous 〈br〉
Natural Beauty Resort 〈br〉
--The immortal 〈br〉 of Huangshan
People point the way to the scenic spot, 〈br〉
It's a clever 〈br〉.
The natural good 〈br〉 of heavenly Creations
For 〈/font〉〈/span〉
4, also in "Image1" in that "span" load CSS. Style4 ", let that picture first is on the top, and then load a" onmouseover "trigger event, once this event occurs, will do two things, one is to let" Text1 "using CSS Style1 ", move the text to the top, become visible, the second is to let" image1 "using CSS". Style3 ", so that the image moved to the lower level, and added an" alpha "filter, Make part of the image translucent (see the article on CSS filter topics for the use and effect of filters). So, the code for "Image1" and that picture is this:
〈span id= "Image1" class= "style4" 〉〈img src= "/uploadpic/2007-4/200741155823870.jpg" width= "237" height= "169" 〉〈/span〉
The code in "IMG" in the above code will change as the picture is inserted in the actual production.
