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 13189 times Last modified on Monday, 27 August 2012 00:38
Published in Tutorials
Tagged under
admin

Latest from admin

Related items

More in this category: « HTML Onclick Button Image Port Forward - Control Device Over Internet »
back to top
Back to Top