訪問済みリンク識別を画像で

このQ&Aのポイント
  • webで訪問済みのリンクを画像で識別する方法について教えてください
  • Javascriptを使用せずに、訪問済みリンクの画像を変える方法について教えてください
  • ポインタが乗ったことではなく、vlinkでリンクを識別する方法を教えてください
回答を見る
  • ベストアンサー

訪問済みリンク識別を画像で

いつもお世話になります。 webでは、訪問済みのリンクが文字の色表示が変わることによって識別できますが、この識別を、画像をクリックして跳ぶタイプのリンクでも実現したいのですがJavascriptか何かで出来ないものでしょうか? よく、javascriptによって、ポインタを乗せると画像が別画像に入れ替わって、ポインタをどけると元の画像に戻るページがありますが、要は、「ポインタが乗ったことを検知して画像が変わる」のではなくて「このリンクがvlinkであるということを検知して画像が変わる」ように出来ないかと思ったのですが…。 例えば、 http://www.tk3.speed.co.jp/garten/patio/ (このサイトは私が作ったものではなく、あくまでも例です) の場合、左フレームの一番下のボタンをクリックしてリンクを右ウインドウに開き、次にまた別のページにジャンプした時、さっき訪問したリンクである一番下のボタンは赤いボタンにでも変わって、このリンクは既に訪問済みであることが分かるようにしたいのです。 つまり、 ボタン1:未訪問の場合btn1.gifを表示→訪問後はbtn1_v.gifを表示 ボタン2:未訪問の場合btn2.gifを表示→訪問後はbtn2_v.gifを表示 ボタン3:未訪問の場合btn3.gifを表示→訪問後はbtn3_v.gifを表示 と言った具合に、仮にボタンが3つなら6枚の画像を用意するわけです。 尚、私は、前述の「マウスONで画像入れ替え」のスクリプトさえ自分の力でプログラムできないもので、恐れ入りますが、javascriptで実現が可能でしたら、部分的でなく具体的なソースを教えて頂けるとありがたいのですが…。 javascript使用以外の方法でも何でも構いませんので、この目的を達成する方法をご存知の方がいらっしゃいましたらご伝授いただけませんでしょうか?

  • chack
  • お礼率100% (283/283)

質問者が選んだベストアンサー

  • ベストアンサー
回答No.2

こんばんわぁ、Blackwinglsです。 以下Scriptでなんとかなりそうですか? <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta name="GENERATOR" content="Microsoft FrontPage Express 2.0"> <title>java16-1</title> <script language="JavaScript"> <!-- icon = Array(3) icon[0] = new Image();icon[0].src = "../img/v0.gif" icon[1] = new Image();icon[1].src = "../img/v1.gif" icon[2] = new Image();icon[2].src = "../img/v2.gif" function Check() { ckary = new Array() ckary = document.cookie.split("; ") ckstr = new Array() for(i in ckary) { count=ckary[i].substr(5,1) if ("check"+count+"=" == ckary[i].substr(0,7)) { ckstr[i] = ckary[i].substr(7,ckary[i].length) if(ckstr[i]=="ok") { document.images[count].src=icon[count].src } } } } function Change(flag) { exp=new Date() exp.setTime(exp.getTime()+1000*60*5) document.cookie="check"+flag+"=ok;expires="+exp.toGMTString() document.images[flag].src=icon[flag].src } //--> </script> </head> <body onLoad="Check()"> <br> <a href="java16-3.htm" target="16-2" onClick="Change(0)" border=0> <img src="../img/0.gif"> </a> <a href="java16-3.htm" target="16-2" onClick="Change(1)" border=0> <img src="../img/1.gif"> </a> <a href="java16-3.htm" target="16-2" onClick="Change(2)" border=0> <img src="../img/2.gif"> </a> <p> <font><a href="java16-2.htm" target="16-2">Back</a></font> </p> </body> </html> なお、 http://member.nifty.ne.jp/Blackwingls/ のLaboratoryのNo16に上記内容をアップしてあります。 動作確認してみてください。 では(^_^)/~

chack
質問者

お礼

Blackwingls師匠! スクリプト、どうもありがとうございました! なるほど、セミコロンの後に[x]で番号を振って行けば複数対応が出来るんですね。 応用力の乏しいヤツでどうもすみませんでした。 ここまで教えて頂いたら、さすがにもう、更に画像を増やす方法も簡単に解りますし、おかげさまで、別件で悩んでいたスクリプト(スケジュールを組んでおいて、そのスケジュールの当日が過ぎたら項目に済マークが自動的につくようにするもの)まで自力で作ることが出来るようになりました。 No.1のご回答とNo.2のご回答にそれぞれ10ptと20ptを付けさせて頂きたいのに、同じ方のご回答には付けられないようになっているのが歯痒いところです。 この度は本当にどうもありがとうございました!!!

その他の回答 (1)

回答No.1

