Using JS to achieve the click of the button to automatically switch the image of a simple method _javascript skills

I often see a website of the main interface of the picture can switch freely, then how to achieve it?

The 1.HTML page layout is shown in the picture:

Main (DIV) Top (Div) (Displays the picture you want to display) Bottom UL (LI) < select >left Center Right

2. To achieve the above layout

Swap.html

<! DOCTYPE HTML public '-//w3c//dtd HTML 4.01 strict//en ' HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD ' >  

Implementation of 3.CSS

Swap.css

@CHARSET "UTF-8";
main{
width:1320px;
height:334px;
border:1px solid red;
Background-color:silver
}

.　　top{
width:1300px;
height:304px;
margin-top:5px;
margin-left:10px;
Background-color:green
}

. Top. left{
display:block;//lets left.jpg be displayed as the first picture
}
. Top. center{
display:none;//Initial state does not show
}<　　C23/>.top. right{
display:none;//does not display
}

. bottom{
width:1300px;
height:15px;
margin-top:5px;
margin-left:10px;
Background-color:gray
}
.　　Bottom ul{
margin:0px;
margin-left:500px;
padding:0px;
width:260px;
height:50px 
}
.　　Bottom ul li{
width:80px;
height:10px;
margin-top:3px;
margin-right:3px;
Background-color:yellow;
List-style-type:none;
Float:left;
}

4. Places of attention

(1) The difference between display and visibility should be clear.

Display: When you set none, not only the content will be hidden, and the elements will not occupy the position of the page, hiding the equivalent of this element temporarily deleted from the page, does not play any role in the current page.

Visibility: When setting hidden, although the content will not show but its elements will still work, the equivalent of just the content to be displayed with hidden, but things remain. The proverb is "standing in the manger is not XX";

(2) Do you want to click or mouse to move to the specified location picture will change? The function of course is not the same, this is where the table moved to the specified area will implement the picture switch, so the use of onmouseover ().

The above is a small series for you to bring the use of JS to achieve the click button after the picture automatically switch to the simple method of all content, I hope that we support cloud Habitat Community ~