<img> tag within <button> tag

i want to raise onclick event of <img> tag which is inside the <button> tag
infoplusAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Amandeep Singh BhullarCommented:
can you post the code.
0
Jini JoseSenior .Net DeveloperCommented:
why you need a img tag inside a button? there is another imagebutton control in asp.net.
0
infoplusAuthor Commented:
<button type="button" name="btnUp" id="id_btnUp" onclick="btnClick()">Click Me<img alt="submit" src="images/images.jpg" hspace="0" border="0" align="top" onclick="btnImg()"> /></button>

i have to do something on button click and do something for img click.
what should i do, sir?
0
C++ 11 Fundamentals

This course will introduce you to C++ 11 and teach you about syntax fundamentals.

Jini JoseSenior .Net DeveloperCommented:
so you are calling  javascript functions on the click events or server events ?
0
infoplusAuthor Commented:
No sir i am creating a control. so i am using html tag. i could not use asp tag
0
infoplusAuthor Commented:
i have to call separate click events
0
Jini JoseSenior .Net DeveloperCommented:
can you please tell what for you doing this ?
0
infoplusAuthor Commented:
i am creating an usercontrol. when i click on the button text, i wil come one javascript function. and when i click image on the button, i will call another javascript function. Now i couldnt raise separate click event. When i click on image "btnClick" only calls..
0
Amandeep Singh BhullarCommented:
In case of nested controls, you cannot fire the event of the child.
In your case Image click event will never be fired
0
Jini JoseSenior .Net DeveloperCommented:
why couldnt u use two controls seperately ?
0
infoplusAuthor Commented:
Ok sir. then what should i do for this situation? can you help me?
0
infoplusAuthor Commented:
I have to display the image within the button control. What to do for this?
0
Jini JoseSenior .Net DeveloperCommented:
you can use two image for doing two click events
<html>
<head>
    <title>Untitled Page</title>

    <script type="text/javascript">
    function btnClick()
    {
        alert('Btn clicked');
    }
    function btnImg()
    {
        alert('Img clicked');
    }
    </script>

</head>
<body>
    <img alt="submit" src="1.gif" width="50" height="50" hspace="0" border="0"
        align="top" onclick="btnImg();">
        <img alt="submit" src="2.gif" width="50" height="50" hspace="0" border="0"
        align="top" onclick="btnClick();">
</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
infoplusAuthor Commented:
i need a single control to do these two tasks.. but u have given 2 separate images
0
nmarunCommented:
AFAIK, the current model of Javascript doe snot allow for this. You're better off separating the two controls and then calling different Javascript functions on each control.

Arun
0
Amandeep Singh BhullarCommented:
In case case i can suggest you to use the image map.
This is the only way you can do your task

Check the link for the same
http://www.javascriptkit.com/howto/imagemap.shtml

Hope this will help you
0
infoplusAuthor Commented:
No sir.. not like that... anyway thanks for your try
0
Dhanasekaran SengodanCommented:
Solution 1 :
==========

<html>
<head>
    <title>Untitled Page</title>

    <script type="text/javascript">
    function btnClick()
    {
        alert('Btn clicked');
        btnImg();
    }
    function btnImg()
    {
        alert('Img clicked');
    }
    </script>
<style>
.buttons
{
background:url(/images/Btn.PNG) no-repeat;
cursor:pointer;
width: 200px;
height: 100px;
border: none;
}
</style>
</head>
<body>
  <button type="button" name="btnUp" id="id_btnUp" onclick="javascript:btnClick()" class="buttons">Click Me </button>
</body>
</html>


Solution : 2
=========

http://sophie-g.net/jobs/css/e_buttons.htm



0
raja_ind82Commented:
HI,
Small work around for your situation. Please try this.

Regards,
Raja Muthaiah
<html>
<head>
    <title>Untitled Page</title>

    <script type="text/javascript">
    function btnClick()
    {
	if(hdnMode.value=="M")
	        alert('Image clicked');
	else
	        alert('Btn clicked');

    }
    function btnImg()
    {
        alert('Img clicked');
    }
    function btnMouse()
    {
	hdnMode.value="M";
    }
function btnMouseOut()
    {

	hdnMode.value="";
    }

    </script>

</head>
<body>
<input type="hidden" name="hdnMode" value="">
<button type="button" name="btnUp" id="id_btnUp" onclick="btnClick()">Click Me
<img alt="submit" src="images/images.jpg" hspace="0" border="0" align="top" onclick="btnImg()"
 onmouseover="btnMouse();" onmouseout="btnMouseOut();"/>
</button>

</body>
</html>

Open in new window

0
ultrawebsitesCommented:
Hi there
Perhaps you can post an image of what you want the button and image to look like?
And perhaps explain what you want to achieve, as maybe there is a better way to achieve it too?
Cheers
Matt
0
raja_ind82Commented:
HI,
Have you check my solution. Its exactly fulfill your requirement.
Please let me know if you have any quries...

regards,
Raja Muthaiah
0
nmarunCommented:
Raja, your solution does not work. You cannot access controls in javascript by just their name. You need do find them by their id using document.getElementById().

The below worked for me and also note that you don't need a click event on your image.

Arun

<input type="hidden" name="hdnMode" value="" id="hdnMode" />
<button type="button" name="btnUp" id="Button1" onclick="btnClick()">
    Click Me
    <img alt="submit" src="images/home.png" hspace="0" border="0" align="top"
        onmouseover="btnMouse();" onmouseout="btnMouseOut();" />
</button>

<script type="text/javascript">
function btnClick() {
    if (document.getElementById("hdnMode").value == "M")
        alert('Image clicked');
    else
        alert('Btn clicked');

}

function btnMouse() {
    document.getElementById("hdnMode").value = "M";
}
function btnMouseOut() {

    document.getElementById("hdnMode").value = "";
}
</script>

Open in new window

0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.