Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

<img> tag within <button> tag

Posted on 2010-08-16
23
Medium Priority
?
628 Views
Last Modified: 2012-05-10
i want to raise onclick event of <img> tag which is inside the <button> tag
0
Comment
Question by:infoplus
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 5
  • 3
  • +4
23 Comments
 
LVL 19

Expert Comment

by:Amandeep Singh Bhullar
ID: 33451669
can you post the code.
0
 
LVL 10

Expert Comment

by:Jini Jose
ID: 33451674
why you need a img tag inside a button? there is another imagebutton control in asp.net.
0
 

Author Comment

by:infoplus
ID: 33451676
<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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 10

Expert Comment

by:Jini Jose
ID: 33451685
so you are calling  javascript functions on the click events or server events ?
0
 

Author Comment

by:infoplus
ID: 33451686
No sir i am creating a control. so i am using html tag. i could not use asp tag
0
 

Author Comment

by:infoplus
ID: 33451688
i have to call separate click events
0
 
LVL 10

Expert Comment

by:Jini Jose
ID: 33451702
can you please tell what for you doing this ?
0
 

Author Comment

by:infoplus
ID: 33451714
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
 
LVL 19

Expert Comment

by:Amandeep Singh Bhullar
ID: 33451716
In case of nested controls, you cannot fire the event of the child.
In your case Image click event will never be fired
0
 
LVL 10

Expert Comment

by:Jini Jose
ID: 33451724
why couldnt u use two controls seperately ?
0
 

Author Comment

by:infoplus
ID: 33451725
Ok sir. then what should i do for this situation? can you help me?
0
 

Author Comment

by:infoplus
ID: 33451732
I have to display the image within the button control. What to do for this?
0
 
LVL 10

Accepted Solution

by:
Jini Jose earned 400 total points
ID: 33451740
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
 

Author Comment

by:infoplus
ID: 33451763
i need a single control to do these two tasks.. but u have given 2 separate images
0
 
LVL 27

Expert Comment

by:nmarun
ID: 33451766
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
 
LVL 19

Assisted Solution

by:Amandeep Singh Bhullar
Amandeep Singh Bhullar earned 400 total points
ID: 33451768
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
 

Author Comment

by:infoplus
ID: 33451836
No sir.. not like that... anyway thanks for your try
0
 
LVL 14

Assisted Solution

by:Dhanasekaran Sengodan
Dhanasekaran Sengodan earned 400 total points
ID: 33452185
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
 
LVL 14

Assisted Solution

by:raja_ind82
raja_ind82 earned 400 total points
ID: 33453099
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
 
LVL 4

Expert Comment

by:ultrawebsites
ID: 33459929
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
 
LVL 14

Expert Comment

by:raja_ind82
ID: 33461511
HI,
Have you check my solution. Its exactly fulfill your requirement.
Please let me know if you have any quries...

regards,
Raja Muthaiah
0
 
LVL 27

Assisted Solution

by:nmarun
nmarun earned 400 total points
ID: 33461886
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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I recently went through the process of creating a Calendar Control of events with the basis of using a database to keep track of the dates that are selectable, one requirement was to have the selected date pop-up in a simple lightbox.  At first this…
Today is the age of broadband.  More and more people are going this route determined to experience the web and it’s multitude of services as quickly and painlessly as possible. Coupled with the move to broadband, people are experiencing the web via …
Video by: ITPro.TV
In this episode Don builds upon the troubleshooting techniques by demonstrating how to properly monitor a vSphere deployment to detect problems before they occur. He begins the show using tools found within the vSphere suite as ends the show demonst…
In this video, Percona Solution Engineer Dimitri Vanoverbeke discusses why you want to use at least three nodes in a database cluster. To discuss how Percona Consulting can help with your design and architecture needs for your database and infras…

604 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question