Embedding an Image in a Hyperlink - HTML CSS HTML Tag

HTML CSS examples for HTML Tag:img

  1. HOME
  2. HTML CSS
  3. HTML Tag
  4. img

Description

Embedding an Image in a Hyperlink

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
   <head> 
      <title>Example</title> 
   </head> 
   <body> 
      <p> 
         <a href="http://java2s.com/otherpage.html"> 
            <img src="http://java2s.com/resources/g.png" ismap alt="Triathlon Image" width="200" height="67"> 
         </a> 
      </p>  
   </body><!-- w  ww .j av a  2 s.c  o m-->
</html>

If you apply the ismap attribute to the img element, the position you clicked on the image is appended to the URL.

For example, if you clicked 4 pixels from the top and 10 pixels from the left edges of the images, the browser will navigate to the following: 

http://java2s.com/otherpage.html?10,4

The following code shows the contents of otherpage.html, which contains a simple script that displays the coordinates of the click.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE HTML>
<html>
    <head>
        <title>Other Page</title>
    </head>
    <body>
        <p>The X-coordinate is <b><span id="xco">?</span></b></p>
        <p>The Y-coordinate is <b><span id="yco">?</span></b></p>
        <script>
            var coords = window.location.href.split('?')[1].split(',');
            document.getElementById('xco').innerHTML = coords[0];
            document.getElementById('yco').innerHTML = coords[1];
        </script>
    </body>
</html><!--   ww w. j  a v a  2 s .  c o m-->

Related Tutorials