How could I include the image in the print preview? I cant make it work :sad: anyone? please help.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta name="generator" content=
    "HTML Tidy for Windows (vers 25 March 2009), see www.w3.org">
    <script type="text/javascript">

// _importNode() needed for IE 
if (!document.importNode) {
    function _importNode(oNode, bImportChildren) {
        var oNew;
        with(oNode) {
            //          alert(nodeName)
            switch (nodeType) {
                // HTML NodeType
                //   TEXT_NODE          = 3;
                //   ELEMENT_NODE       = 1;
		    //   ATTRIBUTE_NODE     = 2;  [not accessed as a node]
                //   COMMENT_NODE       = 8;  [ignored; not printable]
                // XML [shouldn't be possible]
                //   CDATA_SECTION_NODE = 4;
                //   ENTITY_REFERENCE_NODE = 5;
                //   ENTITY_NODE        = 6;
                //   PROCESSING_INSTRUCTION_NODE = 7;
                //   DOCUMENT_NODE      = 9;
                //   DOCUMENT_TYPE_NODE = 10;
                //   DOCUMENT_FRAGMENT_NODE = 11;
                //   NOTATION_NODE      = 12;
            case 3:
                oNew = oWin.document.createTextNode(oNode.nodeValue);
                break;
            case 1:
                oNew = oWin.document.createElement(nodeName);
                for (var i = 0; i < attributes.length; i++) {
                   if (attributes[i].nodeValue != null && attributes[i].nodeValue != '') {
                       var attrName = attributes[i].name;
                       var attrValue = attributes[i].value;
                       if (attrName == "class") {
                           oNew.setAttribute("className", attrValue);
                       } else {
                           if (nodeName != "TEXTAREA") {
                               oNew.setAttribute(attrName, attrValue);
                               if (attrName + attrValue == 'typetext') oNew.value = value;
                           }
                       }
                   }
               }

               if (style != null && style.cssText != null) oNew.style.cssText = style.cssText;

            }
            if (bImportChildren && hasChildNodes()) {
                for (var oChild = firstChild; oChild; oChild = oChild.nextSibling) {
                    oNew.appendChild(_importNode(oChild, true));
                }
            }
        }
        return oNew;
    }
}

    // end _importNode()

        function printbyid(sId) {
            var oPrn = document.getElementById(sId);
            oWin = window.open('', "quickprint",
                  "location=no,height="+(32+oPrn.offsetHeight)+", width="+(32+oPrn.offsetWidth));
            if (!document.importNode) {
                oWin.document.open();
                oWin.document.write('<span id="fxm"></span>');
                var oTmp = _importNode(oPrn, true);
                oWin.document.close();

                var oPtr = oWin.document.getElementById('fxm')
                oPtr.appendChild(oTmp)

            } else {

                oWin.document.body.appendChild(oWin.document.importNode(oPrn, true));

		    //  compensate for value not imported by at least some browsers

                var cSels = document.getElementsByTagName('select')
                for (var i = 0; i < cSels.length; ++i) {
                    var iSel = cSels[i].getAttribute('id')
                    var nSel = oWin.document.getElementById(iSel)
                    var oSel = document.getElementById(iSel)
                    nSel.selectedIndex = oSel.selectedIndex
                }
                var cTAs = document.getElementsByTagName('textarea')
                for (var i = 0; i < cTAs.length; ++i) {
                    var iTA = cTAs[i].getAttribute('id')
                    var nTA = oWin.document.getElementById(iTA)
                    var oTA = document.getElementById(iTA)
                    nTA.value = oTA.value
                }
            }
            
            oWin.focus();
            oWin.print();
            oWin.close();
        }

    </script>
    <title></title>
  </head>
  <body>
    <div style="float:left" id='test'>
      This is what will print
      <form>
      <img src="leaf.jpg" width="500" height="397" style="display:!important"> <span style="color:red">First name:</span> <input type=
        "text" name="firstname"><br>
        Last name: <textarea id="jlb" rows="2" cols="20" type="text" name="lastname"></textarea>
      </form><select id='choose'>
        <option>
          one
        </option>
        <option>
          two
        </option>
        <option>
          six
        </option>
      </select>
    </div>
    <div>
      Pay no attention to this
      <form>
        User: <input type="text" name="userid"><br>
        Pass: <input type="text" name="password">
      </form>
    </div>
    <form>
      <input type="button" value="Print" onclick=
      "printbyid('test')">
    </form>
  </body>
</html>

why do you have three forms in this code?
three open and only two close.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.