Saturday, 28 July 2012 16:33

HTML Onclick Button Image

Written by

There is few ways to show image button on the webpage. Here I use <a.

<a target="_parent" href="/newWebPage.php"><img src="/images/light_on.png" alt="Light" /></a>


Above example shows an image with event. newWebPage.php will open if user click on the image.

  1. target="_parent" means open a new page when user click on the image. See http://www.w3schools.com/tags/att_a_target.asp for more information
  2. href= is the action. It will open newWebPage.php when user click on the image.
  3. img src= show the image on the page. It support many formats such as png, jpg, gif, bmp & others. I often use png & gif (animation) format since both support transparent.
  4. alt= will show the text if the associated image is not exist.

 

Note: IE8 and Google Chrome show output differently. There is a rectangular frame around the image if loaded with IE8, while Google Chrome did not show any frame.

Below example execute a javascript function called runCmd with two parameters:

<a href="javascript:runCmd(1,'a')"><img src="/images/fan_on.png" alt="Fan" /></a>



See http://www.w3schools.com/tags/tag_a.asp for more information on how to use <a

Below example shows four images aligned in horizontally:

<a target="_parent" href="/newWebPage.php"><img src="/images/light_on.png" alt="Light" /></a>
<a href="javascript:runCmd(1,'a')"><img src="/images/fan_on.png" alt="Fan" /></a>
<a target="_parent" href="/newWebPage.php"><img src="/images/light_on.png" alt="Light" /></a>
<a href="javascript:runCmd(1,'a')"><img src="/images/fan_on.png" alt="Fan" /></a>

Read 8580 times Last modified on Tuesday, 10 December 2013 19:33
Back to Top