Implementing Image Links With JavaScript
By susiequeue
Most Web pages link to other pages, within the same site and on other sites. HTML anchor elements are the primary tool used to implement these links. However, JavaScript functions can also implement links between pages. These functions can execute on user interaction with the mouse, such as clicking an image element.
Web pages often include clickable images, particularly in the header area, for example with Web page banners. Using a combination of HTML and JavaScript code, developers can create Web page banner elements that link to other pages. Within the HTML markup for a banner image, the developer can include an event listener attribute to detect user clicks. When the user clicks an image, the JavaScript code can prompt the browser to open a new page. Web page banners can provide visually engaging, interactive elements within sites.
HTML Images
To include images within a Web page banner section, developers can use the HTML image element. The following code demonstrates:
<div id="banner"> <img src="images/bannerpic.jpg" alt="banner picture" /> </div>
This code includes an image in a dedicated page section. The image element uses a single self-closing tag, with the source attribute indicating the location and name of the image file for the browser to load and display. The "alt" attribute provides text to display if the image file cannot be loaded. The banner for a page may contain multiple different images, linking to different locations.
This markup code demonstrates a basic image element, which instructs the browser to display the image. However, clicking on the image will have no effect. To make the image clickable, the developer must add a click listener.
Click Listener
To implement a link through JavaScript, developers include event listener attributes within their HTML elements. The following extended code demonstrates:
<img src="images/bannerpic.jpg"
alt="banner picture"
onclick="getLink('http://somedomain.com/somepage.html')"
/>This code specifies a JavaScript function for the browser to execute when the user clicks the image element. The function call includes a text string parameter specifying the page to fetch. The address can be a relative or absolute URL (Uniform Resource Locator).
JavaScript Function
Web pages can include sections for JavaScript functions between the opening and closing head tags. The following code demonstrates a script section with a function outline inside it:
<script type="text/javascript">
function getLink(linkPage) {
//go to link
}
</script>This function is called when the user clicks the image. The parameter passed represents the page to browse to. Inside the function, the developer can include code instructing the browser to load the new page.
Open Page
To instruct the user's Web browser to load a particular page, JavaScript code can use the Window object. The following code demonstrates:
window.open(linkPage);
The Window open method allows additional optional parameters. Using these, developers can specify where to open the new page, whether in a new window or in the current one. The "specs" parameter allows developers to indicate details of the browser window when opening the new page, including dimensions. The replace parameter indicates how the new page should be handled in the browser history. Once this code is included in the JavaScript function, users clicking the HTML image element will cause the linked page to load.
Alternatively, JavaScript code can use the Document and Location objects, as follows:
document.location.href = linkPage;
The page address is passed into the function as a parameter when the click event is triggered. The HTML markup for the image lists the actual address to fetch.
JavaScript Books
 | Amazon Price: $21.88 List Price: $39.99 |
 | Amazon Price: $26.21 List Price: $49.99 |
 | Amazon Price: $16.62 List Price: $29.99 |
 | Amazon Price: $23.99 |
 | Amazon Price: $16.65 List Price: $29.99 |
Other Web Design and Development Hubs
No comments yet.
