Login control - image button with text over it

D

David Thielen

Hi;

How can I set the Login control, LoginButton to be a bitmap button I pass
with text I pass over it. I tried the following:
LoginButtonType="Image" LoginButtonText="Login"
LoginButtonImageUrl="Images/LoginButton.jpg"
and got no text.

I tried this:
LoginButtonType="Button" LoginButtonText="Login"
LoginButtonImageUrl="Images/LoginButton.jpg"

And did not get my bitmap. How can I do this?

--
thanks - dave
david_at_windward_dot_net
http://www.windwardreports.com

Cubicle Wars - http://www.windwardreports.com/film.htm
 
S

Steven Cheng[MSFT]

Hello Dave

Generally, Login control's LoginButton will be represented by a <input
type="submit" /> or <input type="image" .../> html element according to its
button type(normal or image button). However, in either case, it can
display text only(or image only).

For your scenario, you want to display text over image, I think what you
need is a button which has text property and with a background image which
display the image in background. To do think you can use the css style to
set the background image effect. e.g.

===================
<input type="submit" value="My Image BAckground Button"

style="font-size:20;height:41px;width:258px;background-image:url(http://www.
asp.net/images/1.png)" />
===================

In Login Control, you may need to convert it to template based and
customize the converted login button's aspx markup as you like. e.g.

===============
<asp:Login ID="Login1" runat="server"
HelpPageIconUrl="http://wcf.netfx3.com/Themes/default/images/sidebar_title_s
earch.gif"
HelpPageText="ddd" HelpPageUrl="Http://www.asp.net">
<LayoutTemplate>
<table border="0" cellpadding="1" cellspacing="0"
style="border-collapse: collapse">
<tr>
<td>
<table border="0" cellpadding="0">
<tr>
<td align="center" colspan="2">
Log In</td>
</tr>
<tr>
<td align="right">
<asp:Label ID="UserNameLabel"
runat="server" AssociatedControlID="UserName">User Name:</asp:Label></td>
<td>
<asp:TextBox ID="UserName"
runat="server"></asp:TextBox>
<asp:RequiredFieldValidator
ID="UserNameRequired" runat="server" ControlToValidate="UserName"
ErrorMessage="User Name is
required." ToolTip="User Name is required."
ValidationGroup="Login1">*</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td align="right">
<asp:Label ID="PasswordLabel"
runat="server" AssociatedControlID="Password">Password:</asp:Label></td>
<td>
<asp:TextBox ID="Password"
runat="server" TextMode="Password"></asp:TextBox>
<asp:RequiredFieldValidator
ID="PasswordRequired" runat="server" ControlToValidate="Password"
ErrorMessage="Password is
required." ToolTip="Password is required."
ValidationGroup="Login1">*</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td colspan="2">
<asp:CheckBox ID="RememberMe"
runat="server" Text="Remember me next time." />
</td>
</tr>
<tr>
<td align="center" colspan="2"
style="color: red">
<asp:Literal ID="FailureText"
runat="server" EnableViewState="False"></asp:Literal>
</td>
</tr>
<tr>
<td align="right" colspan="2">
<asp:Button ID="LoginButton"
runat="server"
CommandName="Login" Text="Log In"
ValidationGroup="Login1"
style="background-image:url(http://msdn2.microsoft.com/msdn/Controls/MTPS_Ba
nnerCtrl/en-us/msdn.jpg)" Height="28px" Width="96px" />
</td>
</tr>
<tr>
<td colspan="2">
<img alt="ddd"
src="http://wcf.netfx3.com/Themes/default/images/sidebar_title_search.gif"
style="border-top-width: 0px;
border-left-width: 0px; border-bottom-width: 0px;
border-right-width: 0px"
/><asp:HyperLink ID="HelpLink" runat="server"
NavigateUrl="Http://www.asp.net">ddd</asp:HyperLink>
</td>
</tr>
</table>
</td>
</tr>
</table>
</LayoutTemplate>

</asp:Login>
=============================

Hope this helps.


Sincerely,

Steven Cheng

Microsoft MSDN Online Support Lead



This posting is provided "AS IS" with no warranties, and confers no rights.
 
M

MikeS

I'm sorry Dave, I'm afraid I can't do that.

Well, since you asked.


One way may be to create a handler to use as the source of your image
that uses System.Drawing to create a bitmap from an image file, draws
text over it writes that as the response.

A google for [asp.net watermark] turms up some thimgs.
 
S

Steven Cheng[MSFT]

Hello Dave,

What do you mean for the below behavior
==========
<input type="submit" value="My Image BAckground Button"