こんばんわぁ、Blackwinglsです。 なかなか回答がつかないようですね。 別件で考えてたのがちょっと使えそうなので、改変してみました。 cookieを使用しています。 ちなみにcookieの使用期限は1週間に区切っているので、1週間以上リンクがクリックされないと、未訪問扱いになります。 動作確認はしていませんので、あしからず(^^;) <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta name="GENERATOR" content="Microsoft FrontPage Express 2.0"> <title>test</title> <script language="JavaScript"> <!-- ckary = new Array() icon = new Image() icon.src = "1.gif" function Check() { ckary = document.cookie.split("; ") ckstr = "" i = 0 while (ckary[i]) { if (ckary[i].substr(0,6) == "check=") { ckstr = ckary[i].substr(6,ckary[i].length) break; } i++; } ckary = ckstr.split("%00") if(ckary=="ok") { document.images[0].src=icon.src } } function Change() { exp=new Date() exp.setTime(exp.getTime()+1000*60*60*24*7) document.cookie="check=ok;expires="+exp.toGMTString() document.images[0].src=icon.src } //--> </script> </head> <body onLoad="Check()"> 画像の変更<p> <a href="#" onClick="Change()" border=0> <img src="0.gif"> </a> </body> </html> ではでは(^_^)/~

chack
質問者

お礼

Blackwinglsさん、ご回答をどうもありがとうございました!! 完璧に機能しました! そうです。これがやりたかったんです。 ただ、ここまで教えて頂けたら、あとは自力で配置する画像を増やしてみようと色々調べてみたんですが、どうもそれが出来ないんです。 クッキーの名前をいくつも設定すればいいのかなとか考えたんですが、いじり方がどうも… このまま単に </head> <body onLoad="Check()"> 画像の変更<p> <a href="#" onClick="Change()" border=0> <img src="0.gif"> </a> <a href="#" onClick="Change()" border=0> <img src="0.gif"> </a> <a href="#" onClick="Change()" border=0> <img src="0.gif"> </a> </body> </html> とリンク付き画像だけ増やしたところで、どれをクリックしても1つ目の画像が変わるだけですもんね。 手のかかるヤツで申し訳ないんですが、複数のクッキーを発行することによってボタン画像も複数にする方法、フォローしていただけるとありがたいのですが… いずれにしても、なかなかご回答を頂けないような面倒な質問にお答えいただき、この度はどうもありがとうございました。

