2011-12-01 62 views
1

我嘗試了一些這樣的事,對樣品的方法顯示指定圖像的目的問題與文件撰寫

<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中。是否有任何解決方法可以在瀏覽器中執行,而不支持鼠標懸停選項?

+1

永久停止使用'document.write'。這將爲你的餘生解決很多問題。 – Jon

+0

MarcB是對的。 [學習jQuery](http://jqfundamentals.com)或直接[DOM操作](https://developer.mozilla.org/en/Gecko_DOM_Reference)是要走的路。如果你想看到一個源代碼作爲答案,那麼請確切指定你需要的。 – kubetz

回答

1

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;} 

但CSS的變化是沒有什麼不同的Javascript

2

document.write可以追溯到JavaScript的第1天,並且早於我們現在可以做的所有花哨的DOM東西。您只能在頁面實際加載期間調用document.write。如果事後調用document.write,則用您想要的任何內容替換當前文檔(整個頁面).write()。

同時,文件撰寫的輸出(在正確使用時)進入確切地點文件撰寫是所謂的,所以即使你的代碼是工作,你會結束:

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

這不是你想要的。

研究使用jquery這種事情,並使用適當的DOM操作技術。