掲示板/総合質問板/過去ログ/一覧/ 画像を使った隠しリンク。

0 名前： ゆかり ： 2004/11/17 22:35: 私のしたい隠しリンクは最初は隠れててオンマウスで画像表示されて
オフマウスでスグに消える隠しリンクです。オンマウスで画像表示されて
クリックでリンク先へ行く設定にしたいのですが．．．。
ご存知の方がいれば、教えて頂ければ幸いです。

1 名前： むむりく ： 2004/11/17 23:12: visibility を onmouseover で visible 、onmouseout で hidden …
という手もあるけど、JavaScript がよく分からないのでしたら、

CSS で、

a.hoge {
display: block;
width: 38px; /* 画像の幅 */
height: 38px; /* 画像の高さ */
}
a.hoge:hover { background-image:url("uri"); }

<a href="#" class="hoge">　</a>

なんて感じにしても可能だと思います。

2 名前： ゆかり ： 2004/11/17 23:27: むむりくさん。教えて頂いてありがとうございます。
せっかく教えて頂いたのですが．．．。どこに何を入力したら良いのか私には
解らないです。もう少し詳しく書いて頂けたら助かります。

3 名前： 生成り ： 2004/11/17 23:56: ゆかりさんはじめまして

分からなければ、まず検索のくせをつけましょう
「CSSとは」とか、「CSSって」で検索してみるとか

情報の探し方：検索のコツ
http://www.shoshinsha.com/shoshin/search/index.html

4 名前： ゆかり ： 2004/11/18 00:05: すいません。お言葉ですが．．．。
検索しても素人の私にはまったく何が何だか解らなかったので、
お聞きしているのですが．．．。

聞いちゃダメですか？

5 名前： k ： 2004/11/18 00:11: CSS＝スタイルシート（正確にはCascadingStyleSheet）ですよー。

とゆーことが、分かったら、このサイトのトップを見てください。
スタイルシートの項目がありますよね？
見てみましょう。
私はCSSの使い方をここで覚えました。

6 名前： ゆかり ： 2004/11/18 00:43: すいません。
まったくの素人なのでCSS＝スタイルシートのどこの何を見たら良いのかすら
私には解らないんです。スタイルシートの意味すら解りません。
普段はホームページビルダーで作成してるのですが更新で、ちょっと凝ったことを
しょうと思って．．．。私が間違ってました。素人が手を出すべきじゃなかっと
反省しています。今回は諦めます。お騒がせして、すみませんでした。

7 名前： phpinfo() ： 2004/11/18 07:23 ［URL］: ・・・・隠しページは規約違反になる場合があるのでご注意を（特に無料Webスペースサービス

8 名前： NS-700X ： 2004/11/18 10:49: <STYLE TYPE="text/css">

</STYLE>

<A HREF="kakushi.gif" CLASS="TEST"></A>

ゆかりさんは、探し方や覚え方を聞いている訳ではないと思われるし、
色々説明しても分からないでしょうから簡単に使い方だけを説明します。
記述の全てのTESTの部分を自分が決めた名前に変更しても結構です。

<STYLE TYPE="text/css"> ～</STYLE>は、<HEAD>～</HEAD>の間に記述して下さい。
WIDTH:40PX;
　ここでは40で説明していますが、表示する画像の横幅を指定して下さい。
HEIGHT:40PX;
　これも40で説明していますが、表示する画像の縦幅を指定して下さい。
BACKGROUND-IMAGE:URL("kakushi.gif");
　隠し画像のファイル名の指定kakushi.gifを
　使用している画像のファイル名に書き換えて下さい。
<A HREF="kakushi.gif" CLASS="TEST"></A>は、
<BODY>～</BODY>の間の使用したい所に記述して下さい。

9 名前： NS-700X ： 2004/11/18 10:50: 他の方法だと以下の様な方法もあります。こっちの方が使いやすいです。
<SPAN ONMOUSEOUT="changeimg.src='TOUMEI.GIF'"
ONMOUSEOVER="changeimg.src='KAKUSHI.GIF'">
<A HREF="HIMITSULINK.HTM"><IMG SRC="TOUMEI.GIF" BORDER="0" NAME="changeimg" ></A>
</SPAN>
↑
<BODY>～</BODY>の間の使用したい所に記述して下さい。
簡単な説明をします。
TOUMEI.GIFもKAKUSHI.GIFも自分の好きな名前にしてもらって構いませんが、
TOUMEI.GIFは、GIFが扱えるグラフィックツールで透明の画像を作っておく事です。

