如何使用精灵作为输入翻转？

发布于 2025-01-04 17:59:22 字数 714 浏览 1 评论 0原文

有没有快速简便的方法来使用精灵在输入上创建翻转？

我不太熟悉输入，特别是您对输入的翻转所做的事情。我了解在标签上使用精灵。我还了解使用 Javascript onMouseOut 处理两个图像的概念，但我真的更喜欢使用精灵。它们似乎工作得最好，我不必担心闪烁。

这是我正在使用的图像：在此处输入图像描述

这是我正在使用的代码：

<style>
#newsletterSubmit{background:url(/Images/Buttons/submit.png) 0 0 no-repeat;display:block;width:90px;height:50px;text-indent:-9000px;}
</style>

 <input id="newsletterSubmit" type="image" src="Images/Buttons/Submit.png" onmouseover="document.getElementById('newsletterSubmit').style.backgroundPosition='0px -50px';" onmouseover="document.getElementById('newsletterSubmit').style.backgroundPosition='0px 0px';" />

原文

Is there any quick and easy way to use a sprite to create a rollover on an input?

I am not that familiar with inputs and specifically what you do regarding rollovers on inputs. I understand using sprites on tags. I also get the concept of using Javascript onMouseOut with two images, but I would really prefer to use a sprite. They seem to work best and I won't have to worry about flickering.

Here is an image I am working with:
enter image description here

Here is the code I am working with:

<style>
#newsletterSubmit{background:url(/Images/Buttons/submit.png) 0 0 no-repeat;display:block;width:90px;height:50px;text-indent:-9000px;}
</style>

 <input id="newsletterSubmit" type="image" src="Images/Buttons/Submit.png" onmouseover="document.getElementById('newsletterSubmit').style.backgroundPosition='0px -50px';" onmouseover="document.getElementById('newsletterSubmit').style.backgroundPosition='0px 0px';" />

分享到QQ

分享到微博

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

发布评论

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

青芜 2025-01-11 17:59:22

您不需要 javascript 或 onmouseover，这一切都可以通过 CSS 完成。这是一个简单的示例：

<input type="submit" value="Submit">

input {
    display:block;
    text-indent:-9000px;
    border:0;
    padding:0;

    background:url(/Images/Buttons/submit.png) 0 0 no-repeat;
    width:90px;
    height:50px;
}

input:hover {
   /* Move the background image up 50px (height of button) */
   background-position:0 -50px;  
}

演示： http://jsbin.com/ihafib

您需要检查坐标并适当裁剪它以确保一切都正确排列。

You don't need javascript or onmouseover, it can all be done with CSS. Here is a simple example:

<input type="submit" value="Submit">

input {
    display:block;
    text-indent:-9000px;
    border:0;
    padding:0;

    background:url(/Images/Buttons/submit.png) 0 0 no-repeat;
    width:90px;
    height:50px;
}

input:hover {
   /* Move the background image up 50px (height of button) */
   background-position:0 -50px;  
}

Demo: http://jsbin.com/ihafib

You'll want to check the coordinates of your sprite and crop it appropriately to make sure everything lines up correctly.

回复收藏 0 原文

~没有更多了~