asp.net - 在 ASP.Net 中创建翻转图像

Question

我有一个图像菜单栏。为菜单栏创建翻转图像的最佳方法是什么？

我在 VB.Net 中使用 Visual Studio 2008

Answer 1

If it's a background image, you can use the css :hover selector to change the background image.

Answer 2

You could use a combination of the Menu control, CSS Friendly Adapters, and CSS Sprites.

I've done a lot of these, so feel free to ask any questions.

In the end, you want something like this:

<ul id="nav">
  <li><a href="page1.aspx" id="page1">Page 1</a></li>
  <li><a href="page2.aspx" id="page2">Page 2</a></li>
  <li><a href="page3.aspx" id="page3">Page 3</a></li>
  <li><a href="page4.aspx" id="page4">Page 4</a></li>
</ul>

Style it something like so:

#nav li { float: left; }
#nav a { height: 30px; width: 150px; background: transparent url("bg.png") no-repeat scroll left top; }
#nav a#page1:hover { background-image-position: -30px 0; }

etc. etc...

You'll have to set the background image position of each element, but that tutorial on image sprites should get you there.

The Css Menu Adapter in Asp.Net, unfortunately doesn't put IDs on each element. I edited the source code to do this, but you may want to just do it with html, if you don't need the abstraction the Menu control gives you.

Answer 3

你也可以做一个CSS解决方案。它涉及更多关于创建图像翻转的工作，即在图形设计方面。

请参阅中的 css：http ://clearleft.com/