Unable to add buttons around an image

Question

This is the code i used to in coding 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;

When i coded this without using style="display:none", i am able to add everything fine. But when i coded like above and used the below javascript:

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

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

Only one button is being added. Can anyone resolve this problem. Thank you

Answer 1

That's because you can only have ONE element with a given id.

You should use classes.

See http://jsfiddle.net/mwu4M/

HTML

Romove those ugly   and <br />. And use class="imageshow" instead of 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');
    }
}

Edit:

Or even better: 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="";
}

But I don't understand what you do with src.

Your code had

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

but imageshow were buttons instead of images!

Then I thought you wanted to change myimg' src.

But it doesn't make sense because we change its src to its 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";
}

Edit 2:

If you want to show the buttons when you hover the image and hide them when the mouse goes to another place, you can use onmouseleave on the parent. But that it's not supported by all browsers, so you need to implement it:

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/

Edit 3:

But maybe you prefer using :hover, it's simplier and CSS-only:

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

But then the buttons will be shown when the mouse hovers #wrapper, not only the image.

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

Answer 2

You have multiple elements with the same id, so Javascript only takes the first one. Use class="imageshow" instead and will be ok.

The script would look like this:

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 3

document.getElementById() will only return one element (as specs says ID should be unique) and so wont apply to all your buttons.

Your alternatives are to replace your IDs with Names and use document.getElementsByName() or classes however selecting elements by class in a cross broweser way isn't too simple unless your ok with including a library such as jQuery on your page.