SOS单击时如何使鼠标停留图像！ [英] SOS How to make rollover image stay when clicked!

问题描述

大家好，我有一个悬停按钮图像，当我将鼠标悬停在上面时会高亮显示，而当我将鼠标悬停走开时，它会回到其原始图像，当我单击它时如何让高亮显示的图像停留，以便用户知道他们在哪一页上.

我需要javascript = D
编码部分的帮助
在此先多谢.

Hi guys i have a rollover button image that get highlighted when i hover over and when i hover away it will be back to its original image, how can i let the highlighted image stay when i click it, so that the user know which page they are on.

I need help in the coding part in javascript =D

Thanks a lot in advance.

<script type="text/javascript">
    function roll_over(img_name, img_src) {
        document[img_name].src = img_src;
    }
</script>

önmouseout="roll_over(''AboutUsBtn''，``图像/菜单按钮/AboutUs.png'')">
< img src =图像/菜单按钮/AboutUs.png" name ="AboutUsBtn" border ="0">

önmouseout="roll_over(''AboutUsBtn'', ''images/Menu Buttons/AboutUs.png'')">
<img src="images/Menu Buttons/AboutUs.png" name="AboutUsBtn" border="0">

推荐答案

在您的情况下，在使用大量客户端脚本之前，我更喜欢CSS解决方案.

例如，您可以使用以下HTML/CSS定义来实现您的目标:

In your case, I would prefer a CSS solution before using a lot of client scripting.

For example, you can use the following HTML / CSS definition to achieve your goal:

<style type="text/css">
	.btn { display: block; width: 100px; height: 40px; text-indent: -1000; background: url(AboutUs.png) no-repeat top left; }
	.btn:hover { background-image: url(AboutUs_Hover.png); }
	.active { background-image: url(AboutUs_Hover.png); }
</style>

<div>
	<p><a href="#" class="btn">About Us</a></p>
</div>

在此示例中，CSS类"btn"定义了以下内容:

• display:block:创建一个所谓的块元素"(否则，with和height属性是不可能的)
• width/height:定义元素的with和高度(根据您的情况，应将其设置为按钮图像的图像大小)
• text-indent:将包含的文本移出可见区域，最适合可访问的网站(如果没有图像/css定义，因此您的链接仍然有描述)
• background:定义默认的背景图片，定义该图片不应重复，并且该图片应从包含元素的左上角开始



In this example, the CSS class ''btn'' defines the following:




• display:block : creates a so called ''block-element'' (otherwise the with and height attributes are not possible)
• width / height : defines the with and the height of the element (in your case, you should set it to the image-size of the button image)
• text-indent : moves the contained text out of the visible area, best for accessible websites (if there are no images / css definitions, so your link still have a description)
• background : defines the default background image, defines that the image should not be repeated and that the image should start in the top-left angle of the containing element

<a href="#" class="btn active">About Us</a>



那么CSS会自动将活动"状态应用于此元素.


希望这会有所帮助.

致以最诚挚的问候，祝您有愉快的一天，
停止



then the CSS will automatically apply the ''active'' state to this element.


Hope this helps.

Best regards and have a nice day,
Stops




嘿....欢呼
jquery 使用jquery缓动插件解决了您的问题

Hey....Cheers
jquery solves you problem using jquery easing plugin




这篇关于SOS单击时如何使鼠标停留图像！的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！