OKWAVEのAI「あい」が美容・健康の悩みに最適な回答をご提案!
-PR-
解決
済み

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

  • 困ってます
  • 質問No.150044
  • 閲覧数529
  • ありがとう数4
  • 気になる数0
  • 回答数2
  • コメント数0

お礼率 82% (209/252)

いつもお世話になります。
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使用以外の方法でも何でも構いませんので、この目的を達成する方法をご存知の方がいらっしゃいましたらご伝授いただけませんでしょうか?
通報する
  • 回答数2
  • 気になる
    質問をブックマークします。
    マイページでまとめて確認できます。

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

  • 回答No.2
レベル11

ベストアンサー率 44% (138/313)

こんばんわぁ、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

お礼率 82% (209/252)

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

その他の回答 (全1件)

  • 回答No.1
レベル11

ベストアンサー率 44% (138/313)

こんばんわぁ、Blackwinglsです。 なかなか回答がつかないようですね。 別件で考えてたのがちょっと使えそうなので、改変してみました。 cookieを使用しています。 ちなみにcookieの使用期限は1週間に区切っているので、1週間以上リンクがクリックされないと、未訪問扱いになります。 動作確認はしていませんので、あしからず(^^;) <html> <head ...続きを読む
こんばんわぁ、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

お礼率 82% (209/252)

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つ目の画像が変わるだけですもんね。

手のかかるヤツで申し訳ないんですが、複数のクッキーを発行することによってボタン画像も複数にする方法、フォローしていただけるとありがたいのですが…

いずれにしても、なかなかご回答を頂けないような面倒な質問にお答えいただき、この度はどうもありがとうございました。
投稿日時 - 2001-11-08 20:12:47


このQ&Aで解決しましたか?
関連するQ&A
-PR-
-PR-
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する
-PR-
-PR-
-PR-

特集


いま みんなが気になるQ&A

関連するQ&A

-PR-

ピックアップ

-PR-
ページ先頭へ