无法添加图像周围
问题描述：
这个按钮是我在编写HTML代码中使用的代码：无法添加图像周围
<button id="imageshow" style="display:none">Button1</button>
<button id="imageshow" style="display:none">Button2</button>
<button id="imageshow" style="display:none">Button3</button> <br>
<img src="Images/Image1.jpg" onmouseover="showIt(this.src)"><br>
<button id="imageshow" style="display:none">Button4</button>
<button id="imageshow" style="display:none">Button5</button>
<button id="imageshow" style="display:none">Button6</button>
当我编写此不使用风格=“显示：无”，我能够加入样样精。但是，当我编码像上面和所使用的下面的javascript：被添加
function showIt(imgsrc)
{
document.getElementById('imageshow').src=imgsrc;
document.getElementById('imageshow').style.display='';
}
function hideIt()
{
document.getElementById('imageshow').style.display='none';
}
只有一个按钮。任何人都可以解决此问题。谢谢
答
你有相同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';
}
}
答
这是因为你只能有一个给定ID的元素。
您应该使用类。
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，不仅是图像。
答
document.getElementById()只会返回一个元素（如规格说，ID应该是唯一的），因此不会适用于所有的按钮。
您的替代方案是用名称替换您的ID，然后使用document.getElementsByName()或类，但是按照交叉浏览器的方式按类选择元素并不是很简单，除非您确定在页面中包含诸如jQuery之类的库。
谢谢soooo很多朋友......我一直对此感到震惊...... – aadi
我也有另外一个问题：现在onmouseover所有6个按钮正在显示，并保持在鼠标悬停状态。如何解决这个问题 – aadi
@aadi你需要更新'hideIt（）'函数，我已经编辑了答案，以显示 – mornaner