リンクにポイントで文字や画像が動く
-
0 名前： ルイチ ： 2006/05/18（木） 01:28
- リンクされている画像や文字をポイントすると
その画像や文字が右下斜めなどの方向に動くサイトを見かけました。
あれはどのようなタグを使って行うのでしょうか。
教えて貰えればありがたいです。
-
1 名前： F ◆31IwthomhZ ： 2006/05/18（木） 01:28
- ”ソースを表示”して分からないなら、そのサイトのURIを提示してくださいな。
多分JavaScript(JScript)などのプログラムが組み込まれているんでしょう。少なくともHTMLタグにはそういう機能はないです（テキストファイルのマークアップのためのルールだから、「動作」するものじゃない）。
-
2 名前： ルイチ ： 2006/05/18（木） 01:28 ID:c3AxypA0
- なるほど・・・。
JAVAを使うのですか・・・。
自分はその辺の知識が足りないので少し勉強しないと・・・。
ところで、ソースを見てもわかりません。
どのタグを使ってるのか・・・。
こちらのサイト様で見かけたのですが。
画像にふれると動くようになっております。
確認のほどをよろしくです。
http://drama.chu.jp/
-
3 名前： F ◆31IwthomhZ ： 2006/05/18（木） 01:28
- >>2で提示されたサイトは、A要素にCSS（カスケーティングスタイルシート）をstyle要素により適用し、positionプロパティでrelativeし、同時にtopプロパティとleftプロパティを指定してますね。
画像を読み込ませているIMG要素を入れ子にしてますから、これで座標ずれが生じるのでしょう（画像そのものが「動いて」いるのではなく、表示位置の計算方法を変えることで位置をずらしている）。
該当部分：
A:hover {
color:#FFFFFF;
background:#8cb4e3;
position:relative ;
top:1px ;
left:1px ;
}
参考)
http://www.scollabo.com/banban/ref/refcss_05.html#position
ということでJavaScript(JScirpt)ではなかったのでした。
なお、既出ですがJava言語とJavaScirptは全く違うものです。無闇に省略しないように。
参考）
http://www.scollabo.com/banban/term/java.html
>>1のサイトは下記文法チェッカにかけるとマイナス点となりますので個人的にはお手本としてはお奨めしかねます。まあALT属性は書けばいいってものではないですが、画像が表示されない場合の代替手段なのでないと閲覧者が困る訳です。
http://htmllint.itc.keio.ac.jp/htmllint/htmllint.html
参考）
http://members.jcom.home.ne.jp/pctips/www/concept/
＃本当はずばりな下位リソースのURIを示したいのだけれど、一部の文字列が禁止ワードになるのでやむを得ず上位リソースで提示。
-
4 名前： F ◆31IwthomhZ ： 2006/05/18（木） 01:28
- >>1じゃないや>>2だ・・・OTL
これだけではアレなので追記。
CSSは外部化してこそ省力化に繋がります。STYLE要素によるやり方は、同じスタイルを複数の文書で使いたければいちいちコピー＆ペーストしなければなりませんが、外部ファイルならLINK要素で参照させるだけで一発ですから（もちろん絶対パスや相対パスで正しいURIでないと参照不可能となりますけれど）。
参考）
http://members.jcom.home.ne.jp/pctips/www/cssmerit.html
http://members.jcom.home.ne.jp/pctips/www/faq/
-
5 名前： ルイチ ： 2006/05/18（木） 01:28 ID:c3AxypA0
- ＪＡＶＡではなかったんですか。＾＾
教えてくれてありがとうございました。
さっそく使ってみますね。
