Go Premium for a chance to win a PS4. Enter to Win

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

Trying to add image rollover for LinkButton in ascx table

I have a custom control that has a menu with a HyperLink in each cell.  It works great, but I would like to have the image flip on mouse over.  Here is the HTML for one of the cells:

<asp:TableCell HorizontalAlign="Center" ID="cellHome" style="Display:">
     <asp:HyperLink runat="server" NavigateUrl="Home.aspx" ForeColor="#291C52"
       ID="lnkHome"> <img src="Images/home.jpg" border="0"></asp:HyperLink>             </asp:TableCell>

I cannot add an onMouseOver event.  For instance, when the user drags the mouse over this cell in the menu, I would like the image to be home_down.jpg instead.

can someone help?  Thanks so much!

0
MrDeveloper
Asked:
MrDeveloper
  • 2
1 Solution
 
iboutchkineCommented:
You can try it with javascript

onmouseover="javascript: this.style.backgroundColor='#FFFFC0';"

I dont know hte syntax to change the picture. Maybe someone will help you here

0
 
rovermCommented:
I've build this once for a menucontrol as well.
Add this to your Page_load event, NOT postback:


        Dim strScript As String = "<script language='javascript'>" & vbCrLf
        strScript += "function imagetextchange()" & vbCrLf
        strScript += "{" & vbCrLf
        strScript += "if (imagetextchange.arguments.length==0) {return}" & vbCrLf
        strScript += "var tblrw=imagetextchange.arguments[0];" & vbCrLf
        strScript += "var inout=imagetextchange.arguments[1];" & vbCrLf
        strScript += "var idimg=tblrw.id;" & vbCrLf
        strScript += "var sbar=tblrw.winsbar; " & vbCrLf
        strScript += "if (!sbar) {sbar=''}" & vbCrLf
        strScript += "var scursor='';" & vbCrLf
        strScript += "var imgsrc, txtstyle;" & vbCrLf
        strScript += "if (inout=='over') " & vbCrLf
        strScript += "{ imgsrc=tblrw.imghover;scursor='hand';} else " & vbCrLf
        strScript += "{ imgsrc=tblrw.imgnormal;sbar='';}" & vbCrLf
        strScript += "document.body.style.cursor=scursor;" & vbCrLf
        strScript += "window.status=sbar;" & vbCrLf
        strScript += "if (idimg)" & vbCrLf
        strScript += "{ var plaatje=document.getElementById(idimg);" & vbCrLf
        strScript += "if ((plaatje)&&(imgsrc)) {plaatje.src=imgsrc;} }" & vbCrLf
        strScript += "}" & vbCrLf
        strScript += "</script>" & vbCrLf
        Me.Page.RegisterClientScriptBlock("imagebuttonmenuscript", strScript)

Then build the image tag like this:

<img id='yourpicid' src='yourpictureurl' imgnormal='yourpictureurl' imghover='yourhoverpictureurl' winsbar='statusbartext' onmouseover=javascript:imagetextchange(this,'over');  onmouseout=javascript:imagetextchange(this,'');>

As you can see I've added some custom tags:
imgnormal: the url to the 'normal' picture
imghover: the url to the hover picture
winsbar: the text to appear in the statusbar

I've got also a version in which you can show a text under the image. If you want that, just let me know!

D'Mzz!
RoverM
0
 
MrDeveloperAuthor Commented:
Thanks so much for the help roverm!
0
 
rovermCommented:
Anytime! Thanks for the points!

D'Mzz!
RoverM
0

Featured Post

Get free NFR key for Veeam Availability Suite 9.5

Veeam is happy to provide a free NFR license (1 year, 2 sockets) to all certified IT Pros. The license allows for the non-production use of Veeam Availability Suite v9.5 in your home lab, without any feature limitations. It works for both VMware and Hyper-V environments

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