change image width click

yossidd · 10-07-2012, 02:03 PM

i have simple code that chage the width of picture onclick

PHP Code:


			
<script language="javascript">

var changed;

function ab(pic){

pic.style.height="16px";

}

</script>

<h4>text</h4>

<img src="image.png"    onclick="ab(this); " />

i want to do when click on

PHP Code:


			
<h4><h4>text</h4></h4>

it is run the function on the image..and change the width of picture
how? how i call to function?

coothead · 10-07-2012, 02:54 PM

Hi there yossidd,

here is a one possible solution...

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title></title>

<style type="text/css">
#myh4 {
    cursor:pointer;
 }
#myh4:hover {
    color:#900;
 }
#myimg {
    display:block;
    border:1px solid #000;
    margin:auto;
 }
.image-width {
    width:100px;
 }
</style>

<script type="text/javascript">
function init() {
   document.getElementById('myh4').onclick=function() {
   document.getElementById('myimg').className='image-width';
  }
 }
   window.addEventListener?
   window.addEventListener('load',init,false):
   window.attachEvent('onload',init);
</script>

</head>
<body>

<h4 id="myh4">text</h4> 

<div>
 <img id="myimg" src="image.png" alt="">
</div>

</body>
</html>

coothead