Question

我试过这样的事情，

  <script>
    function sample(image){
            document.write('<img src="photo/'+image+'" width=200 height=200/>');
         //document.open("photo/"+image);
    }
</script>

<select name="selection">
          <option onmouseover="return sample('07A31A1250.jpeg')">Aaaaaaaa</option>
          <option onmouseover="return sample('07A31A1251.jpeg')">Bbbbbbbb</option>
          <option onmouseover="return sample('07A31A1251.jpeg')">Cccccccc</option>
          <option onmouseover="return sample('07A31A1250.jpeg')">Dddddddd</option>
  </select>

我对此进行编码是为了在鼠标结束时以样本方法显示指定的图像。但是当我将鼠标指针放在选项上时，相应的图像不会在整个页面中加载，而不是像弹出窗口一样显示。如何解决我的问题。???

并且它在firefox浏览器中受支持但在chrome中不受支持。是否有任何解决方法可以在不支持鼠标悬停选项的浏览器中进行操作？

Answer 1

document.write可以追溯到javascript的第1天，并且早于我们现在可以做的所有花哨的DOM内容。您只能在页面实际加载期间调用document.write。如果你之后调用document.write，那么你正在用你想要的任何东西替换当前文档（整个页面）.write（）。

同样，document.write的输出（如果使用得当）会进入调用document.write的EXACT位置，所以即使你的代码工作正常，你最终会得到：

<option onmouseover="<img src="photo/07A31A1250.jpeg" width=200 height=200/>">Aaaaaaaa</option>

这不是你想要的。

考虑使用jquery来做这类事情，并使用适当的DOM操作技术。

Answer 2

document.write已弃用。
相反，或许可能会使用类似

的内容

function fubar)(){
 document.getElementById('foo').value="";
 document.getElementById('foo')="<img src='photo/+image+.jpeg'>";
}

另一种方法是使用CSS并将图像放在选项

中

img{display:none;}
option:hover img{display:inline;}

但与Javascript不同，CSS更改不是永久性的

document.write问题

2 个答案: