Home > Developer > Web Develop
<meta charset= "Utf-8" >
<title> thumbnails </title>
<style type= "Text/css" >
body{
font-family: "Helvetica", "Arial", serif;
Color: #333;
Background-color: #ccc;
Margin:1em 10%;
}
h1{
Color: #333;
}
ul{
List-style:none;
}
a{
Text-decoration:none;
Color: #c60;
Font-weight:bold;
}
li{
Display:inline;
Padding:1em;
}
. smallimg{
width:70px;
height:70px;
}
#placeholder {
width:400px;
height:300px;
font-size:50px;
Font-weight:bolder;
Display:block;
Clear:both;
}
</style>
<body>
<ul>
<li>
<a href= "image/large/blue.jpg" title= "he is blue" >
</a>
</li>
<li>
<a href= "image/large/green.jpg" title= "He is green" >
</a>
</li>
<li>
<a href= "image/large/red.jpg" title= "He is red" >
</a>
</li>
<li>
<a href= "image/large/purple.jpg" title= "He is purple" >
</a>
</li>
</ul>
<p id= "description" >choose an image</p>
<!--<span id= "Innner" > show a picture you want </span>--
</body>
<script>
Window.onload=function () {
var links= document.getelementsbytagname ("a");
for (var i =0;i<links.length;i++) {
Links[i].onclick=function () {
Return Showpic (this)? False:true;
Return!showpic (this); Block default behavior when Showpic switchover succeeds, trigger on failure
return false;
}
}
function Showpic (pic) {
Check if the browser supports DOM
if (!document.getelementbyid ("placeholder")) return false;
var placeholder = document.getElementById ("placeholder");
var sorce = Pic.getattribute ("href");
Placeholder.setattribute ("src", sorce);
Check for the presence of id= "discription" elements
if (document.getElementById ("description")) {
var description = document.getElementById ("description");
var text = Pic.getattribute ("title");
Description.childnodes[0].nodevalue = text;
}
return true;
var Inspan = document.getElementById ("Innner");
inspan.innerhtml = information;
}
}
</script>
JS write a picture library, click on the thumbnail image on the current page can display a large image
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
