• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 763
  • Last Modified:

imagebutton mouse over event

I want to show an image control on mouse over event of an imagebutton control

this is my image button
 <asp:ImageButton ID="ImageButton1" runat="server"
                    ImageUrl="~/images/newimages/selectBtn.jpg" />

and my image control is this one
<asp:Image ID="Image31" runat="server"
                    ImageUrl="~/walkthrough/images/Blank.jpg" />
0
gianitoo
Asked:
gianitoo
  • 2
1 Solution
 
gangwischCommented:
imagebutton1.attributes.add("onmouseover()","changeimg()")

then write a javascript function to change image31

function changeimg()
{
document.myform.image31.src='myimage.jpg';
}

in order to switch the image back to it's original state use onmouseout:

imagebutton1.attributes.add("onmouseout()","changebackimg()")
0
 
gianitooAuthor Commented:
not working??
I am using asp.net page  
<%@ Page Title="" Language="VB" MasterPageFile="~/MasterPageB.master" %>
 
<script runat="server">
 
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
        ' ImageButton1.Attributes.Add("onmouseover", "myfunction(this, 'images/newimages/selectBtnRoll.jpg')")
        ImageButton1.Attributes.Add("onmouseover()", "changeimg()")
        '  ImageButton1.Attributes.Add("onmouseout", "myfunction(this, 'images/newimages/selectBtn.jpg')")
        ImageButton1.Attributes.Add("onmouseout()", "changebackimg()")
        ImageButton2.Attributes.Add("onmouseover", "myfunction(this, 'images/newimages/selectBtnRoll.jpg')")
        ImageButton2.Attributes.Add("onmouseout", "myfunction(this, 'images/newimages/selectBtn.jpg')")
        ImageButton3.Attributes.Add("onmouseover", "myfunction(this, 'images/newimages/selectBtnRoll.jpg')")
        ImageButton3.Attributes.Add("onmouseout", "myfunction(this, 'images/newimages/selectBtn.jpg')")
        ImageButton4.Attributes.Add("onmouseover", "myfunction(this, 'images/newimages/selectBtnRoll.jpg')")
        ImageButton4.Attributes.Add("onmouseout", "myfunction(this, 'images/newimages/selectBtn.jpg')")
        'Image31.Attributes.Add("onmouseover", "myfunction(this, 'images/newimages/125bf.jpg')")
        'Image31.Attributes.Add("onmouseover", "myfunction(this, 'images/newimages/125bf.jpg')")
        
 
    End Sub
</script>
 
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<script language=Javascript>
 
    function changeimg() {
        document.myform.image31.src = 'images/newimages/125bf.jpg';
    }
    function changebackimg() {
        document.myform.image31.src = 'walkthrough/images/Blank.jpg';
    }
 
    function myfunction(me, path) {
        me.src = path;
    }
 
</script>
 
    <table class="style5">
        <tr>
            <td>
 
    <p class="titleboldblack">
        SELECT the mill based off your<br />
        price range<br />
        <br />
                </p>
            </td>
            <td class="titlemenu" rowspan="2" valign="top">
               <span class="titleboldblacksmall">What is a board foot?</span> 
                <br />
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
                incididunt ut labore et dolore magna aliqua.
                <br />
                <br />
                <asp:Image ID="Image31" runat="server" 
                    ImageUrl="~/walkthrough/images/Blank.jpg" />
            </td>
        </tr>
        <tr>
            <td>
    <table align="center" style="width: 500px">
        <tr>
            <td class="titleboldblack">
                $4000 - $11,999<br />
                <asp:ImageButton ID="ImageButton1" runat="server" 
                    ImageUrl="~/images/newimages/selectBtn.jpg" />
                <br />
                <br />
            </td>
            <td class="titleboldblack">
                $12,000 - $28,999<br />
                <asp:ImageButton ID="ImageButton2" runat="server" 
                    ImageUrl="~/images/newimages/selectBtn.jpg" />
                </td>
        </tr>
        <tr>
            <td class="titleboldblack">
                $29,000 - $34,999<br />
                <asp:ImageButton ID="ImageButton3" runat="server" 
                    ImageUrl="~/images/newimages/selectBtn.jpg" />
                </td>
            <td class="titleboldblack">
                $35,000 - $48,000<br />
                <asp:ImageButton ID="ImageButton4" runat="server" 
                    ImageUrl="~/images/newimages/selectBtn.jpg" />
                </td>
        </tr>
    </table>
            </td>
        </tr>
    </table>
</asp:Content>

Open in new window

0
 
gangwischCommented:
because  you dont have the images placed inside a form tag
<form name="myform" id="myform>
<!--images>
</form>
0
 
urvinayanCommented:
I see that u are using master page.. So do the following
do imagebutton1.attributes.add("onmouseover()","changeimg()") in codebehind
as gangwisch says...
then change
function changeimg()
{
document.myform.image31.src='myimage.jpg';
}
as
function changeimg()
{
document.getElementById('<%image31.ClientID%>').src='myimage.jpg';
}
 
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: CompTIA Cloud+

The CompTIA Cloud+ Basic training course will teach you about cloud concepts and models, data storage, networking, and network infrastructure.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now