1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 5:10 pm May 13, 2026

Forum Moderators: open

Message Too Old, No Replies

Space between images on zoom in all browsers

         

Golith

8:09 am on Aug 20, 2017 (gmt 0)

5+ Year Member



Hi,
I am trying to do this;
1. build an image with JS from a bunch of sliced images in a folder
2. after the image is built then pass this back to HTML and render
This is a test page 
<!DOCTYPE html>
<html>
<head>
 <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
 <link rel="stylesheet" type="text/css" href="../../css/layout.css">
 <link rel="stylesheet" type="text/css" href="../../css/style.css"> 
 <script language="javascript" src="../../js/orderPage.js"></script>
</head>

<body class="home" onload="buildImage();"> <!-- onload="buildImage();" this loads the image over the top of the page -->
 test to see if this appears
 
 <div id="imageOutput"></div>

</body>
</html>

and here is my JS file 
function buildImageNoTable() {
 
 //yields bcpot002_smaller
 var fullDesc = getUrlVars()["desc"];
 //yields an array of 2 parts
 var items = fullDesc.split('_', 2);
 //yields bcpot002
 var itemDesc = items[0];

 //START TABLE
 var image = '';
 var imageDiv = '';
 //Build Rows then coloumns
 for (var r = 1; r <= 4; r++) {
 //NEW ROW
 for (var c = 1; c <= 5; c++) {
  image += document.write("<img src=\"../../images/slices/" + itemDesc + "/" + itemDesc + "_r" + r + "_c" + c + ".jpg\"></img>");
 } image += document.write('\n\r');//END ROW
 }
 //add this to a table to hold th image whe zoomed
 imageDiv = document.write("<table><tr><td>" + image + "</td></tr></table>");
 //display the result
 displayResult('imageDiv');

}

function displayResult(imageDiv) {
 var divobj3 = document.getElementById('imageOutput');
 divobj3.style.display = 'block';
 divobj3.innerHTML = imageDiv;
}


I am getting spaces between the images as i zoom in and out but there should be none there in chrome. it works in edge and firefox and totally fails in IE11.

keyplyr

9:07 am on Aug 20, 2017 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Hello Golith and welcome to WebmasterWorld [webmasterworld.com]

Golith

9:14 am on Aug 20, 2017 (gmt 0)

5+ Year Member



Jsut realised ..you cant use document.write .. or it wipes the DOM .. Trying with append.

Golith

10:40 am on Aug 20, 2017 (gmt 0)

5+ Year Member



now using canvas .. can anybody help me refine this too a loop scenario as it works ! 