この透明GIFですが、小さい物を作っておくと隠しリンクに適しています。
もちろん、大きな透明画像を用意していてWIDTH/HEIGHTなどでも小さなサイズに変えられますが、
難しい説明は分かりませんよね。(汗
KAKUSHI.GIFは、マウスが乗った時に現れる画像の事です。
もう、ここを見る事が無いかも知れませんが、見たら利用して下さい。

10 名前： NS-700X ： 2004/11/18 10:52: あ、リンク先の説明を忘れていました。(汗
HIMITSULINK.HTMのヶ所を
飛ばしたいリンク先や画像ファイルなど好きなものに変更して構いません。

11 名前： ゆかり ： 2004/11/18 23:18: NS-700Xさん。
ご丁寧にありがとうございます。ＨＰの更新は済んじゃいましたが
またリニューアル更新する時に使わせて頂きます。
本当に感謝です。

12 名前： ゆかり ： 2004/11/18 23:32: NS-700Xさん。
教えて頂いたタグなんですけど．．．。
これって隠すGIFとオンマウスで現れるGIFの２枚重ねのタグですか？

13 名前： NS-700X ： 2004/11/18 23:53 ［URL］: ン～GIFの２枚重ねのタグって言う訳ではないんですが、
今は説明しても分からないだろうから取合えずそう思って使ってもらって結構です。(w
自分のＨＰはこの手のＨＰじゃないんですけど何時でも質問を受けつけますし、
他に質問すれば何でも気軽に答えてくれるＨＰも知っていますので
よかったら書き込んで下さい。

14 名前： むむりく ： 2004/11/19 00:41: 他所への誘導は、
この板で回答されている方を否定しているようにも受け取れますよ……

それはさておき。

一番最初に書いているよう表示・非表示を切り替えれば、
透明画像を作らなくても大丈夫です。
関数にした方が見やすいけど、敢えて。

<span onmouseover="document.images['changeimg'].style.visibility='visible'" onmouseout="document.images['changeimg'].style.visibility='hidden'">
<a href="リンク先">
<img src="画像へのパス" alt="link" style="visibility:hidden;" id="changeimg"></a>
</span>

15 名前： NS-700X ： 2004/11/19 00:58 ［URL］: 質問者の意図とは違う事を示す人は、否定されても仕方が無いのでは？
別に否定している積りじゃないですけど。

今回調べ方とか覚え方を示した人の主張は分かりますが、
仕事で今直ぐ対応しなければならない人や調べても分からない人、
覚えれば出来るけど今直ぐ実現したい人などと色々居る筈です。
だから、自分は分からない人に分かる様に答えるだけです。

16 名前： むむりく ： 2004/11/19 02:12: これ以上こちらで続けると迷惑がかかるので、別でレスしますね。
http://8701.teacup.com/nakasukiero/bbs

別に討論しようとか、非難しようって訳じゃないので、
雑談感覚で遊びにきてください。

無理強いしてる訳でもないので、目を通していただくだけでも。
ぼくはこう思ったというのを書いておきます。

17 名前： ゆかり ： 2004/11/19 03:43: 本当にゴメンなさい。私の無知のせいでお騒がせしてしまって。
むむりくさんも教えて頂いて感謝しています。
ただ、どこに何(オンマウスで表示したい画像とかリンク先URL)を入力して良いか解らなかった
だけで、それは私が無知な素人だからで、気軽に書き込みしたことを反省しています。

それをNS-700Xさんが無知な素人の私でも解る様に教えて頂いたんだと思います。

こちらに書き込む前に私も私なりに検索して探して該当すると思うタグで試してみましたが
オンマウスで表示したい画像を壁紙で重ねるというタグで壁紙はオンマウスで表示したい画像よりも
大きくて壁紙を縮小しましたが見るからにバレバレだし私のＨＰでの壁紙は固定タグを使っているので
隠しリンクの擬態してる壁紙の模様が動くのでバレバレで私の意図とは違うタグだったので
無知な素人の私でも、こちらに書き込めば教えて頂けると思って気軽に書き込みました。皆さんのレベルが
高くて無知な素人の私が出入りして気安く書き込む所では無かったと本当に反省しています。ゴメンなさい。
お騒がせして申し訳ないです。私も背伸びをせずに自分のレベルに合ったＨＰ作成を心がけます。

18 名前： NS-700X ： 2004/11/19 04:37 ［URL］: ゆかりさんが謝って反省する事も萎縮する事も無いんですよ。
気軽に書き込みが出来る掲示板でなければ何の為の掲示板なのでしょうか？
ある程度のレベルを有した人の為の掲示板なら存在しない方がマシです。
これからも自分のしたい事を自分のＨＰ作成に反映させ、
分からなければ何時でも気軽に書き込んで下さい。

言いたい事は、むむりくさんが示したリンク先に書いてあるのでそちらを見て下さい。

19 名前：みや： 2004/11/19 08:11: NS-700X さん：

回答スタイルがどうこうというのはともかくとして、ただ、>9 のような書き方は IE（Opera 含む）でしか動作しない特殊な書き方なので、初心者さんに教える内容として適切でないような気がします（しかも、img 要素の name 属性はもう使わない方が良いとされている）。

もし WWW という開かれた空間で使うという前提なら、>1（>8）や >14 の方が良いと私は思います。また、DOM がそろそろまともに使えるようになった現在、getElementById() の方が後々のためには良いのかな、とも思います。

<span onmouseover="document.getElementById('changeimg').style.visibility='visible'" onmouseout="document.getElementById('changeimg').style.visibility='hidden'">
<a href="リンク先">
<img src="画像へのパス" alt="link" style="visibility:hidden;" id="changeimg">
</a>
</span>

# >14 をそのまま使わせて頂きました。

20 名前： NS-700X ： 2004/11/19 08:52: みやさん:

国内シェアから言って自分はいいと思いますけどね。
あと、属性の使用問題ですが、
使える間は使っても良いと自分は考えているので敢えて使ったりします。
初心者に教える内容じゃないと思うのなら
バンバン別の方法を提示したら良いと思います。

で、１は少なくともサイズ指定の面倒が伴うし、
初心者に分かりにくいので望ましい方法とは言えませんよ。

21 名前： h_naruaki ： 2004/11/19 16:15: >20さん
>国内シェアから言って自分はいいと思いますけどね。
そうですか？私はOperaを使っていますが、見られないページがあるたびにIEを使うのはいらいらします。

22 名前： NS-700X ： 2004/11/19 16:57: >>21
まさかOperaが国内シェアトップとでも？
定番は、IEかNSです。
OperaにはOperaのメリット、デメリットが
ある事を承知して使っているのでしょうから文句を言うのは筋違いです。

23 名前： k ： 2004/11/19 18:26: 　NS-700Xさん。
　IEがシェアトップとしても、それ以外を使っている人は確実にいます。
　そして、IE以外のブラウザを排除して簡単なソースのサイトにするのか、IE以外のブラウザにも配慮して作るのかは、この場合ゆかりさんが決めることだと思います。

　実際にそのソースを使うゆかりさんの意向を確認せずに、IE以外排除と言い切るのはいかがなものかと思います。

24 名前： NS-700X ： 2004/11/19 18:39: kさんへ

自分が説明する時のスタイルを言っているだけで、
彼女が使用するかどうかと言う話ではありませんよ。
使いたければ使えばいいし、
他にもやり方を提示出来る人が居れば、提示すればいいんです。

22は、ちょっと言いすぎましたね。
なるべく他のブラウザにも対応は心掛けているので、
切り捨てている積りはありません。

25 名前： Luckon ： 2004/11/19 18:49: >22

・9 のような書き方は「IE でしか動かない」
・14 のような書き方は「IE でも NN でも Opera でも Safari でも動く」

シェアで考えるなら、後者の方がより優れた方法であるのは自明です。

26 名前： NS-700X ： 2004/11/19 19:10: >>25
汎用性がある事とOperaのシェア問題は別問題ですよ。
既に14が望ましいのは２人に言われているので、３度も言われなくても分かりますよ。

27 名前：えじ： 2004/11/19 19:18: あの、できればこの続きは雑談ルームで…

もちろん議論そのものは全然OKですし、歓迎はしているのですが、
ちょっとスレッドのテーマとは外れているようですし。。

よろしければ雑談ルームもご活用ください。
（こんなときにしか出てこないですいません（＾＾；）

28 名前： ゆかり ： 2004/11/19 21:51: 無知で素人の私が書き込みをして、お騒がせして本当にゴメンなさい。
何か私が荒らしたみたいで心苦しく思っています。タグを教えてくれる幾つかの
サイトを見つけてタグが、どういう動きをするのか少しずつタグのことが解って
きてＨＰ作成の面白さが広がってきて、あんなことをしてみたい、こんなことを
してみたいと自分のレベルを考えずに気軽に書き込みしたことを反省しています。
本当にゴメンなさい。みなさん仲良くしてくださいネ。お騒がせしてスミマセンでした。
自分のレベル以上に欲を出さずに自分のレベルの範囲でＨＰ作成を楽しみたいと
思います。無知で素人の私には敷居が高かったようです。

29 名前： 匿名希望 ： 2004/11/20 10:59: >26
どーでもいいけど、えじさんの言うとおり、もうちょっと落ち着いて考えましょうよ。
雑談ルームいくとかさ。

30 名前： NS-700X ： 2004/11/20 11:08: >>29
冷静ですよ。
リンク先で書いているので、そちらへどうぞ。
そして、このスレにレスする事は迷惑になるので、今後レスしないで下さい。

31 名前： k ： 2004/11/20 19:17: 最後に一つだけ、一番大事だと思うことを言わせてください。

ゆかりさん、あなたは別に悪くないです。
むしろ、変なことになっちゃった被害者です。

私も、変なことにしちゃった一人ですね。
ごめんなさい。

サイト作り、頑張ってください。