Saturday, 28 July 2012 16:34

HTML Onclick Image Button with CSS

Written by

This is a tutorial to show image button on webpage, it use CSS.
See http://www.w3schools.com/css/default.asp for more information.

Below is an example to show two image buttons. <div class="img"> is the CSS, it is not define in this example, but it is working without any CSS style.

</html>
</body>
<div >
<a target="_parent" href="/newWebPage.php"><img src="/images/light_on.png" alt="Light1" /></a>
<a href="javascript:runCmd(1,'a')"><img src="/images/fan_on.png" alt="Fan1" /></a>
</div>

<div >
<a target="_parent" href="/newWebPage.php"><img src="/images/light_off.png" alt="Light2" /></a>
<a href="javascript:runCmd(1,'a')"><img src="/images/fan_off.png" alt="Fan2" /></a>
</div>
</body>
</html>

 



Below is an example to use div.img as the CSS name. You can use any name such as div.creative, div.myCss.
You can have as many as command inside the div.img. Here is the explanation:

  1. CSS code must write inside <style > and </style>
  2. div.img is the CSS name, you can create many different CSS name between <style > and </style>
  3. float: left means align the image to the left. The image will align vertically if you remove this line.
  4. background: green means fill the image background with green colour.

<html>
<head>
<style >
/********** container to hold image **********/
div.img {
float: left;
background: green;
}
</style>
</head>
</html>

</html>
</body>
<div >
<a target="_parent" href="/newWebPage.php"><img src="/images/light_on.png" alt="Light1" /></a>
</div>

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

 

Add another CSS and named it as div.desc. The div.desc cause the blue colour text with 12 pixels show under the image.

<html>
<head>
<style >
/********** container to hold image **********/
div.img {
float: left;
background: yellow;
}

/********** text attribute to descript the image **********/
div.desc {
text-align: center;
font-weight: normal;
font-size:12px;
color:blue;
}

</style>
</head>
</html>

</html>
</body>
<div >
<a target="_parent" href="/newWebPage.php"><img src="/images/light_on.png" alt="Light1" /></a>
<div >Light1</div>
</div>

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

Read 9864 times Last modified on Monday, 27 August 2012 00:38

5 comments

  • Comment Link Aappencyavafe Monday, 20 January 2020 19:08 posted by Aappencyavafe

    unit http://cialisoni.com/# - buy cialis disagree buy cialis cheap
    weight https://cialsagen.com/# - generic viagra best places to buy generic viagra canadian viagra generic pharmacy reviews affair

  • Comment Link Aappencyavafe Friday, 10 January 2020 00:24 posted by Aappencyavafe

    incredible http://cialisoni.com/# - generic cialis online versus buy cialis online quarter
    confront https://cialsagen.com/# - buy pills erection generic viagra viagra generic online usa pharmacy viagra for men professor

  • Comment Link Aappencyavafe Wednesday, 08 January 2020 23:27 posted by Aappencyavafe

    therapy http://cialisle.com/# - buy online cialis steel buy cialis online testing

  • Comment Link Aappencyavafe Thursday, 02 January 2020 07:16 posted by Aappencyavafe

    virtue http://cialisle.com/# - buy online cialis proportion cialis online few

  • Comment Link Stevambums Thursday, 21 November 2019 11:13 posted by Stevambums

    Pac Levitra Necessita Di Ricetta Medica How Much Does Cialis Cost Per Pill finasteride 1 mg Anastrozole Benefits For Men Sore Throat Amoxicillin Cialis kaufen gunstig

Leave a comment

Back to Top