Javascript change width of image onclick

Question

I'm a complete noob when it comes to javascript. Would there be anyway to change an image after it is clicked, some way to trigger a js function to change the css. It would have to be triggered by an event and something other than onclick, onfocus probably.

<style>
    #pic {
    width:100px;
    height:100px;
    }
</style>
</head>
<body>

<img src='nope.jpg' id='pic' onclick="mouseOver()"></img>

<script type='text/javascript'>
    function mouseOver() {
    document.getElementById('pic').style.width="400px";
    document.getElementById('pic').style.height="400px";
    }       
</script>

based on your example no JS is required. look into css3 transitions on hover — fnostro, Apr 01 '14 at 22:32
It would have to be js though, a mouse click event would trigger all the changes. — user3487092, Apr 01 '14 at 22:34

score 1 · Answer 1 · answered Apr 01 '14 at 22:29

1

try this...

function mouseOver() {
   document.getElementById('image').style.height = "400px";
}

answered Apr 01 '14 at 22:29

kyros

153
1
2
11

score 0 · Answer 2 · answered Apr 01 '14 at 22:26

First i edited the question , because the function was not defined correctly .

Second :

to access the height property of any element , you should use style.height , and should add "px" to the value.

please spend more time searching for answers , instead of posting a new question.

score 0 · Answer 3 · answered Apr 01 '14 at 22:29

0

Change the JS to this:

var image =  document.getElementById('image');

function mouseOver() {
    image.style.height="600px";
}

image.onclick = mouseOver;

answered Apr 01 '14 at 22:29

javakorr

76
3

score 0 · Answer 4 · edited May 23 '17 at 11:43

0

Setting values you can use directly style attribute, but remember that asking for them is a greater problem:

Please refer to this one: Get a CSS value with JavaScript

edited May 23 '17 at 11:43

Community

1
1

answered Apr 01 '14 at 22:31

Phaedra

237
1
3
11

DcHerrera · Answer 5 · 2015-03-01T02:38:57.580

0

This should work

<style>
#pic {
width:100px;
height:100px;
}
</style>
</head>
<body>   
<img
       width="100"
       onmouseOver="this.width=400; this.height=400"
       onclick="this.width=100"
       alt="RESIZE IMAGE"
       id='pic'
       src='nope.jpg'
    />

just copy and edit the image tag code as needed

edited Mar 01 '15 at 02:38

answered Mar 01 '15 at 01:14

DcHerrera

80
1
11

Javascript change width of image onclick

5 Answers5