ASP.NET Custom Server Controls: Combining ImageHoverButton and RoundCorneredButton - How is it different from my previous controls?
(Page 8 of 8 )
If you observe carefully, each and every cell (and image) I render is provided with a unique ID (which was not introduced in the article about the “RounderCorneredButton” control). In that way, I can get hold of each and every cell (and image) through my JavaScript. Within my JavaScript, I will be able to access each of those cells (or images) during hovering, and change to different images (hovering images) when necessary. You will be able to understand this from the following JavaScript I included.
RaiseEventPrivate Function getJS4MouseOver(ByVal FunctionName As String)As String
Dim js As String
js = "<script language=javascript>"
js &= "function " & FunctionName & "() "
js &= "{"
js &= " document.all('" & Me.ClientID &
"_img_TopLeft').src = '" & Me.ImageTopLeftURL.Trim.Replace(".",
"_ov.") & "'; "
js &= " document.all('" & Me.ClientID &
"_td_TopMiddle').style.backgroundImage='url(" &
Me.ImageTopMiddleURL.Trim.Replace(".", "_ov.") & ")'; "
js &= " document.all('" & Me.ClientID &
"_img_TopRight').src = '" & Me.ImageTopRightURL.Trim.Replace(".",
"_ov.") & "'; "
js &= " document.all('" & Me.ClientID &
"_td_MiddleLeft').style.backgroundImage='url(" &
Me.ImageMiddleLeftURL.Trim.Replace(".", "_ov.") & ")'; "
js &= " document.all('" & Me.ClientID &
"_td_MiddleMiddle').style.backgroundImage='url(" &
Me.ImageMiddleMiddleURL.Trim.Replace(".", "_ov.") & ")'; "
js &= " document.all('" & Me.ClientID &
"_td_MiddleRight').style.backgroundImage='url(" &
Me.ImageMiddleRightURL.Trim.Replace(".", "_ov.") & ")'; "
js &= " document.all('" & Me.ClientID &
"_img_BottomLeft').src = '" & Me.ImageBottomLeftURL.Trim.Replace
(".", "_ov.") & "'; "
js &= " document.all('" & Me.ClientID &
"_td_BottomMiddle').style.backgroundImage='url(" &
Me.ImageBottomMiddleURL.Trim.Replace(".", "_ov.") & ")'; "
js &= " document.all('" & Me.ClientID &
"_img_BottomRight').src = '" & Me.ImageBottomRightURL.Trim.Replace(".", "_ov.") & "'; "
js &= "}"
js &= "</script>"
Return js
End Function
Even though the above code looks a bit clumsy, it just emits JavaScript to change all images at the “OnMouseOver” event. The most important issue to understand is “what image is it getting for mouse hover”? If you assign “TopLeft.gif” to “ImageTopLeftURL” property, the JavaScript automatically searches for “TopLeft_ov.gif” and displays it at the “hover” event. I implemented this to maintain consistency and lessen the burden at design time of assigning properties even for the “hover” event. Of course, you will be able to modify the above code very easily according to your requirements.
Even though I started emitting exclusive HTML using “writer” methods, you can do the same by extending your control from the already existing “table” web control. If you directly extend it from the “table” web control, you can work with an almost .NET based ASP.NET framework model to add table rows and cells, which looks convenient and even readable. But then we need to understand a bit about the “rendering” issues of child controls within the parent control.
I leave it to the developers to further enhance the same control. The areas of improving the same control would include eventing, better JavaScript, data-binding, cross browser support, and so forth. Good luck.
Any comments, suggestions, bugs, errors, feedback etc. are highly appreciated at jag_chat@yahoo.com.
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
