当前位置：文江博客话题详情

在 ASP.Net 中创建翻转图像

发布于 2024-08-29 00:22:37 字数 77 浏览 7 评论 0原文

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

我在 VB.Net 中使用 Visual Studio 2008

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

长发绾君心 2024-09-05 00:22:38

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

请参阅以下 css：http://clearleft.com/

回复收藏 0 原文

哭了丶谁疼 2024-09-05 00:22:38

您可以结合使用菜单控件、CSS 友好适配器和 CSS Sprites。

我已经做了很多这样的事情，所以请随时提出任何问题。

最后，您想要这样的东西：

<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>

将其设置为类似这样的样式：

#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; }

等等等等...

您必须设置每个元素的背景图像位置，但是有关图像精灵的教程应该可以帮助您到达那里。

遗憾的是，Asp.Net 中的 Css 菜单适配器并未在每个元素上放置 ID。我编辑了源代码来执行此操作，但如果您不需要菜单控件为您提供的抽象，您可能只想使用 html 来执行此操作。

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.

回复收藏 0 原文