タグ: ホバー

ロールオーバー画像js

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script><script type="text/javascript" src="js/jquery.multirollover.js"></script>

<script type="text/javascript">// <![CDATA[
	$(document).ready(function() {
		$('#head_rogo a').multirollover({
			crossfade	: true,
			suffix		: '_on',
			duration	: 300,

		});
	});
// ]]></script>

もしくはaタグにクラスをつける。

</pre>
<div class="clearfix"><a href="<?php echo home_url(); ?>"><img class="hover" style="padding-top: 5px; padding-bottom: 15px;" alt="愛知県春日井市のホームページ制作|D-Marking Design|格安デザインサンプル" src="img/rogo.png" /></a></div>
<pre>

配置画像はそのままの名前　ホバー画像は_onをつける。

DL先
http://blog.three-co.jp/web/849/

multirollover-master

画像ホバー半透明css

#main_contents a:hover img{
opacity:0.7;
filter: alpha(opacity=70);        /* ie lt 8 */
-ms-filter: "alpha(opacity=70)";  /* ie 8 */
-moz-opacity:0.7;                 /* FF lt 1.5, Netscape */
-khtml-opacity: 0.7;              /* Safari 1.x */

}