無法添加圖像周圍

Question

這個按鈕是我在編寫HTML代碼中使用的代碼：

<button id="imageshow" style="display:none">Button1</button>&nbsp;&nbsp;&nbsp; 
<button id="imageshow" style="display:none">Button2</button>&nbsp;&nbsp;&nbsp; 
<button id="imageshow" style="display:none">Button3</button>&nbsp;&nbsp;&nbsp;<br> 
<img src="Images/Image1.jpg" onmouseover="showIt(this.src)"><br> 
<button id="imageshow" style="display:none">Button4</button>&nbsp;&nbsp;&nbsp; 
<button id="imageshow" style="display:none">Button5</button>&nbsp;&nbsp;&nbsp; 
<button id="imageshow" style="display:none">Button6</button>&nbsp;&nbsp;&nbsp; 

當我編寫此不使用風格=「顯示：無」，我能夠加入樣樣精。但是，當我編碼像上面和所使用的下面的javascript：被添加

function showIt(imgsrc) 
{ 
document.getElementById('imageshow').src=imgsrc; 
document.getElementById('imageshow').style.display=''; 
} 

function hideIt() 
{ 
document.getElementById('imageshow').style.display='none'; 
} 

只有一個按鈕。任何人都可以解決此問題。謝謝

Answer 1

你有相同ID的多個元素，所以使用Javascript只需要第一個。改爲使用class="imageshow"即可。

腳本應該是這樣的：

function showIt(imgsrc) 
{ 
    var images = document.getElementsByClassName('imageshow'); 

    for(var i=0; i<images.length; i++) 
    { 
     images[i].src=imgsrc; 
     images[i].style.display=''; 
    } 
} 

function hideIt() 
{ 
    var images = document.getElementsByClassName('imageshow'); 

    for(var i=0; i<images.length; i++) 
    { 
     images[i].style.display='none'; 
    } 
} 

Answer 2

這是因爲你只能有一個給定ID的元素。

您應該使用類。

見http://jsfiddle.net/mwu4M/

HTML

移去那些所謂的醜陋 和<br />。並使用class="imageshow"而不是id="imageshow"。

<button class="imageshow">Button1</button> 
<button class="imageshow">Button2</button> 
<button class="imageshow">Button3</button> 
<img id="myimg" src="Images/Image1.jpg" onmouseover="showIt(this.src)" onmouseout="hideIt()" alt="[IMG]"> 
<button class="imageshow">Button4</button> 
<button class="imageshow">Button5</button> 
<button class="imageshow">Button6</button> 

CSS：

.imageshow{ 
    visibility:hidden; 
    margin-right:15px; 
} 
.imageshow.show{ 
    visibility:visible; 
} 
#myimg{display:block;} 

的JavaScript：

function getElementsByClassName(c,el){ 
    if(typeof el=='string'){el=document.getElementById(el);} 
    if(!el){el=document;} 
    if(el.getElementsByClassName){return el.getElementsByClassName(c);} 
    var arr=[], 
     allEls=el.getElementsByTagName('*'); 
    for(var i=0;i<allEls.length;i++){ 
     if(allEls[i].className.split(' ').indexOf(c)>-1){arr.push(allEls[i])} 
    } 
    return arr; 
} 
function addClass(el,c){ 
    var arr=el.className.split(' '); 
    if(arr.indexOf(c)>-1){return;} 
    arr.push(c); 
    el.className=arr.join(' '); 
} 
function delClass(el,c){ 
    var arr=el.className.split(' '); 
    if(arr.indexOf(c)===-1){return;} 
    arr.splice(arr.indexOf(c),1); 
    el.className=arr.join(' '); 
} 
function showIt(imgsrc){ 
    this.src=imgsrc; 
    var els=getElementsByClassName('imageshow'); 
    for(var i=0;i<els.length;i++){ 
     addClass(els[i],'show'); 
    } 
} 
function hideIt(){ 
    var els=getElementsByClassName('imageshow'); 
    for(var i=0;i<els.length;i++){ 
     delClass(els[i],'show'); 
    } 
} 

