Create multiple HTML file from directory of images
<p>I have a large body of technical illustrations that I need to Map area to form an online manual. I have already made the base engine for linking each file together and navigating forward and backwards. But due to the large amount of images I wanted to create a group of base HTML files that I could then go through and edit the relevant sections.</p>

<p>What I wanted was to search the directory (images/schematic/) and create a HTML file for each image (imagefilename.png). The file would use the name of the image (imagefilename). The body of the html file would be similar to as follows.</p>

<pre><code>    $html='
       &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; 
        &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
        &lt;head&gt; 
           &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; 
           &lt;title&gt;'.$imageFileName.'&lt;/title&gt;
        &lt;/head&gt; 
        &lt;body&gt;
          &lt;div id="image-holder"&gt; 
             &lt;div class="img-title"&gt;changeMeLater&lt;/div&gt;
             &lt;img src="'.$imageDir .$FullImageFileName.'" width="640" height="751" alt="'.$imageFileName.'-diagram" usemap="#mapFor-'.$imageFileName.'"&gt; 

             &lt;map name="'.$imageFileName.'-imageMap" id="mapFor-'.$imageFileName.'"&gt; 
         &lt;/map&gt;
         &lt;/div&gt; 
         &lt;div id="partsDescription-tabContent" class="content"&gt;&lt;/div&gt;    
         &lt;div id="instructions-tabContent" class="content"&gt;&lt;/div&gt;    
         &lt;div id="notes-tabContent" class="content"&gt;&lt;/div&gt;    
         &lt;div id="stockControl-tabContent" class="content"&gt;&lt;/div&gt;
        &lt;/body&gt; 
        &lt;/html&gt; ';
</code></pre>

<p>I found this code which did display a list of the files, and found out that it is the 'basename' that is removing the directory name. </p>

<pre><code>      &lt;?php
          $directory = "./images/schematic/";
          $directory = (!strstr($directory,"*") || $directory =="./" ) ? $directory."*" : $directory;
          $files = glob($directory);
          for($i=0;$i&lt;sizeof($files) ; $i++){
          echo basename($files[$i])."&lt;br/&gt;\n";
         }?&gt;
</code></pre>

<p>But I do not understand how to do something to each return value from the image file search. As you can probably tell I have little to no idea when it comes to php but I am trying. If someone could point me in the right direction explaining how and why I would appreciate it.</p>

<p>Ok I have had a bit of a breakthrough. This code does work. Now I would like to tweek it. Suggestions on how to improve it are more than welcome.</p>

<pre><code>      &lt;?php

       $directory = "./images/schematic/";

       $directory = (!strstr($directory,"*") || $directory =="./" ) ? $directory."*" : $directory;

       $files = glob($directory);

       for($i=0;$i&lt;sizeof($files) ; $i++)
        {
       $fileTitle= basename($files[$i], ".png");
       $imageSrc= $files[$i];


       $html='&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
      &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
      &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
      &lt;title&gt;'.$pageTitle.'&lt;/title&gt; 
      &lt;/head&gt;  
      &lt;body&gt; 

     &lt;div id="image-holder"&gt;
     &lt;div class="img-title"&gt;'.$fileTitle.'&lt;/div&gt;
     &lt;img src=".'.$imageSrc.'" width="640" height="751" style="border: none;" alt="'.$fileTitle.'-diagram" usemap="#mapFor-'.$fileTitle.'"&gt;
     &lt;map name="'.$fileTitle.'-imageMap" id="mapFor-'.$fileTitle.'"&gt;

    &lt;!-------------------------------- '.$pageTitle.' Mapping -------------------------------------&gt; 

    &lt;/map&gt; 
    &lt;/div&gt;

    &lt;div id="partsDescription-tabContent" class="content"&gt;&lt;/div&gt;    
    &lt;div id="instructions-tabContent" class="content"&gt;&lt;/div&gt;    
    &lt;div id="notes-tabContent" class="content"&gt;&lt;/div&gt;    
    &lt;div id="stockControl-tabContent" class="content"&gt;&lt;/div&gt;

    &lt;/body&gt;
    &lt;/html&gt;';


    $myfile = fopen ('./newdirectory/'.$fileTitle.'.html', 'w') or die("Can not open file");
    $outputFile = $html;
    fputs($myfile, $outputFile);
    fclose($myfile);

    };

    echo ("OK Files created")

   ?&gt;
</code></pre>

<p>I have cobbled this together from various tutorials I found across the web. I would like it to only look image files, preferably .png and .jpeg. Can I get it to skip a file that exists (I am thinking for further down the line in case I have area mapped the images and it is overwritten.) I realize this may look messy but I am a complete newb to this.</p>
