Dynamic GDI+ meets CSS

The Code: nav.aspx

	
<%@ Import Namespace="System.Drawing" %>
 <%@ Import Namespace="System.Drawing.Imaging" %>
 <script language="VB" runat="server">
 Sub Page_Load(sender as Object, e as EventArgs)
  Dim baseMap as Bitmap = new Bitmap(210, 106)
  Dim myGraphic as Graphics = Graphics.FromImage(baseMap)
  Dim upBrush as SolidBrush = new SolidBrush(Color.FromArgb(255,255,255))
  Dim downBrush as SolidBrush = new SolidBrush(Color.FromArgb(55,55,0))
  Dim fontTitle as Font = new Font("tahoma", 24)
  myGraphic.FillRectangle(new SolidBrush(Color.White), 0, 0, 210, 160)  
  
  myGraphic.FillRectangle(new SolidBrush(Color.lightblue), 2, 2, 50, 50)  
  myGraphic.FillRectangle(new SolidBrush(Color.lightblue), 54, 2, 50, 50)  
  myGraphic.FillRectangle(new SolidBrush(Color.lightblue), 106, 2, 50, 50)  
  myGraphic.FillRectangle(new SolidBrush(Color.lightblue), 158, 2, 50, 50)  
  
  
  myGraphic.FillRectangle(new SolidBrush(Color.red), 2, 54, 50, 50)  
  myGraphic.FillRectangle(new SolidBrush(Color.yellow), 54, 54, 50, 50)  
  myGraphic.FillRectangle(new SolidBrush(Color.green), 106, 54, 50, 50)  
  myGraphic.FillRectangle(new SolidBrush(Color.blue), 158, 54, 50, 50)  
  
  
  myGraphic.DrawString("1", fontTitle, upBrush, 10, 10)
  myGraphic.DrawString("1", fontTitle, downBrush, 10, 60)
  myGraphic.DrawString("2", fontTitle, upBrush, 64, 10)
  myGraphic.DrawString("2", fontTitle, downBrush, 64, 60)
  myGraphic.DrawString("3", fontTitle, upBrush, 116, 10)
  myGraphic.DrawString("3", fontTitle, downBrush, 116, 60)
  myGraphic.DrawString("4", fontTitle, upBrush, 168, 10)
  myGraphic.DrawString("4", fontTitle, downBrush, 168, 60)  
   Response.ContentType = "image/jpeg"
  baseMap.Save(Response.OutputStream, ImageFormat.JPEG)

  myGraphic.Dispose()
  baseMap.Dispose()
 End Sub
 </script>
%>

The Code 2: nav.html

	
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<head>
 <title>nav</title>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <style media="screen">

#iconmenu {
	position:relative;
	margin:10px auto;
	padding:3px;
	width:206px;
	height:52px;
	background:url(pattern.gif)
}

#iconmenu li {
	width:50px;
	height:50px;
	position:absolute;
	top:2px;
	background:url(nav.aspx) 0 0 no-repeat;
	display:block;
	list-style:none
}

#iconmenu a {
	width:50px;
	height:50px;
	display:block;
	border:solid 1px #fff
}

#iconmenu a:hover {
	border:solid 1px #fff
}

#iconmenu #panel1c {
	left:2px
}

#iconmenu #panel2c {
	left:54px;
	background-position:-52px 0
}

#iconmenu #panel3c {
	left:106px;
	background-position:-106px 0
}

#iconmenu #panel4c {
	left:158px;
	background-position:-158px 0
}

#iconmenu #panel1c a:hover {
	background:url(nav.aspx) -2px -54px no-repeat
}

#iconmenu #panel2c a:hover {
	background:url(nav.aspx) -54px -54px no-repeat
}

#iconmenu #panel3c a:hover {
	background:url(nav.aspx) -106px -54px no-repeat
}

#iconmenu #panel4c a:hover {
	background:url(nav.aspx) -158px -54px no-repeat
}


 </style>
</head>

<body>
 <ul id="iconmenu">
  <li id="panel1c"><a href="#" onClick="alert('ONE');"></a></li>
  <li id="panel2c"><a href="#" onClick="alert('TWO');"></a></li>
  <li id="panel3c"><a href="#" onClick="alert('THREE');"></a></li>
  <li id="panel4c"><a href="#" onClick="alert('FOUR');"></a></li>
 </ul>
</body>
</html>

The Result

click here

labs.insert-title.com

Dynamic GDI+ meets CSS

The Code: nav.aspx

The Code 2: nav.html

The Result

Discussion