編輯：

甚至更​​好：http://jsfiddle.net/mwu4M/1/

HTML：

<div id="wrapper"> 
    <button class="imageshow">Button1</button> 
    <button class="imageshow">Button2</button> 
    <button class="imageshow">Button3</button> 
    <img id="myimg" src="Images/Image1.jpg" onmouseover="showIt(this.src)" onmouseout="hideIt()" alt="[IMG]"> 
    <button class="imageshow">Button4</button> 
    <button class="imageshow">Button5</button> 
    <button class="imageshow">Button6</button> 
</div> 

CSS：

#wrapper>.imageshow{ 
    visibility:hidden; 
    margin-right:15px; 
} 
#wrapper.show>.imageshow{ 
    visibility:visible; 
} 
#myimg{display:block;} 

的JavaScript：

function showIt(imgsrc){ 
    this.src=imgsrc; 
    document.getElementById('wrapper').className="show"; 
} 
function hideIt(){ 
    document.getElementById('wrapper').className=""; 
} 

但我不明白你src做什麼。

你的代碼有

document.getElementById('imageshow').src=imgsrc; 

但imageshow是按鈕而不是圖片！

然後我以爲你想改變myimg的src。

但它沒有意義，因爲我們將其src更改爲其src！

<img id="myimg" src="Images/Image1.jpg" onmouseover="showIt(this.src)" onmouseout="hideIt()" alt="[IMG]"> 
function showIt(imgsrc){ 
    this.src=imgsrc;/*It was "Images/Image1.jpg" and now it's "Images/Image1.jpg" too*/ 
    document.getElementById('wrapper').className="show"; 
} 

編輯2：

如果你想顯示的按鈕，當鼠標懸停的形象和隱藏，當鼠標進入到另一個地方，你可以使用父onmouseleave。但是，它不是由所有的瀏覽器都支持，所以你需要實現它：

function containsOrIs(el1,el2){ 
    if(el1===el2){return true;} 
    return Boolean(el1.compareDocumentPosition(el2)&16); 
} 
function addEvent(el,e,f,b){ 
    if(typeof el==='string'){el=document.getElementById(el);} 
    if(e=='mouseenter'||e=='mouseleave'){ 
     return addEvent(el,e=='mouseenter'?'mouseover':'mouseout',function(e){ 
      if(!e){e=window.event;} 
      if((el===e.target || containsOrIs(el, e.target)) && !containsOrIs(el, e.relatedTarget||e[e=='mouseenter'?'fromElement' : 'toElement'])){ 
       f(); 
      } 
     }); 
    } 
    if(el.addEventListener){ 
     if(b==undefined){b=false} 
     return el.addEventListener(e,f,b); 
    } 
    if(el.attachEvent){ 
     return el.attachEvent('on'+e,f); 
    } 
} 
function showIt(imgsrc){ 
    this.src=imgsrc; 
    document.getElementById('wrapper').className="show"; 
} 
function hideIt(){ 
    document.getElementById('wrapper').className=""; 
} 
window.onload=function(){ 
    addEvent('wrapper','mouseleave',hideIt); 
} 

DEMO: http://jsfiddle.net/mwu4M/2/

編輯3：

但是，也許你喜歡使用:hover，這是simplier和CSS-只：

#wrapper>.imageshow{ 
    visibility:hidden; 
} 
#wrapper:hover>.imageshow{ 
    visibility:visible; 
} 

但是當鼠標懸停時會顯示按鈕#wrapper，不僅是圖像。

DEMO: http://jsfiddle.net/mwu4M/3/

Answer 3

document.getElementById()只會返回一個元素（如規格說，ID應該是唯一的），因此不會適用於所有的按鈕。

您的替代方案是用名稱替換您的ID，然後使用document.getElementsByName()或類，但是按照交叉瀏覽器的方式按類選擇元素並不是很簡單，除非您確定在頁面中包含諸如jQuery之類的庫。