adjust image size in script jquery
Question
I'm not familiar with Javascript coding as much as I do with HTML. Just want to ask, how to re-size images within this code?
<script type="text/javascript">
var image1 = new Image()
image1.src = "img/img1.jpg"
var image2 = new Image()
image2.src = "img/img2.jpg"
</script>
I have worked it out in HTML by using this code, and I have no idea how to work my around in Javascript though:
<img src="img/www.png" alt="Logo" width="250" height="150" style="position: absolute; top: 10px; left:60px;" >
Your kind reply would be greatly appreciated.
McJim
*sorry here is the complete code:
<?php include('variables/variables.php'); ?>
<head>
<script type="text/javascript">
var image1 = new Image()
image1.src = "img/img1.jpg"
var image2 = new Image()
image2.src = "img/img2.jpg"
</script>
</head>
<body>
<p><img src="images/pentagg.jpg" width="500" height="300" name="slide" /></p>
<script type="text/javascript">
var step=1;
function slideit()
{
document.images.slide.src = eval("image"+step+".src");
if(step<2)
step++;
else
step=1;
setTimeout("slideit()",2500);
}
slideit();
</script>
</body>
This is actually one php file, and is called from another php file.
3 answers
solution1
2 ACCPTED 2014-02-01 15:12:26
Just do this:
var image1 = new Image(250, 150);
so it is new Image(width, height)
Here are some docs: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement.Image?redirectlocale=en-US&redirectslug=Web%2FAPI%2FImage#Image_Element_constructor
EDIT reflecting new code added by OP
The problem is you aren't adding the images to the DOM, the webpage itself. Move the script into the body just above the other script and change the code to this:
var image1 = new Image(250, 150)
image1.src = "img/img1.jpg"
var image2 = new Image(350, 200)
image2.src = "img/img2.jpg"
var body = document.querySelector('body');
body.appendChild(image1);
body.appendChild(image2);
Here is a functioning JSBin example: http://jsbin.com/AzAvunOm/1/edit?html,output
So your code should look like this (you will have to adjust it for exactly what you want):
<?php include('variables/variables.php'); ?>
<head>
</head>
<body>
<p><img src="images/pentagg.jpg" width="500" height="300" name="slide" /></p>
<script type="text/javascript">
var image1 = new Image(250, 150)
image1.src = "img/img1.jpg"
var image2 = new Image(350, 200)
image2.src = "img/img2.jpg"
var body = document.querySelector('body');
body.appendChild(image1);
body.appendChild(image2);
</script>
<script type="text/javascript">
var step=1;
function slideit()
{
document.images.slide.src = eval("image"+step+".src");
if(step<2)
step++;
else
step=1;
setTimeout("slideit()",2500);
}
slideit();
</script>
</body>
solution2
1 2014-02-01 15:11:50
You can sett height and width as follows.
image1.width = 250;
image1.height = 150;
solution3
1 2014-02-01 15:22:54
I think u need something like this;
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
function changesize(){
var myid=document.getElementById('myimg');
myid.with=300;
myid.height=300;
}
function changesize2(){
var myid=document.getElementById('myimg');
myid.with=200;
myid.height=100;
}
</script>
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTe0LZa5KiYoWxGAC-_5gP2MoOuBx8QkCWLGeCuE01-0UPNrOVhrsTeNcvD" id='myimg' alt="Logo" width="250" height="150" style="position: absolute; top: 10px; left:60px;" >
<button type='submit' value='Btn1' name='Btn1' onclick="changesize()" >
<button type='submit' value='Btn2' name='Btn2' onclick="changesize2()" >
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.