Home > Developer > JavaScript
Allows you to browse a single image using Javascript.
When using the free time to learn the JavaScript language, I wrote an example of browsing a single image through a link:
Copy codeThe Code is as follows:
<! Doctype html public "-// W3C // dtd html 4.0 Transitional // EN">
<HTML>
<HEAD>
<TITLE> Image Gallery </TITLE>
<Meta name = "Generator" CONTENT = "EditPlus">
<Meta name = "Author" CONTENT = "">
<Meta name = "Keywords" CONTENT = "">
</HEAD>
<Script language = "javascript">
Function showPic (whichpic ){
Var source = whichpic. getAttribute ("href"); // gets the href value of the attribute of the currently clicked element.
Var placeholder = document. getElementById ("placeholder"); // obtain the target
Placeholder. setAttribute ("src", source); // you can set the target property src to change the image.
Var text = whichpic. getAttribute ("title"); // obtain the attribute title value of the currently clicked Element
Var description = document. getElementById ("description ");
Description. firstChild. nodeValue = text; // assign the title of the clicked element to <p>
// Or description. childNodes [0]. nodeValue = text;
}
</Script>
<BODY>
<H1> Javascript Image Library <Ul>
<Li>
<A href = "images/fireworks.jpg" title = "Image1" onclick = "showPic (this); return false;"> image 1 </a>
</Li>
<Li>
<A href = "images/coffee.jpg" title = "Image2" onclick = "showPic (this); return false;"> Image 2 </a>
</Li>
<Li>
<A href = "images/rose.jpg" title = "Image3" onclick = "showPic (this); return false;"> picture 3 </a>
</Li>
<Li>
<A href = "images/bigben.jpg" title = "Image3" onclick = "showPic (this); return false;"> Picture 4 </a>
</Li>
</Ul>
<P id = "description"> select image. </p>
</BODY>
</HTML>
Note:
When adding an event to the tag <a> </a>, we need to note that it should not be redirected.
Solution: The function returns false. The event indicates that the link is not clicked.
If the href value is javascript: void (0.
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
