MouseOver by adding an attribute

markhh · May 23rd, 2013, 07:58 AM

Hello Everyone, i am trying to do a mouseOver event in my Default.aspx page where the image changes on a mouseOver. The code I have below trying to add an attribute which changes the imageButton picture does not work, when the page is requested it gets rendered fine but when i enter the imageButton control with my cursor the browser comes up "Web Page Error". When i dubug the debugger comes up with this "breaking on JScript run time error - Object expected".

Any help would be greatly appreciated.
Mark

Default.aspx

Code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    </head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ImageButton ID="ImageButton1" runat="server" Height="139px" 
            ImageUrl="~/Images/Picture2.jpg" Width="158px" />
        </div>
    </form>
</body>
</html>

Page Behind

Code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
    ImageButton1.Attributes["onMouseOver"] = "javascript:swapImageIn('~/Images/Picture1.jpg');return true;";
    ImageButton1.Attributes["onMouseOut"] = "javascript:swapImageOut();return true;";
    }
}

markhh · May 23rd, 2013, 05:45 PM

I have also tried the below but it still won't work

Mark

Code:

ImageButton1.Attributes.Add("onMouseOver", "javascript:swapImageIn('~/Images/Picture2.jpg');return true;");

Imar · May 24th, 2013, 03:12 AM

Hi there,

You haven't defined the swapImage JavaScript function anywhere. Does your page include it somehow or does it have a reference to an external JavaScript file you didn't post?

Cheers,

Imar

markhh · May 24th, 2013, 08:49 AM

Hi Imar and thanks for your reply. No I have not defined the swapImage javascript nor is there an external reference.

Would it be something like

Quote:

Thanks Again
Mark

Imar · May 24th, 2013, 10:38 AM

Nope, you need to define a real function using something like.

function swapImageIn()
{
// .... Code here
}

Did you copy this code from somewhere? If so, didn't they include the swapImageIn and Out functions?

You may want to Google a bit for this as there are lots of useful tutorials out there. For example:

http://www.htmlite.com/JS019.php

http://stackoverflow.com/questions/1...image-on-hover

Cheers,

Imar

markhh · May 27th, 2013, 04:34 AM

Hi Imar, yes I will check the suggested sites out,

Thanks again
Mark