CODEWITHSUNDEEP
javascripthtml
maxadorable
maxadorable

Reputation: 1284

How do I resize images in javascript/html

<!doctype html>
<html>
<head>
<title>ParallecScrolling</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
#image {
    position: relative;
    z-index: -1
}
#content {
    height: 750px;
    width: 100%;
    margin-top:-10px;
    background-color:#0d0d0d;
    position: relative;
    z-index: 1;
}
</style>


<body>
<!-- <img id="image" src="img/bg.jpg" height="710px" width="100%" /> -->
<script type="text/javascript">
    var ypos,image;
    function parallex() {
        image = document.getElementById('image');
        ypos = window.pageYOffset;
        image.style.top = ypos * .7+ 'px';
    }
    window.addEventListener('scroll', parallex),false;

</script>
</head>

<script type="text/javascript">
var imlocation = "img/";
 var currentdate = 0;
 var image_number = 0;
 function ImageArray (n) {
   this.length = n;
   for (var i =1; i <= n; i++) {
     this[i] = ' '
   }
 }
 image = new ImageArray(6)
 image[0] = 'bg.jpg'
 image[1] = 'bg2.jpg'
 image[2] = 'bg3.jpg'
 image[3] = 'bg4.jpg'
 image[4] = 'bg5.jpg'
 image[5] = 'bg6.jpg'

 var rand = 60/image.length
 function randomimage() {
 currentdate = new Date()
  image_number = currentdate.getSeconds()
  image_number = Math.floor(image_number/rand)
  return(image[image_number])
   }
      var insert = imlocation + randomimage();
   document.write("<img src='" + insert+ "'>");
</script>
<div id="content"></div>

</body>

I am trying to set my height of my insert image to 710px and the width to be 100%. What am I doing wrong?

I have tried editing the insert.height and the insert.width but that seems not to work.

Upvotes: 1

Views: 273

Answers (1)

Jay Welsh
Jay Welsh

Reputation: 496

Firstly, your code is not running correctly, here's why:

image = new ImageArray(6)
image[0] = 'bg.jpg'
image[1] = 'bg2.jpg'
image[2] = 'bg3.jpg'
image[3] = 'bg4.jpg'
image[4] = 'bg5.jpg'
image[5] = 'bg6.jpg'

var rand = 60/image.length
function randomimage() {
currentdate = new Date()
image_number = currentdate.getSeconds()
image_number = Math.floor(image_number/rand)
return(image[image_number])

As might notice, the lack of semicolons means that each of your statements above are not being closed. The above should become:

image = new ImageArray(6);
image[0] = 'bg.jpg';
image[1] = 'bg2.jpg';
image[2] = 'bg3.jpg';
image[3] = 'bg4.jpg';
image[4] = 'bg5.jpg';
image[5] = 'bg6.jpg';

var rand = 60/image.length;
function randomimage() {
currentdate = new Date();
image_number = currentdate.getSeconds();
image_number = Math.floor(image_number/rand);
return(image[image_number]);

Let me know if you now have any errors after sorting this out, I will then evolve my answer accordingly! :)

Part 2:

Instead of this:

var insert = imlocation + randomimage();
insert.height = "710px";
insert.width = "100%";
document.write("<img src='" + insert+ "'/>");

Let's use CSS, we have two options:

Option 1 - Use style attributes:

var insert = imlocation + randomimage();
document.write("<img style='height:710px;width:100%' src='" + insert + "'/>");

Option 2 - Use a class

var insert = imlocation + randomimage();
document.write("<img class='ourclass' src='" + insert + "'/>");

To finish off option 2, we now define "ourclass" in CSS:

.ourclass {
     height:710px;
     width:100%
}

Upvotes: 2

Related Questions