関連するQ&A

  • 画像にリンクを張って、その画像にマウスポインタが乗ったときに画像に変化

    画像にリンクを張って、その画像にマウスポインタが乗ったときに画像に変化が現れるようにしたいのですが方法がわかりません。どなた様かご指導のほどよろしくお願いいたします。 今回画像を以下に掲載させて頂きました。よろしければ見てみてください。 http://desktop10.web.fc2.com/11.gif 上記を見て頂くと、HOMEの下に赤い線が入っています。マウスポインタを合わせたときに上記のようにしたいと考えております。よってマウスポインタをあわせないときは、赤い線が表示されないようにしたいと考えております。このような場合はどのような記述が必要なのでしょうか? 私はhtmlには以下のような記述をしました。 <a href="http://index.html"><img src="img/test.gif" alt="ボタン" width="115" height="48" /></a> どなた様か、ご指導のほどよろしくお願いします。

    • ベストアンサー
    • HTML
  • 画像ボタンのリンクと画像の変更について

    画像ボタンのリンクと画像の変更について ただいまHPを勉強中の者です。 サイトの「企業情報」や、「問い合わせ」などのボタンを作成した場合、 その画像をどのようにプログラムで組めばリンク移動できますか? また、マウスポインタをその画像の上に持ってきた時に、 文字の色を変えたり、画像全体の色などを変えるにはどうすればいいですか?? (ボタンを押したら凹ますとか・・・) 色を変えたりなどは、Javascriptでしょうか?? ただいま勉強中で、まだよく理解できていないので、 詳しく説明を入れてもらえれば助かります。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • Javascript外部リンクの書き方(初心者)

    以下のJavascriptを外部リンクにしたいのですが、記述の仕方が分かりませんので、お教えください。 (引用元:Javascript例文辞典) <html> <head> <title>一定時間ごと画像を入れ替える(複数箇所に異なる画像[規則的なファイル名版])</title> <script language="JavaScript"><!-- count = 0; function changeImg() { count++; count %= 4; document.btn1.src = "a" + count + ".gif"; document.btn2.src = "b" + count + ".gif"; } // --></script> </head> <body onLoad="setInterval('changeImg()',2000)"> <img src="a1.gif" name="btn1"> <img src="b1.gif" name="btn2"> </body> </html>

  • 最後に押した画像ボタンが分かる、アクティブリンクのような(?)画像ボタンを作りたい

    HPを作っています。使用中のソフトはDreamweaverMX2004です。 さて、左端にボタン(gifイメージ)がいくつも並んでいるとします。 各ボタンはロールオーバー指定がなされており、 リンクが貼られています。 ロールオーバーでボタンイメージは /off.gif(通常) /on.gif(オンマウス時) とします。 と、ここまでは普通のロールオーバーだけのものですね。 さて、これを、各3種作ったと仮定して、 /off.gif(通常) /on.gif(オンマウス時) /active.gif(最後にクリックした画像) そして、 ボタンをクリックする→最後に押したボタンが/active.gifの形で残る つまり、訪問者がどのボタンを最後に押したかが一目で分かる この様な手法を、HTMLで作ることは可能でしょうか。 アクティブリンクのボタン画像版といえば伝われば幸いです。 可能かどうか自信がないのですが、 もし可能でしたら、どのようにHTMLを書くのか、 その手法をお教えください。 宜しくお願いいたします。

  • どういうわけかリンクしません

    どういうわけかリンクしません ので、教えていただきたくて質問させていただきます。 数ページあるサイトを製作したのですが、 ページ内にメニューボタンを配置し、 それぞれサイト内のリンク先に飛ぶように設定しました。 その内のボタン(sample_btn)にトップページ(index.html)自身に再ジャンプするようなかたちをとろうと思い、 <div id="sample_btn"><a href="index.html"><img src="sample.gif" /></a></div> 上記のxhtmlを書きました。 ところがローカルでは、sample.gifという画像が見えるのですが サーバーにアップすると見えなくなってしまいます。 他のページでは、 <div id="sample_btn"><a href="index.html"><img src="sample.gif" /></a></div> の、index.htmlの部分の名前だけを変えて使用していますが、 問題なく表示されています。 表示されないトップページでも、index.htmlの部分を#に変えると表示されます。 現在は#で問題を回避していますが、 どうにかリンクさせたいというのと、 なぜこうなるのか知りたくて質問させていただきました。 質問に関し情報が少ない場合は指摘がございましたら 追記させていただきます。 リンクする必要が無いかとは思いますが、 今回はどうしてかを知りたい為 どうかご回答よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • gif 画像上の ボタンに リンクを張るには?

    HP 上の gif画像ファイル にいくつか小さなボタンを配置して それぞれの ボタンに リンクを張りたく思います。 gif 画像上の ボタンに リンクを張るには?どのようにすればいいのでしょうか?

    • ベストアンサー
    • HTML
  • WEB上で拡張子php、plなどのリンク画像が表示されません。

    Web上で、ブラウザ上からインターネットを閲覧すると リンク先の拡張子phpやpl※などの画像(イメージ)が表示されません。 (※右クリックしてプロパティーのアドレスに表示されているリンクの拡張子です) ×などの表示はされず、何も表示されません。マウスポインタをその部分に持っていくと、手のポインタに変わります。 また、一部背景が真っ黒になったりします。 jpgやgif等の画像は普通に表示されます。 例えば、以下のような現象です。 ・Mixiの基本メニュー/サブメニューのボタンが表示されません。 ・教えてGooのカテゴリ別ページの「新しい質問をする」ボタンが表示されません。 今までは見れたような気がするのですが、非常に困ってます。 スタイルシートとかCSSとかが関係しているのでしょうか? どうか解決方法をご教授下さい。よろしくお願いします。 OSはWindows Xp ブラウザ:IE6 Java,JavaScript,ActivXは全て有効です セキュリティーの設定は、規定値の中にしております。 インターネットオプションで画像の表示も有効です。

  • 文字リンクに乗ったとき、画像を変更させる。

    「画像にマウスが乗ったとき、その画像を変更する」というのは分かるのですが、 「文字リンクにマウスが乗ったとき、画像を変更させる」というのは分かりません。 画像を表示させる位置は同じです。ただ、それぞれのリンクに乗ったとき、表示させる画像は違うのにしたいのです。 例) リンク1・・・1.gif リンク2・・・2.gif 

  • ボタンに画像を使えません

    お世話になります。 セレクトボックスでリンクする(ボタン付き) http://www.tagindex.com/javascript/link/select2.html 上記のサイトの「input type="button"」のボタンでリンクすることはできたのですが、 <input type="image" onClick="jump()" src="画像.gif" alt="" width="201" height="46" border="0" onmouseover="this.src='画像_on.gif'" onmouseout="this.src='画像.gif'"> ↑のようにtypeをimageにして画像をボタンに使おうとしますと、 「?select=&x=92&y=33」とURLの末尾に追加されるだけでリンクができません。 上記サイトのjavascriptを「input type="image"」のボタンで使用するには どのようにすればよろしいでしょうか。 よろしくお願いいたします。

  • Javascript上での”、’の使い分け

    こんにちは、 最近、HTMLの勉強をやり直しています。(といっても詳しいわけではありません。) Javascriptで"と’の二つを使います。 例)ボタン画像の切り替え <a href="javascript:void(0);" onmouseover="document.btn.src='btn2.gif';" onmouseout="document.btn.src='btn1.gif';"> <img src="btn1.gif" name="btn" border="0" width="120" height="40"></a> この際に、”、’の使いわけがありますが、このことをうまく理解できません。 ほか、Javascriptとは離れますが、 Styleseetで、 HTMLタグでは、色の指定する場合、"#ffffff"というように”を使いますが、Styleseetでは使っていません。 これも自分の中でうまく納得できていません。 何か、こうだよっていううまい説明がありましたら教えてください。よろしくお願いします。

専門家に質問してみよう