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
– fnostro, Commented Apr 1, 2014 at 22:32
It would have to be js though, a mouse click event would trigger all the changes. — user3487092
– user3487092, Commented Apr 1, 2014 at 22:34

kyros · Accepted Answer · 2014-04-01 22:29:39Z

1

try this...

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

answered Apr 1, 2014 at 22:29

kyros

1631 gold badge3 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ProllyGeek · Accepted Answer · 2014-04-01 22:26:24Z

0

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.

answered Apr 1, 2014 at 22:26

ProllyGeek

15.9k9 gold badges56 silver badges77 bronze badges

Comments

javakorr · Accepted Answer · 2014-04-01 22:29:40Z

0

Change the JS to this:

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

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

image.onclick = mouseOver;

answered Apr 1, 2014 at 22:29

javakorr

763 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:43:33Z

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, 2017 at 11:43

CommunityBot

11 silver badge

answered Apr 1, 2014 at 22:31

Phaedra

2571 gold badge3 silver badges11 bronze badges

Comments

DcHerrera · Accepted Answer · 2015-03-01 02:38:57Z

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 1, 2015 at 2:38

answered Mar 1, 2015 at 1:14

DcHerrera

801 silver badge11 bronze badges

Collectives™ on Stack Overflow

Javascript change width of image onclick

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related