Image SwappingをJava Scriptを使用しないでするには？
[上に]
[前に]
[次に]
るる
[E-Mail]
2000/02/27(日) 15:50:09
イメージ・スワッピングで、画像の一部にマウスのポインターをもっていったときに、そこ（一部のみ）の色が変わり、更には、そこをクリックするとリンクするようにしたいのですが、HTMLだけで、書く方法をどうか教えてください。
ポケ鬼！！
2000/02/28(月) 13:33:02
HTMLだけじゃ無理です。スタイルシートを使えばできます。
dummy.gifという同じ大きさの透明の画像を用意して、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html40/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/xhtml; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>サンプル</title>
<style type="text/css">
<!--
img {border: 0;}
a { background: url(aaa.gif);} /* 普段の画像 */
a:hover { background: url(bbb.gif); } /* 置き換わる画像 */
-->
</style>
</head>
<body>
<p><a href="xxx.html"><img src="dummy.gif" width="50" height="20" alt="dummy"></a></p>
</body>
</html>
ＥＭＩ
2000/02/28(月) 14:52:48
質問の内容は「画像の一部にマウスのポインタを」と言うことですから、ポケ鬼！！さんの方法じゃだめですね。
イメージマップとCSSを駆使した方法を考えてみました。
<style type="text/css">
<!--
area#aaa:hover { background: url(aaa.png);}
area#bbb:hover { background: url(bbb.png);}
-->
</style>
として、
<p>
<map name="sample">
<area coords="10,10,20,20" href="aaa.html" id="aaa" alt="aaa">
<area coords="30,10,40,20" href="bbb.html" id="bbb" alt="bbb">
</map>
<img src="map.png" width="50" height="30" alt="Image map sample" usemap="#sample">
</p>
の様にすればできるのではないでしょうか。
[上に]
[前に]
[次に]