无法在图像周围添加按钮
Unable to add buttons around an image
这是我在编码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>
当我在不使用style="display:none"的情况下对此进行编码时,我能够很好地添加所有内容。但当我像上面那样编码并使用下面的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。
你应该使用类。
请参阅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);
}
演示:http://jsfiddle.net/mwu4M/2/
编辑3:
但也许你更喜欢使用:hover
,它更简单,只使用CSS:
#wrapper>.imageshow{
visibility:hidden;
}
#wrapper:hover>.imageshow{
visibility:visible;
}
但是,当鼠标悬停在#wrapper
上时,按钮将显示出来,而不仅仅是图像。
演示:http://jsfiddle.net/mwu4M/3/
document.getElementById()
将只返回一个元素(因为规范规定ID应该是唯一的),因此不会应用于所有按钮。
您的替代方案是将ID替换为Names,并使用document.getElementsByName()
或类。但是,除非您同意在页面上包含jQuery等库,否则以跨浏览器的方式逐类选择元素并不太简单。
- 在HTML5画布上添加按钮和控件
- 无法在图像周围添加按钮
- Sitecore富文本编辑器-添加按钮
- 如何在标记href中添加按钮
- jqgridnavgrid在搜索按钮和自定义按钮之后添加按钮
- 如何在视频标签中添加按钮覆盖
- 添加按钮以切换浏览器
- 如何在php中添加按钮而不是错误状态和成功消息
- Struts2jquery可编辑网格,要禁用内联添加按钮
- 如何在服务器端的文本中添加按钮单击事件
- 简单的dart网页应用程序在IE上添加按钮的速度非常慢
- 向HTML页面添加按钮,更新表格信息
- (PHP&JavaScript)a href添加按钮赢得'我不适用于Mozilla,但适用于IE和谷歌
- 单击添加按钮后如何显示答案按钮
- 如何在 extjs 5 中的工具提示中添加按钮
- 在数据表的新行中添加按钮,变得未定义
- 如何向照片滑动添加按钮
- 动态添加按钮后刷新 jQm 标头
- PHP,MySql和JQuery - 按添加按钮后填充选择框
- 动态添加按钮,这些按钮也会动态添加文本框 AngularJS