19 Replies Latest reply: Jun 12, 2013 3:03 PM by MurraySummers RSS

    How to remove gray line around an empty image in DW CS6

    RiaandSteve1

      I have an image that I retrieve from a database (the path) files are stored in a folder.

      However when there is no image the image outline is still there.

      I have managed to remove the image dreamweaver CS6 gives you automatically (if there is an error etc.) , however the outline is still there even if you set the border to zero. When there is an image it is shown with no border

       

      Is there a solution to remove the border of the empty image or remove the empty image all together

       

      Please find my code I'm using below

       

      <img src="<?php if (is_null($row_Recordset1['SmalImage2'])) { 
      
      } else {
      
      }   $file_path.$row_Recordset1['SmallImage2']; ?>" alt="<?php echo $row_Recordset1['Manufacturer']; ?> <?php echo $row_Recordset1['Model']; ?>" name="t2" width="60" height="60" id="t2" onClick="MM_swapImage('main','','<?php echo $file_path.$row_Recordset1['LargeImage2']; ?>',1)"border = "0"></td>
      
      
        • 1. Re: How to remove gray line around an empty image in DW CS6
          Ken Binney CommunityMVP

          In what browser(s) are you seeing this?

          Is there link code wrapping the missing images?

          • 2. Re: How to remove gray line around an empty image in DW CS6
            MurraySummers CommunityMVP

            DW doesn't put any images or borders anywhere. It's the browser that does that. Some do and some don't.

             

            Try this PHP code -

             

            <?php if !is_null($row_Recordset1['SmalImage2])) { ?>

            <img src="<?php $file_path.$row_Recordset1['SmallImage2']; ?>" alt="...">

            <?php } ?>

             

            If there's no image, the <img> tag won't even be written to the page.

            • 3. Re: How to remove gray line around an empty image in DW CS6
              RiaandSteve1 Community Member

              thanks for your reply

              I am viewing in Safari

               

              I have tried to replace the this part if the code with your succesed code (not sure if that was the rightway though. How ever I get the dredded red errors down the side.

               

               

              <?php if !is_null($row_Recordset1['SmalImage2])) { ?>
              <img src="<?php $file_path.$row_Recordset1['SmallImage2']; ?>" alt="<?php echo $row_Recordset1['Manufacturer']; ?> <?php echo $row_Recordset1['Model']; ?>"<?php } ?> name="t2" width="60" height="60" id="t2" onClick="MM_swapImage('main','','<?php echo $file_path.$row_Recordset1['LargeImage2']; ?>',1)"border = "0"
              
              

              Thanks looking

              • 4. Re: How to remove gray line around an empty image in DW CS6
                MurraySummers CommunityMVP

                Dang - I make this mistake every time I do an IF conditional - code should be this:

                 

                <?php if (!is_null($row_Recordset1['SmalImage2]))) { ?>

                <img src="<?php echo $file_path.$row_Recordset1['SmallImage2']; ?>" alt="...">

                <?php } ?>

                 

                (don't forget to replace the placeholder in the alt attribute)

                • 5. Re: How to remove gray line around an empty image in DW CS6
                  RiaandSteve1 Community Member

                  Thanks for you reply

                  The code is partly working;

                  when there is no image, there are no borders or image (which is correct), however it does not display the image when there should be an image.

                  This it what the code looks like now:

                   

                   

                  <?php if (!is_null($row_Recordset1['SmalImage2'])) { ?>
                  <img scr="<?php echo $file_path.$row_Recordset1['SmallImage2']; ?>" alt="<?php echo $row_Recordset1['Manufacturer']; ?> <?php echo $row_Recordset1['Model']; ?>"  name="t2" width="60" height="60" id="t2" onClick="MM_swapImage('main','','<?php echo $file_path.$row_Recordset1['LargeImage2']; ?>',1)"border = "0"><?php } ?>
                  
                  
                  • 6. Re: How to remove gray line around an empty image in DW CS6
                    MurraySummers CommunityMVP

                    <img src= (or was that a typo?)

                     

                    Preview the page, look at the source, and show us what code is being written for that tag when there is an image in the database.

                    • 7. Re: How to remove gray line around an empty image in DW CS6
                      RiaandSteve1 Community Member

                      Thanks for you quick reply

                      I'm not sure what you mean, but I've removed the " and that doesn't make any difference( there is no image when ther should be)

                      It does show the image if I use the following code, however when there is no image the gray outline is still there.

                       

                       

                      <img src="<?php echo $file_path.$row_Recordset1['SmallImage2']; ?>" alt="<?php echo $row_Recordset1['Manufacturer']; ?> <?php echo $row_Recordset1['Model']; ?>" name="t1" width="60" height="60" id="t1" onClick="MM_swapImage('main','','<?php echo $file_path.$row_Recordset1['LargeImage2']; ?>',1)">
                      

                       

                       

                      Current code:

                       

                      <?php if (!is_null($row_Recordset1['SmalImage2'])) { ?>
                      
                      <img src=<?php echo $file_path.$row_Recordset1['SmallImage2']; ?>" alt="<?php echo $row_Recordset1['Manufacturer']; ?> <?php echo $row_Recordset1['Model']; ?> name="t2" width="60" height="60" id="t2" onClick="MM_swapImage('main','','<?php echo $file_path.$row_Recordset1['LargeImage2']; ?>',1)"border = "0"><?php } ?>
                      
                      

                       

                      Is there a away to isert an empty image if the record field is empty? This might avoid the problems of the gray lines? But when there is an entry is shows the correct image?

                      Hope you can help

                      • 8. Re: How to remove gray line around an empty image in DW CS6
                        MurraySummers CommunityMVP

                        Put the " back. It belongs there. I was referring to this -

                         

                        SafariScreenSnapz007.jpg

                        You had "scr" instead of "src".

                         

                        Anyhow, please do what I asked about copying the source code for that image from the previewed page.

                        • 9. Re: How to remove gray line around an empty image in DW CS6
                          RiaandSteve1 Community Member

                          The image is retrieved from a Database as follows:

                           

                           

                          $colname_Recordset1 = "-1";
                          if (isset($_GET['product_id'])) {
                            $colname_Recordset1 = $_GET['product_id'];
                          }
                          mysql_select_db($database_dBconn, $dBconn);
                          $query_Recordset1 = sprintf("SELECT * FROM products WHERE id = %s", GetSQLValueString($colname_Recordset1, "int"));
                          $Recordset1 = mysql_query($query_Recordset1, $dBconn) or die(mysql_error());
                          $row_Recordset1 = mysql_fetch_assoc($Recordset1);
                          $totalRows_Recordset1 = mysql_num_rows($Recordset1);
                          
                           $file_path = '../files/Images/product/';
                          
                          

                           

                          Where image name is stored in the DB and the path comes from where it is stored in the website. The column name is SmallImage2

                           

                          I have now also put the $file_path into the code as follows as I thought that's why the image doesn't show up:

                           

                           

                          <?php if (!is_null($file_path.$row_Recordset1['SmallImage2'])) { ?>
                                
                          <img src="<?php echo $file_path.$row_Recordset1['SmallImage2']; ?> alt="<?php echo $row_Recordset1['Manufacturer']; ?> <?php echo $row_Recordset1['Model']; ?> name="t2" width="60" height="60" id="t2" onClick="MM_swapImage('main','','<?php echo $file_path.$row_Recordset1['LargeImage2']; ?>',1)"border = "0"><?php } ?>
                          
                          

                          However if there is an image is doesnot show up in the view, I do however get the standard empty image (with DW image) show up including gray lines. The swap between the large image does work.

                          (Sorry to be a pain)

                          • 10. Re: How to remove gray line around an empty image in DW CS6
                            MurraySummers CommunityMVP

                            (Sorry to be a pain)

                             

                            You just have to make sure you read the suggestions. Please PREVIEW this page in browser so that the PHP is executed. Look at the source code. Copy the code for the image that is not appearing there. Paste that code into a reply. I want to see the code that is being written to the page by your PHP.

                            • 11. Re: How to remove gray line around an empty image in DW CS6
                              RiaandSteve1 Community Member

                              Hi Sorry I did not quite understand what you ment so hope this is right.

                               

                               

                              <td colspan="5"><img src="../files/Images/product/image.jpg" name="main" width="360" height="360" id="main" longdesc="K"></td>
                              
                              
                              <td width="67"><img src="../files/Images/product/image.jpg" alt="alt text here" name="t1" width="60" height="60" id="t1" onClick="MM_swapImage('main','','../files/Images/image.jpg',1)"></td>
                                  <td width="60">      
                              <img src="../files/Images/product/image.jpg alt="alt text here name="t2" width="60" height="60" id="t2" onClick="MM_swapImage('main','','../files/Images/product/image.jpg',1)"border = "0">
                                    </td>
                              
                              
                                  <td width="60"><img src="" alt="alt tex heret" name="t3" width="60" height="60" id="t3" onClick="MM_swapImage('main','','../files/Images/product/',1)"border = "0"></td>
                                  <td width="245"><img src="" alt="alt text here" name="t4" width="60" height="60" id="t4" onClick="MM_swapImage('main','','../files/Images/product/',1)"border = "0"></td>
                                  <td colspan="2"></td>
                                  </tr>
                                <tr>
                                  <td colspan="4"></td>
                                  <td width="0"></td>
                                  <td>
                              
                              

                              The second image is what it is about.

                              the third and fourth should work the same as 2 however i know i haven't got images in there yet

                               

                              Thanks

                              • 12. Re: How to remove gray line around an empty image in DW CS6
                                MurraySummers CommunityMVP

                                Thank you - so, the src attribute is not receiving a value. Let's see why.

                                 

                                Change this -

                                 

                                <?php if (!is_null($row_Recordset1['SmalImage2]))) { ?>

                                <img src="<?php echo $file_path.$row_Recordset1['SmallImage2']; ?>" alt="...">

                                <?php } ?>

                                 

                                to this -

                                 

                                <?php if (!is_null($row_Recordset1['SmalImage2]))) { ?>

                                echo $file_path . " | " . $row_Recordset1['SmallImage2']; exit();

                                <img src="<?php echo $file_path.$row_Recordset1['SmallImage2']; ?>" alt="...">

                                <?php } ?>

                                 

                                This will write that information to the screen and exit rendering at that point. What is the information that is written to the page, please?

                                • 13. Re: How to remove gray line around an empty image in DW CS6
                                  RiaandSteve1 Community Member

                                  Thanks again for looking

                                   

                                  I have now changed the code as you said it is looking as follows:

                                   

                                   

                                  <?php if (!is_null($row_Recordset1['SmallImage2'])) { ?>
                                  echo $file_path."|".$row_Recordset1['SmallImage2']; exit();     
                                  <img src="<?php echo $file_path.$row_Recordset1['SmallImage2']; ?>" alt="<?php echo $row_Recordset1['Manufacturer']; ?> <?php echo $row_Recordset1['Model']; ?> name="t2" width="60" height="60" id="t2" onClick="MM_swapImage('main','','<?php echo $file_path.$row_Recordset1['LargeImage2']; ?>',1)"border = "0"><?php } ?>
                                  
                                  

                                  however

                                  echo $file_path."|".$row_Recordset1['SmallImage1']; exit();

                                  is written in black (not sure if that is what you wanted)

                                   

                                  the source code is as follows:

                                   

                                   

                                  <td width="67"><img src="../files/Images/product/image.jpg" alt="alt text here" name="t1" width="60" height="60" id="t1" onClick="MM_swapImage('main','','../files/Images/product/image.jpg',1)"></td>
                                      <td width="60">
                                    
                                            echo $file_path."|".$row_Recordset1['SmallImage2']; exit();     
                                  <img src="../files/Images/product/image.jpg" alt="alt text here name="t2" width="60" height="60" id="t2" onClick="MM_swapImage('main','','../files/Images/product/image.jpg',1)"border = "0">
                                        </td>
                                  
                                  
                                      <td width="60"><img src="" alt="alt text here" name="t3" width="60" height="60" id="t3" onClick="MM_swapImage('main','','../files/Images/product/',1)"border = "0"></td>
                                      <td width="245"><img src="" alt="alt text here" name="t4" width="60" height="60" id="t4" onClick="MM_swapImage('main','','../files/Images/product/',1)"border = "0"></td>
                                      <td colspan="2"></td>
                                      </tr>
                                    <tr>
                                      <td colspan="4"></td>
                                      <td width="0"></td>
                                  
                                  

                                  also the first image is now squashed up in the preview

                                  • 14. Re: How to remove gray line around an empty image in DW CS6
                                    MurraySummers CommunityMVP

                                    Right - my mistake!

                                     

                                    It should be <?php echo $file_path." | ".$row_Recordset1['SmallImage1'];exit(); ?>

                                    • 15. Re: How to remove gray line around an empty image in DW CS6
                                      RiaandSteve1 Community Member

                                      Code is looking as followes:

                                       

                                       

                                      <?php if (!is_null($row_Recordset1['SmallImage1'])) { ?>
                                      <?php echo $file_path."|".$row_Recordset1['SmallImage1']; exit();?>     
                                      <img src="<?php echo $file_path.$row_Recordset1['SmallImage1']; ?>" alt="<?php echo $row_Recordset1['Manufacturer']; ?> <?php echo $row_Recordset1['Model']; ?> name="t2" width="60" height="60" id="t2" onClick="MM_swapImage('main','','<?php echo $file_path.$row_Recordset1['LargeImage1']; ?>',1)"border = "0"><?php } ?>
                                      
                                      

                                      source code is:

                                       

                                       

                                       <td width="67"><img src="../files/Images/product/image.jpg" alt="alt text goes here" name="t1" width="60" height="60" id="t1" onClick="MM_swapImage('main','','../files/Images/product/image.jpg',1)"></td>
                                          <td width="60">
                                        
                                                ../files/Images/product/|image.jpg
                                      
                                      
                                      

                                      I get no image at all showing in this case and also no gray lines although there should be an image in there

                                      • 16. Re: How to remove gray line around an empty image in DW CS6
                                        mytaxsite.co.uk CommunityMVP

                                        Have you tried inserting a global css code like this:

                                         

                                         

                                        img {

                                            outline: 0;

                                        }

                                         

                                        Not sure if this is going to work but worth a try.  If not please post a link to your page for us to try something else from our machines.

                                         

                                        Good luck.

                                        • 17. Re: How to remove gray line around an empty image in DW CS6
                                          MurraySummers CommunityMVP

                                          Is that the correct path to the image? It must not be.

                                          • 18. Re: How to remove gray line around an empty image in DW CS6
                                            RiaandSteve1 Community Member

                                            THANK YOU SO MUCH

                                             

                                            It is working now, not sure what I've done different though but the following code does the trick

                                             

                                             

                                            <?php if (!is_null($row_Recordset1['SmallImage2'])) { ?>
                                            <?php echo $file_path.$row_Recordset1['SmallImage2']; ?>" alt="<?php echo $row_Recordset1['Manufacturer']; ?> <?php echo $row_Recordset1['Model']; ?> name="t2" width="60" height="60" id="t2" onClick="MM_swapImage('main','','<?php echo $file_path.$row_Recordset1['LargeImage2']; ?>',1)"border = "0"><?php } ?>
                                            

                                             

                                            Thanks for sticking with me to get it sorted

                                            Ria