labs.insert-title.com

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





Discussion

nas

very good

Asif

really nice.

New comments are currently disabled, you can find me @joemaddalone Comments temporarily disabled for now, you can find me @joemaddalone