マウスが乗ったとき斜め下に下がる

質問

画像にマウスが乗ったときに、斜め右下に下がるには、CSSで
A:HOVER{position : relative;top:2px;left:2px;}　と設定すれば
よいとはわかるのですが、この設定は部分的にあてはめることはできないのでしょうか？　　同じテーブル内に、下がるアクションがほしいリンク画像と、下がってほしくないリンク画像があるのです。
どのようにすればよいか教えてください。
よろしくお願いいたします。

回答No.3

koutarou504 · ベストアンサー

#1 の者です。
単純にこの場所が「下がるアクションがほしいリンク画像」ならば、
＞<td width="75" height="17"><a href="#" onMouseOut=～
これを
<td width="75" height="17"><a id="IDSAMPLE" href="#" onMouseOut=～
でも
<td id="IDSAMPLE" width="75" height="17"><a href="#" onMouseOut=～
でもどうでもだいじょうぶですけど・・・。

zasshi01.gif が下がるアクションがほしいリンク画像であり zasshi02.gif が下がってほしくないリンク画像の場合は・・・
って、よく考えたらありえないですね・・・。
まぁとりあえず技術的には
上記と合わせて
onMouseOut に this.style="top:2px;left:2px"
onMouseOver に this.style="top:0px;left:0px"
の追記が必要です。（期待する動作が逆の場合は、追記先を逆に。）
これは CSS を動的に書き換える方法です・・・。

どこか話しに食い違いがあったりしてぇ？？？

あと、私も「マウスが乗ったとき斜め下に下がる」をページに使っているので注意点を少々。
まず、ずらす事によって他と重なる事があるので注意が必要です。余白を用意しておくか重なるのをあきらめるか・・・。
次に画像の場合、ネスケで上半分が欠けたり・・・。
古いバージョンのブラウザだとＩＥでも画像が変になる事があります。ブラウザごとでこの斜めに下がる機能を使わない様に出来るなら振り分けるのが望ましいです。

お礼

下がったぁ～～～（TOT）できたぁ～～～～!!　
ありがとぅございますぅ～～～～！！
IDを余計に変な場所に記載してました。
DreamWeaver で作っているので、HTMLの知識は無に等しく、DWで足りないときにその都度調べて作っている状態でして・・・
うんうん、いい感じ。望みどおりのものができました。
本当にありがとうございました！　続きをがんばります。
・・・・また・・教えてください*^^*

回答No.2

partita

（意図していることと異なるかもしれませんが）
画像を背景画像にすれば、他のものに影響が出なくなります。例として…

<ul>
<li><a id="first">ひとつめ</a></li>
<li><a id="second">ふたつめ</a></li>
</ul>
だとします（href省略してます）。このコードだと画像を扱っていないようにみえますが、CSSで以下のように記述します。

a {
text-indent:-9999px;
display:block;
width:100px;
height:20px;
}
a#first {background:url(画像1);}
a#first:hover {background-position:2px 2px;}
a#second {background:url(画像2);}
a#second:hover {background-position:2px 2px;}

・リンクテキストを画面外に飛ばす
・リンクをブロック要素にして背景画像を設定
・マウスオーバーで背景画像の位置をずらす

こうすることにより、他の要素に影響なく画像が斜め右下に下がります。

※position:relative;を使用すると、あとに続く要素までずれてしまいませんか？

お礼

ご丁寧にありがとうございました!!
実はテーブルにすでに背景をつかっていて、
初心者のわたしには少々難しいです。　すみません・・
ただ影響が出た場合にまた知識として必要になるでしょうから、
この方法でもチャレンジしてみますっ！
本当にありがとうございました！！

回答No.1

koutarou504

CSS を使い分けたいのならば、セレクタを用いれば・・・。

というか、個々に指定したいなら該当の要素にＩＤを用いて CSS を記述すれば良いので・・・。
また、修飾というか文脈的セレクタも・・・。

A:HOVER#IDSAMPLE{position : relative;top:2px;left:2px;}　

<a href="./index.htm" id="IDSAMPLE">sample</a>

または、
#IDSAMPLE A:HOVER{position : relative;top:2px;left:2px;}　

<div id="IDSAMPLE"><a href="./index.htm">sample</a></div>

(あくまでサンプルです。いろいろ書き換えて使って下さい。)

いろいろな組み合わせがあるので、
実際にはその場その場の用途次第なのですが・・・。

div A:HOVER{position : relative;top:2px;left:2px;}

<div><a href="./index.htm">sample</a></div>

これもありですし・・・。

補足

早速のお返事ありがとうございます！
CSSの記述場所はわかるのですが、HTMLへの記述がわかりません・・
<td width="75" height="17"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('zassi','','images/zasshi02.gif',1)"><img src="images/zasshi01.gif" alt="雑誌" name="zassi" width="75" height="17" border="0"></a></td>
このように、ロールオーバー時に画像が変わる設定をしているのですが、間にあてはめてたらエラーになってしまいました。
どのようにしたらよいのでしょうか？初心者で申し訳ありません・・。