How to add on click event for button that appeared on mouseover

Question

I have two questions:

1. I want to display 6 buttons around an image on mouseover event of the image on specific positions. Is it possible?

2. Is it possible to write an onclick event for those buttons?

I don't have any experience in web designing. I used the below code

Javascript:

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

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

HTML:

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

but when I mouseout from the image, the button is disappearing. If i remove the onmouseout event, the button stays like that only which i don't want to. And I really didn't get on how to place 6 buttons around the image. I am planning to do like this:

So kindly help me. Thank you

Answer 1

Yes Why Not !!!

1. I want to display 6 buttons around an image on mouseover of the image on specific positions. Is it possible? ANS :- give every button same class like 'imgBtn' and make it by default display none. At the time of mouse oven on image you can write code

in jquery like :-

jQuery('#imageID').hover(function(){
    jQuery('imgBtn').show();
})

in javascript :

paste this line on img tag in

onmouseover="document.getElementsByClassName("redText").style.visibility = 'visible';"

---

1. Is it possible to write an onclick event for those buttons? I don't have any experience in web designing. So kindly help me. Thank you

ANS: yes you can write any function on onclick on button like :

jQuery('#buttonID').click(function(){

    //button functionality
}) 

Answer 2

Yes this is possible, what you have to do is define all six button as you want and set property in style display:none and when you will over the mouse on the image and when you wand to show all six images then call a function onmouseover and set the display:none property display:'' in this way when you will mouse over on the image all the images will get displayed

2nd you may write the onClick with each button and it will work fine.

Hope will work for you.

This will be the code for each button out of six

<input type="button" id="btn1" Onclick="onClickFunc()" style="display:none" value="Button1" />

Answer 3

Set the image as a background for one div. Inside that div create another one div and write the code for 6 buttons in it.

Normally set display:none for this buttons div, While hover that image from javascript function you can set display:block from javascript then that six buttons will display on the image.

The following is the code for witing onclick event for button.

<button type="button" Onclick="alert('hai')">Click Me!</button>

Answer 4

OK, the only solution that comes to my mind is making use of image maps and jquery.

I have built a rough demo, you may have to enhance it as per your requirements.

Here is a demo

All the boxes except the one in the center is an image map. When you hover you mouse over any of the image maps, I show a button with the help of jquery.