Home/ Questions/Q 143181
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T08:03:17+00:00

I have been learning how to create dynamic images and dynamic stylesheets using ASP.NET

  • 0

I have been learning how to create dynamic images and dynamic stylesheets using ASP.NET 3.5. My reasoning behind this is I have a web page that I want to change the header background image (set with css) automatically. Check below for my test script:

<%@ Page Language='VB' AutoEventWireup='false' CodeFile='Default.aspx.vb' 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>     <%         Response.Output.WriteLine('<link rel=''Stylesheet'' type=''text/css'' href=''style.aspx?t={0}&v={1}'' />', oType, oText)     %> </head> <body>     <form id='form1' runat='server' action='Default.aspx'>         <asp:ScriptManager ID='ScriptManager1' runat='server' />         <asp:UpdatePanel ID='UpdatePanel1' runat='server'>             <ContentTemplate>                 <div class='testheader'>&nbsp;</div>                 <asp:Label ID='Label1' runat='server' Text='Label'></asp:Label> <%-- for testing --%>             </ContentTemplate>             <Triggers>                 <asp:AsyncPostBackTrigger ControlID='Button1' EventName='Click' />             </Triggers>         </asp:UpdatePanel>         <asp:Button ID='Button1' runat='server' Text='Button' />     </form> </body> </html>

So nothing special about the default form page above, it has an DIV styled to have the dynamic background image and a Label, which as the comment indicates is just to make sure my AsyncPostBack is functioning properly.

Partial Class _Default     Inherits System.Web.UI.Page     Public oType As String = 'm'     Public oText As String = 'Genius on the Web'     Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click         Select Case oType             Case 'm'                 oType = 'c'             Case 'c'                 oType = 'm'         End Select         Label1.Text = Now.ToString     End Sub End Class

Again, nothing fancy. Just swaps the two values I have temporarily hard-coded into the program, and updates the Label text.

This is my dynamic stylesheet:

<%@ Page Language='VB' %>  <%       Response.ContentType = 'text/css'     Dim qString As String = Request.QueryString('t')     Dim bText As String = Request.QueryString('v')     If String.IsNullOrEmpty(qString) Then qString = 'blank'     If String.IsNullOrEmpty(bText) Then bText = 'Placeholder'     Dim theColor, H1size, bannerImg As String     Select Case qString         Case 'c'             theColor = 'green'             H1size = 30         Case 'm'             theColor = 'blue'             H1size = 26         Case Else             theColor = 'red'     End Select     bannerImg = String.Format('image.aspx?t={0}&p={1}', Server.UrlEncode(bText), qString)      %>  body { background-color: <%=theColor%>; } .testheader { background: url(<%=bannerImg%>); background-repeat:no-repeat; height:120px; } .testclass { font-size: <%=H1size%>px; border:1px solid yellow; margin-bottom:2em; }

Finally, here is my dynamic image script:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load     Response.ContentType = 'image/jpeg'     Response.Clear()     Response.BufferOutput = True       Try         Dim oText As String = Server.HtmlDecode(Request.QueryString('t'))         If String.IsNullOrEmpty(oText) Then oText = 'Placeholder'          Dim oPType As String = Server.HtmlDecode(Request.QueryString('p'))         If String.IsNullOrEmpty(oPType) Then oPType = 'none'          Dim imgPath As String = ''          Select Case oPType             Case 'c'                 imgPath = 'img/banner_green.jpg'             Case 'm'                 imgPath = 'img/banner_blue.jpg'             Case Else                 Throw New Exception('no ptype')         End Select          Dim oBitmap As Bitmap = New Bitmap(Server.MapPath(imgPath))          Dim oGraphic As Graphics = Graphics.FromImage(oBitmap)         Dim frontColorBrush As New SolidBrush(Color.White)          Dim oFont As New Font(FONT_NAME, 30)          Dim oInfo() As ImageCodecInfo = ImageCodecInfo.GetImageEncoders         Dim oEncoderParams As New EncoderParameters(1) 'jpeg         Dim xOffset As Single = Math.Round((oBitmap.Height - oFont.Height) / 2, MidpointRounding.ToEven)          Dim oPoint As New PointF(275.0F, xOffset + 10)          oEncoderParams.Param(0) = New EncoderParameter(Encoder.Quality, 100L)          oGraphic.TextRenderingHint = Drawing.Text.TextRenderingHint.AntiAlias         oGraphic.DrawString(oText, oFont, frontColorBrush, oPoint)          oBitmap.Save(Response.OutputStream, oInfo(1), oEncoderParams)          Response.Output.Write(oBitmap)          oBitmap.Dispose()         oGraphic.Dispose()          Response.Flush()     Catch ex As Exception      End Try End Sub

So armed with this information, I want to know if it is possible for the AsyncPostBack refresh the CSS so that the image will change when I click Button2. I am open for suggestions and/or ‘thats the stupid/hard way to do this, try this…’ type of feedback.

Thanks guys!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Since you said you’re open to suggestions… why are you set on doing this with the AsyncPostBack and CSS? Why not just have a javascript onclick event to dynamically change the image when you click Button2?

    edit (in response to post below):

    There would be no post back (if that’s what you mean by flickering): you can still use the AsyncPostBack for whatever else you’re doing, and then have an additional javascript function fired off onclick that would do something like

    document.getElementById('headerimg').src='2.jpg';

    This would change the image to new source file without any page refresh.

    • 0