Home > Developer > JavaScript
I started to learn the JavaScript scripting language. After several days of special learning. I learned that JavaScript is a prototype-based development language. How is it based on the prototype? Despite checking a lot of information, I am still not very clear about its concept.
Today, we will not discuss the prototype-based problem. We use JavaScript to implement a small example of image replacement.
Start as follows:
I. design interface:
First, prepare two images:
Then, add a Table with one row and three columns and design it as follows:
Ii. Code display:
[Html]
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> partition example </title>
</Head>
<Script language = "javascript" type = "text/javascript">
Function yc (){
Document. getElementById ("lanmu"). style. display = "none ";
Document. getElementById ("img "). innerHTML = "}
Function xs (){
Document. getElementById ("lanmu"). style. display = "";
Document. getElementById ("img "). innerHTML = " ";
}
</Script>
<Body>
<Table width = "521" height = "148" border = "1">
<Tr>
<Td id = "lanmu" align = "center" width = "177">
<P> <a href = "http://baike.baidu.com/view/7744517.htm"> Information Technology Improvement Course </a> </p>
<P> <a href = "http://baike.baidu.com/view/5185032.htm"> Mr. Mi </a> </p>
<P> <a href = "http://liu765023051.blog.163.com/"> l63 blog </a> </p>
<P> <a href = "http://blog.csdn.net/liu765023051"> CSDN blog </a> </p>
<P> <a href = "http://hi.baidu.com/liu765023051/"> Baidu space </a> </p>
</Td>
<Td width = "22">
<Span id = "img"> </span> </td>
<Td width = "300"> today, on September 10, June 7, I wish my college entrance examination could earn excellent results !! </Td>
</Tr>
</Table>
</Body>
</Html>
3. effect acceptance: You can switch between images by clicking the picture in the middle.
Iv. knowledge points:
1. span tag: it is used to combine intra-row elements in a document. There is no fixed format representation. When a style is applied to it, it will produce visual changes.
In this example, add the span tag to the initial image and set the span tag id to control the image id.
2. innerHTML attributes: almost all elements have the innerHTML attribute. It is a string used to set or obtain the HTML in the start and end tags of an object.
Use the innerHTML attribute to obtain the src of the image and set the next click event of the image.
3. document: an object in HTML.
4. getElementById: returns a reference to the first object with the specified id.
In this example, you can use the getElementById method of the document Object to set object references.
From liu765023051
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