<!DOCTYPE HTML>
<html>
<head>
  <style>
    body {
      margin: 0px;
      padding: 0px;
    }

    #myCanvas {
      border: 1px solid #9C9898;
    }
  </style>
  <script>
   function loadImages(sources, callback) {
    var images = {};
    var loadedImages = 0;
    var numImages = 0;
    // get num of sources
    for(var src in sources) {
     numImages++;
    }
    for(var src in sources) {
     images[src] = new Image();
     images[src].onload = function() {
      if(++loadedImages >= numImages) {
       callback(images);
      }
     };
     images[src].src = sources[src];
    }
   }

   window.onload = function(images) {
    var canvas = document.getElementById("imageCanvas");
    var context = canvas.getContext("2d");

    var sources = {
     r1c1: "file:///C:/DipWeb/ICTWEB411%20Produce%20basic%20client%20side%20script%20for%20dynamic%20web%20pages/Dynamic_Web_Pages_Practical_TaskA/html/images/slices/bcpot002/bcpot002_r1_c1.jpg",
     r1c2: "file:///C:/DipWeb/ICTWEB411%20Produce%20basic%20client%20side%20script%20for%20dynamic%20web%20pages/Dynamic_Web_Pages_Practical_TaskA/html/images/slices/bcpot002/bcpot002_r1_c2.jpg",
     r1c3: "file:///C:/DipWeb/ICTWEB411%20Produce%20basic%20client%20side%20script%20for%20dynamic%20web%20pages/Dynamic_Web_Pages_Practical_TaskA/html/images/slices/bcpot002/bcpot002_r1_c3.jpg",
     r1c4: "file:///C:/DipWeb/ICTWEB411%20Produce%20basic%20client%20side%20script%20for%20dynamic%20web%20pages/Dynamic_Web_Pages_Practical_TaskA/html/images/slices/bcpot002/bcpot002_r1_c4.jpg",
     r1c5: "file:///C:/DipWeb/ICTWEB411%20Produce%20basic%20client%20side%20script%20for%20dynamic%20web%20pages/Dynamic_Web_Pages_Practical_TaskA/html/images/slices/bcpot002/bcpot002_r1_c5.jpg",
     r2c1: "file:///C:/DipWeb/ICTWEB411%20Produce%20basic%20client%20side%20script%20for%20dynamic%20web%20pages/Dynamic_Web_Pages_Practical_TaskA/html/images/slices/bcpot002/bcpot002_r2_c1.jpg",
     r2c2: "file:///C:/DipWeb/ICTWEB411%20Produce%20basic%20client%20side%20script%20for%20dynamic%20web%20pages/Dynamic_Web_Pages_Practical_TaskA/html/images/slices/bcpot002/bcpot002_r2_c2.jpg",
     r2c3: "file:///C:/DipWeb/ICTWEB411%20Produce%20basic%20client%20side%20script%20for%20dynamic%20web%20pages/Dynamic_Web_Pages_Practical_TaskA/html/images/slices/bcpot002/bcpot002_r2_c3.jpg",
     r2c4: "file:///C:/DipWeb/ICTWEB411%20Produce%20basic%20client%20side%20script%20for%20dynamic%20web%20pages/Dynamic_Web_Pages_Practical_TaskA/html/images/slices/bcpot002/bcpot002_r2_c4.jpg",
     r2c5: "file:///C:/DipWeb/ICTWEB411%20Produce%20basic%20client%20side%20script%20for%20dynamic%20web%20pages/Dynamic_Web_Pages_Practical_TaskA/html/images/slices/bcpot002/bcpot002_r2_c5.jpg",
     r3c1: "file:///C:/DipWeb/ICTWEB411%20Produce%20basic%20client%20side%20script%20for%20dynamic%20web%20pages/Dynamic_Web_Pages_Practical_TaskA/html/images/slices/bcpot002/bcpot002_r3_c1.jpg",
     r3c2: "file:///C:/DipWeb/ICTWEB411%20Produce%20basic%20client%20side%20script%20for%20dynamic%20web%20pages/Dynamic_Web_Pages_Practical_TaskA/html/images/slices/bcpot002/bcpot002_r3_c2.jpg",
     r3c3: "file:///C:/DipWeb/ICTWEB411%20Produce%20basic%20client%20side%20script%20for%20dynamic%20web%20pages/Dynamic_Web_Pages_Practical_TaskA/html/images/slices/bcpot002/bcpot002_r3_c3.jpg",
     r3c4: "file:///C:/DipWeb/ICTWEB411%20Produce%20basic%20client%20side%20script%20for%20dynamic%20web%20pages/Dynamic_Web_Pages_Practical_TaskA/html/images/slices/bcpot002/bcpot002_r3_c4.jpg",
     r3c5: "file:///C:/DipWeb/ICTWEB411%20Produce%20basic%20client%20side%20script%20for%20dynamic%20web%20pages/Dynamic_Web_Pages_Practical_TaskA/html/images/slices/bcpot002/bcpot002_r3_c5.jpg",
     r4c1: "file:///C:/DipWeb/ICTWEB411%20Produce%20basic%20client%20side%20script%20for%20dynamic%20web%20pages/Dynamic_Web_Pages_Practical_TaskA/html/images/slices/bcpot002/bcpot002_r4_c1.jpg",
     r4c2: "file:///C:/DipWeb/ICTWEB411%20Produce%20basic%20client%20side%20script%20for%20dynamic%20web%20pages/Dynamic_Web_Pages_Practical_TaskA/html/images/slices/bcpot002/bcpot002_r4_c2.jpg",
     r4c3: "file:///C:/DipWeb/ICTWEB411%20Produce%20basic%20client%20side%20script%20for%20dynamic%20web%20pages/Dynamic_Web_Pages_Practical_TaskA/html/images/slices/bcpot002/bcpot002_r4_c3.jpg",
     r4c4: "file:///C:/DipWeb/ICTWEB411%20Produce%20basic%20client%20side%20script%20for%20dynamic%20web%20pages/Dynamic_Web_Pages_Practical_TaskA/html/images/slices/bcpot002/bcpot002_r4_c4.jpg",
     r4c5: "file:///C:/DipWeb/ICTWEB411%20Produce%20basic%20client%20side%20script%20for%20dynamic%20web%20pages/Dynamic_Web_Pages_Practical_TaskA/html/images/slices/bcpot002/bcpot002_r4_c5.jpg",
    };

    loadImages(sources, function(images) {
      context.drawImage(images.r1c1, 0, 0, 50, 50);
      context.drawImage(images.r1c2, 50, 0, 50, 50);
      context.drawImage(images.r1c3, 100, 0, 50, 50);
      context.drawImage(images.r1c4, 150, 0, 50, 50);
      context.drawImage(images.r1c5, 200, 0, 50, 50);
      context.drawImage(images.r2c1, 0, 50, 50, 50);
      context.drawImage(images.r2c2, 50, 50, 50, 50);
      context.drawImage(images.r2c3, 100, 50, 50, 50);
      context.drawImage(images.r2c4, 150, 50, 50, 50);
      context.drawImage(images.r2c5, 200, 50, 50, 50);
      context.drawImage(images.r3c1, 0, 100, 50, 50);
      context.drawImage(images.r3c2, 50, 100, 50, 50);
      context.drawImage(images.r3c3, 100, 100, 50, 50);
      context.drawImage(images.r3c4, 150, 100, 50, 50);
      context.drawImage(images.r3c5, 200, 100, 50, 50);
      context.drawImage(images.r4c1, 0, 150, 50, 50);
      context.drawImage(images.r4c2, 50, 150, 50, 50);
      context.drawImage(images.r4c3, 100, 150, 50, 50);
      context.drawImage(images.r4c4, 150, 150, 50, 50);
      context.drawImage(images.r4c5, 200, 150, 50, 50);
    });
   };
  </script>