style="font-size:20;height:41px;width:258px;background-image:url(http://www.
asp.net/images/1.png)" />
===========

Do you mean the text can not display over the background image? It display
well (black text over background image). So far this is the only means I
know for web page/html element without constructing a customized image as
Mike has mentioned.

Sincerely,

Steven Cheng

Microsoft MSDN Online Support Lead



This posting is provided "AS IS" with no warranties, and confers no rights.
 
S

Steven Cheng[MSFT]

Thanks for your reply Dave,

Does the problem specific to the bitmap file. have you tried convert it to
a gif or jpg file?

I've tested all the image types include jpg, gif, bmp, png and they all
works well.

Sincerely,

Steven Cheng

Microsoft MSDN Online Support Lead


This posting is provided "AS IS" with no warranties, and confers no rights.
 
M

MikeS

<%@ WebHandler Language="VB" Class="ImageHandler" %>

Imports System
Imports System.Web
Imports System.Drawing
Imports System.Drawing.Imaging
Imports System.IO
Imports System.ComponentModel

Public Class ImageHandler : Implements IHttpHandler

Private _brush As Brush = Brushes.White
Private _size As Integer = 12
Private _face As FontFamily = New FontFamily("Verdana")
Private _style As FontStyle = FontStyle.Regular
Private _text As String = ""
Private _file As String = ""

Public Sub ProcessRequest(ByVal context As HttpContext) Implements
IHttpHandler.ProcessRequest
Init(context)

Dim bmp As Bitmap = New Bitmap(_file)
Dim g As Graphics = Graphics.FromImage(bmp)
Dim f As New Font(_face, _size, _style, GraphicsUnit.Point)
Dim t As SizeF = g.MeasureString(_text, f)
Dim x As Single = (bmp.Size.Width - t.Width) / 2
Dim y As Single = (bmp.Size.Height - t.Height) / 2

g.DrawString(_text, f, _brush, x, y)

Dim ms As New MemoryStream() ' Use this else bitmap locks image
file.
bmp.Save(ms, ImageFormat.Jpeg)
bmp.Dispose()

context.Response.ContentType = "image/jpeg"
context.Response.BinaryWrite(ms.ToArray)
End Sub

Private Sub Init(ByVal Context As HttpContext)
With Context
For Each s As String In .Request.QueryString
Try
Select Case s
Case "file"
_file = .Server.MapPath(.Request("file"))
Case "brush"
Dim cc As New ColorConverter
_brush = New
SolidBrush(cc.ConvertFromString(.Request("brush")))
Case "face"
Dim fc As New FontConverter
_face =
CType(fc.ConvertFromString(.Request("face")), Font).FontFamily
Case "size"
_size = .Request("size")
Case "style"
_style =
System.Enum.Parse(GetType(FontStyle), .Request("style"))
Case "text"
_text = .Request("text")
End Select
Catch ex As Exception
End Try
Next
End With
End Sub

Public ReadOnly Property IsReusable() As Boolean Implements
IHttpHandler.IsReusable
Get
Return False
End Get
End Property

End Class
 
S

Steven Cheng[MSFT]

Thanks for the followup.

Glad that you've got a working solution now.

If there is any further things we can help, please feel free to post here.

Sincerely,

Steven Cheng

Microsoft MSDN Online Support Lead


This posting is provided "AS IS" with no warranties, and confers no rights.
 
M

MikeS

' A little cleaner Init

Private Sub Init(ByVal Context As HttpContext)
With Context
For Each s As String In .Request.QueryString
Dim v As String = .Request.QueryString(s)
Try
Select Case s
Case "file"
_file = .Server.MapPath(v)
Case "brush"
Dim cc As New ColorConverter
_brush = New
SolidBrush(cc.ConvertFromString(v))
Case "face"
Dim fc As New FontConverter
_face = CType(fc.ConvertFromString(v),
Font).FontFamily
Case "size"
_size = v
Case "style"
_style =
System.Enum.Parse(GetType(FontStyle), v)
Case "text"
_text = v
End Select
Catch ex As Exception
End Try
Next
End With
End Sub
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Login button code 8
Login HelpPageIconUrl is the help link 2
Need button control that... 7
Problem with a login script, SESSION user rights and put this together so it works with the other pages and MySQL. Code examples. 2
all bitmap button in grid? 3
Login form no longer working 2
Disable the prev button in a wizard 2
Fading effect between play and play-over and pause and pause-over 0

Members online

Total: 60 (members: 3, guests: 57)
Robots: 283

Forum statistics

Threads
473,982
Messages
2,570,185
Members
46,737
Latest member
Georgeengab

Latest Threads

Top