页面显示客户端本地图片。

Question

希望以以下方式实现。div.innertHTML="这里是文字，<img />，文字文字 ";文字围绕图片显示。HTML代码如何写？

Answer 1

<div id="div" style="text-align:center;">a</div><script>
var div=document.getElementById("div");
div.innerHTML="青龙<br />玄武<img />朱雀<br />白虎";
</script>

Answer 2

  function maker(tag) {
    return function(attributes, children) {
      if (arguments.length == 1) return make(tag, attributes);
      else return make(tag, attributes, children);
    }
  }
  function make(tag, attributes, children) {
    var root = document.createElement(tag);
    if(arguments.length == 2 && attributes.constructor != Object) {
      children = attributes;
      attributes = null;
    }
    if(attributes) {
      for(var name in attributes) {
        if(attributes[name] == attributes.className) root.className = attributes[name];
        else root.setAttribute(name, attributes[name]);
      }
    }
    if(children) {
      if(children.constructor == String) {
        root.appendChild(document.createTextNode(children));
      } else if(children.constructor == Array) {
        for(var i = 0; i < children.length; i++) {
          if(children[i].constructor == String) children[i] = document.createTextNode(children[i]);
          root.appendChild(children[i]);
        }
      } else {
        root.appendChild(children);
      }
    }
    return root;
  }  var div = maker("div"), maker("img");
  var myRoot = div(["这里是文字，", img({width : 50, height : 50}),"，文字文字"]);
  document.body.appendChild(myRoot);

Answer 3

如果不行加上window.onload试试，这个还可以这么玩：  window.onload = function() {
    function maker(tag) {
      return function(attributes, children) {
        if (arguments.length == 1) return make(tag, attributes);
        else return make(tag, attributes, children);
      }
    }
    function make(tag, attributes, children) {
      var root = document.createElement(tag);
      if(arguments.length == 2 && attributes.constructor != Object) {
        children = attributes;
        attributes = null;
      }
      if(attributes) {
        for(var name in attributes) {
          if(attributes[name] == attributes.className) root.className = attributes[name];
          else root.setAttribute(name, attributes[name]);
        }
      }
      if(children) {
        if(children.constructor == String) {
          root.appendChild(document.createTextNode(children));
        } else if(children.constructor == Array) {
          for(var i = 0; i < children.length; i++) {
            if(children[i].constructor == String) children[i] = document.createTextNode(children[i]);
            root.appendChild(children[i]);
          }
        } else {
          root.appendChild(children);
        }
      }
      return root;
    }
    var table = maker("table"), tbody = maker("tbody"), tr = maker("tr"), td = maker("td");
    var myTable = table({width : 400, align : "center", cellPadding : 0, cellSpacing : 1, border : 0, bgColor : "#000000"},
                         tbody([tr({height : 25, align : "center", vAlign : "middle", bgColor : "#FFFF00"}, td({colSpan : 5}, "课程表")),
                                tr({height : 25, align : "center", vAlign : "middle", bgColor : "#FFFF00"}, [td("星期一"), td("星期二"), td("星期三"), td("星期四"), td("星期五")]),
                                tr({height : 25, bgColor : "#FFFF00"}, [td(" "), td(" "), td(" "), td(" "), td(" ")]),
                                tr({height : 25, bgColor : "#FFFF00"}, [td(" "), td(" "), td(" "), td(" "), td(" ")]),
                                tr({height : 25, bgColor : "#FFFF00"}, [td(" "), td(" "), td(" "), td(" "), td(" ")]),
                                tr({height : 25, bgColor : "#FFFF00"}, [td(" "), td(" "), td(" "), td(" "), td(" ")]),
                                tr({height : 5, bgColor : "#FFFF00"}, td({colSpan : 5})),
                                tr({height : 25, bgColor : "#FFFF00"}, [td(" "), td(" "), td(" "), td(" "), td(" ")]),
                                tr({height : 25, bgColor : "#FFFF00"}, [td(" "), td(" "), td(" "), td(" "), td(" ")]),
                                tr({height : 25, bgColor : "#FFFF00"}, [td(" "), td(" "), td(" "), td(" "), td(" ")])]));
    document.body.appendChild(myTable);
  }

Answer 4

首先放你的回复。我的意思：不要Js脚本，直接写出在页面上引用本地某个位置的（比如：c:/1.jpg)图片。
所有的都在HTML代码里，或者CSS文件里。

Answer 5

解决：div.innerHTML="我这里是文字我这里是文字
<img style='width:74px;height:95px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=" + PicPath + ")' src='images/null.png' id='img' hspace='5' vspace='5' align='right'/>我这里是文字我这里是文字我这里是文字我这里是文字我这里是文字我这里是文字";其中：PicPath 是本地路径。
src是服务器上的图片路径,我这里用一个全透明的PNG图片。