</head>
<body>
  <canvas id="imageCanvas" width="250" height="200"></canvas>
</body>
</html>

Golith

10:40 am on Aug 20, 2017 (gmt 0)

5+ Year Member



now using canvas .. can anybody help me refine this too a loop scenario as it works ! 

<!DOCTYPE HTML>
<html>
<head>
 <style>
  body {
   margin: 0px;
   padding: 0px;
  }

  #myCanvas {
   border: 1px solid #9C9898;
  }
 </style>
 <script>
  function loadImages(sources, callback) {
  var images = {};
  var loadedImages = 0;
  var numImages = 0;
  // get num of sources
  for(var src in sources) {
   numImages++;
  }
  for(var src in sources) {
   images[src] = new Image();
   images[src].onload = function() {
   if(++loadedImages >= numImages) {
    callback(images);
   }
   };
   images[src].src = sources[src];
  }
  }

  window.onload = function(images) {
  var canvas = document.getElementById("imageCanvas");
  var context = canvas.getContext("2d");

  var sources = {
   r1c1: "file:///C:/DipWeb/ICTWEB411%20Produce%20basic%20client%20side%20script%20for%20dynamic%20web%20pages/Dynamic_Web_Pages_Practical_TaskA/html/images/slices/bcpot002/bcpot002_r1_c1.jpg",
   r1c2: "file:///C:/DipWeb/ICTWEB411%20Produce%20basic%20client%20side%20script%20for%20dynamic%20web%20pages/Dynamic_Web_Pages_Practical_TaskA/html/images/slices/bcpot002/bcpot002_r1_c2.jpg",
   r1c3: "file:///C:/DipWeb/ICTWEB411%20Produce%20basic%20client%20side%20script%20for%20dynamic%20web%20pages/Dynamic_Web_Pages_Practical_TaskA/html/images/slices/bcpot002/bcpot002_r1_c3.jpg",
   r1c4: "file:///C:/DipWeb/ICTWEB411%20Produce%20basic%20client%20side%20script%20for%20dynamic%20web%20pages/Dynamic_Web_Pages_Practical_TaskA/html/images/slices/bcpot002/bcpot002_r1_c4.jpg",
   r1c5: "file:///C:/DipWeb/ICTWEB411%20Produce%20basic%20client%20side%20script%20for%20dynamic%20web%20pages/Dynamic_Web_Pages_Practical_TaskA/html/images/slices/bcpot002/bcpot002_r1_c5.jpg",
   r2c1: "file:///C:/DipWeb/ICTWEB411%20Produce%20basic%20client%20side%20script%20for%20dynamic%20web%20pages/Dynamic_Web_Pages_Practical_TaskA/html/images/slices/bcpot002/bcpot002_r2_c1.jpg",
   r2c2: "file:///C:/DipWeb/ICTWEB411%20Produce%20basic%20client%20side%20script%20for%20dynamic%20web%20pages/Dynamic_Web_Pages_Practical_TaskA/html/images/slices/bcpot002/bcpot002_r2_c2.jpg",
   r2c3: "file:///C:/DipWeb/ICTWEB411%20Produce%20basic%20client%20side%20script%20for%20dynamic%20web%20pages/Dynamic_Web_Pages_Practical_TaskA/html/images/slices/bcpot002/bcpot002_r2_c3.jpg",
   r2c4: "file:///C:/DipWeb/ICTWEB411%20Produce%20basic%20client%20side%20script%20for%20dynamic%20web%20pages/Dynamic_Web_Pages_Practical_TaskA/html/images/slices/bcpot002/bcpot002_r2_c4.jpg",
   r2c5: "file:///C:/DipWeb/ICTWEB411%20Produce%20basic%20client%20side%20script%20for%20dynamic%20web%20pages/Dynamic_Web_Pages_Practical_TaskA/html/images/slices/bcpot002/bcpot002_r2_c5.jpg",
   r3c1: "file:///C:/DipWeb/ICTWEB411%20Produce%20basic%20client%20side%20script%20for%20dynamic%20web%20pages/Dynamic_Web_Pages_Practical_TaskA/html/images/slices/bcpot002/bcpot002_r3_c1.jpg",
   r3c2: "file:///C:/DipWeb/ICTWEB411%20Produce%20basic%20client%20side%20script%20for%20dynamic%20web%20pages/Dynamic_Web_Pages_Practical_TaskA/html/images/slices/bcpot002/bcpot002_r3_c2.jpg",
   r3c3: "file:///C:/DipWeb/ICTWEB411%20Produce%20basic%20client%20side%20script%20for%20dynamic%20web%20pages/Dynamic_Web_Pages_Practical_TaskA/html/images/slices/bcpot002/bcpot002_r3_c3.jpg",
   r3c4: "file:///C:/DipWeb/ICTWEB411%20Produce%20basic%20client%20side%20script%20for%20dynamic%20web%20pages/Dynamic_Web_Pages_Practical_TaskA/html/images/slices/bcpot002/bcpot002_r3_c4.jpg",
   r3c5: "file:///C:/DipWeb/ICTWEB411%20Produce%20basic%20client%20side%20script%20for%20dynamic%20web%20pages/Dynamic_Web_Pages_Practical_TaskA/html/images/slices/bcpot002/bcpot002_r3_c5.jpg",
   r4c1: "file:///C:/DipWeb/ICTWEB411%20Produce%20basic%20client%20side%20script%20for%20dynamic%20web%20pages/Dynamic_Web_Pages_Practical_TaskA/html/images/slices/bcpot002/bcpot002_r4_c1.jpg",
   r4c2: "file:///C:/DipWeb/ICTWEB411%20Produce%20basic%20client%20side%20script%20for%20dynamic%20web%20pages/Dynamic_Web_Pages_Practical_TaskA/html/images/slices/bcpot002/bcpot002_r4_c2.jpg",
   r4c3: "file:///C:/DipWeb/ICTWEB411%20Produce%20basic%20client%20side%20script%20for%20dynamic%20web%20pages/Dynamic_Web_Pages_Practical_TaskA/html/images/slices/bcpot002/bcpot002_r4_c3.jpg",
   r4c4: "file:///C:/DipWeb/ICTWEB411%20Produce%20basic%20client%20side%20script%20for%20dynamic%20web%20pages/Dynamic_Web_Pages_Practical_TaskA/html/images/slices/bcpot002/bcpot002_r4_c4.jpg",
   r4c5: "file:///C:/DipWeb/ICTWEB411%20Produce%20basic%20client%20side%20script%20for%20dynamic%20web%20pages/Dynamic_Web_Pages_Practical_TaskA/html/images/slices/bcpot002/bcpot002_r4_c5.jpg",
  };

  loadImages(sources, function(images) {
   context.drawImage(images.r1c1, 0, 0, 50, 50);
   context.drawImage(images.r1c2, 50, 0, 50, 50);
   context.drawImage(images.r1c3, 100, 0, 50, 50);
   context.drawImage(images.r1c4, 150, 0, 50, 50);
   context.drawImage(images.r1c5, 200, 0, 50, 50);
   context.drawImage(images.r2c1, 0, 50, 50, 50);
   context.drawImage(images.r2c2, 50, 50, 50, 50);
   context.drawImage(images.r2c3, 100, 50, 50, 50);
   context.drawImage(images.r2c4, 150, 50, 50, 50);
   context.drawImage(images.r2c5, 200, 50, 50, 50);
   context.drawImage(images.r3c1, 0, 100, 50, 50);
   context.drawImage(images.r3c2, 50, 100, 50, 50);
   context.drawImage(images.r3c3, 100, 100, 50, 50);
   context.drawImage(images.r3c4, 150, 100, 50, 50);
   context.drawImage(images.r3c5, 200, 100, 50, 50);
   context.drawImage(images.r4c1, 0, 150, 50, 50);
   context.drawImage(images.r4c2, 50, 150, 50, 50);
   context.drawImage(images.r4c3, 100, 150, 50, 50);
   context.drawImage(images.r4c4, 150, 150, 50, 50);
   context.drawImage(images.r4c5, 200, 150, 50, 50);
  });
  };
 </script>
</head>
<body>
 <canvas id="imageCanvas" width="250" height="200"></canvas>
</body>
</html>

lucy24

4:31 pm on Aug 20, 2017 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



In the category of “can’t hurt”: my generic CSS includes the line 
img {border: none; text-decoration: none; margin: 0; padding: 0;}
It stops browsers from getting bright ideas about what images are “supposed” to look like.

you cant use document.write
You sure can’t. For most purposes, innerHTML works nicely.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 5:10 pm May 13, 2026