JavaScript Image Size

+1 Robert Summers · October 6, 2014
Hello I have done written out some javacript and tested it from this tutorial:
https://www.youtube.com/watch?v=SGKXZUGe2sw&index=25&list=PL41lfR-6DnOrwYi5d824q9-Y6z3JdSgQa

Does anyone know how I can change the image size?

Thank you for your help
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Example</title>
<script type="text/javascript">

var image_tracker = 'f';
function change(){
var image = document.getElementById('social_logo');
if(image_tracker=='f'){
image.src = 'twitter.png';
image_tracker = 't';
}else{
image.src = 'facebook.png';
image_tracker = 'f';
}
}

</script>
</head>
<body>
<img src="facebook.png" alt="facebook" id="social_logo" onclick="change();"/>
</body>
</html>


Post a Reply

Replies

Oldest  Newest  Rating
+1 Phillip Drake · October 6, 2014
Hello, you can change the image size with javascript by adding the following code inside your if statement:

image.style.width = "100px";
image.style.height = "100px";

I hope this answers your question.
+1 Robert Summers · October 6, 2014
Thank you this has been helpful. :)

 
0 Andrew Lopez-Dillard · October 9, 2014
I know this is very late but, you can change the size in many ways HTML style attribute, Javascript (.style.width = "#%"), and my favorite CSS:
<!--HTML-->
<img style="width: 100px; height: 100px;></img>

--
/*CSS*/
#FILES_ID_HERE{
width: 100px;
height: 100px;
}

--
/*JavaScript*/
img.style.width = 100px;
img.style.height = 100px;

I'd recommend working with percentage instead of pixels.
Example:


#img{
display: flex; /*This line isn't needed*/
width: 16%;
height: 16%;
}

 
0 Robert Summers · October 9, 2014
Hey, no worries. Thank you for your help though :)
  • 1

Javascript

106,937 followers
About

A scripting language that is added to standard HTML to create interactive effects, apps, games for the browser.

Links
Moderators