Implementing Image Links With JavaScript

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:

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:

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:

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.

See also:
How To: AJAX PHP Functions
Displaying a Substring in JavaScript