Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 630
  • Last Modified:

<img> tag within <button> tag

i want to raise onclick event of <img> tag which is inside the <button> tag
0
infoplus
Asked:
infoplus
  • 8
  • 5
  • 3
  • +4
5 Solutions
 
Amandeep Singh BhullarCommented:
can you post the code.
0
 
Jini Jose.Net Team LeadCommented:
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Jini Jose.Net Team LeadCommented:
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 Jose.Net Team LeadCommented:
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 Jose.Net Team LeadCommented:
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 Jose.Net Team LeadCommented:
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
 
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

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 8
  • 5
  • 3
  • +4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now