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

Comments

nas 1/24/2007 3:07:03 AM very good

Asif 2/15/2007 11:57:41 PM really nice.

LATEST POSTS

PostBackUrl Equals Change the Friggin' Form Action . Curse you DBNull and/or Is Nothing! . Career Developers are Shitbags they are. Consolas Makes Me Geek-ier MS Consolas Font Abuse Things I Read Today and You Should Too Whilst searching for solutions I happened upon...

MOST POPULAR

Multiple IEs in Windows Firefox Vs. The World Who Is Xperya? ActionScript Form Fields Quick Watermark IE 7 beta 2 standalone

Dynamic GDI+ meets CSS

The Code: nav.aspx

The Code 2: nav.html

The Result

Comments

Leave a Comment

Posts

Stores

LATEST POSTS

ADS

MOST POPULAR