私のウェブサイトは多言語です。
日本語のファイル: *_ja
英語語のファイル: *_en
フランス語のファイル: *_fr
のように、ファイル名に、"ISO 639-1" に従った言語コードを附加しています。
さて、テンプレート上に、言語別の国旗があり、国旗をクリックすると、自動的に、そのファイルの別の言語に飛ぶようにしたいです。実装にはJavaScriptを使うのが一番よいのかなと思います。
まとめますと、
ユーザが
http://example.com/index_ja.html を閲覧しているときにイギリス国旗をクリックすと、
http://example.com/index_en.html に飛ばす。
もし、フランス国旗をクリックすると、
http://example.com/index_fr.html に飛ばす。
という動作です。
要するに、国旗をクリックすると、現在閲覧中のファイル名の最後3文字を削除して、そこに国旗に応じた言語コードを差し替えて、そのページに飛ばす、というものです。
つきましては、上記のような動作をするJavaScriptの具体的なコードを、ご教示願います。
以下のようにHTMLだけでできるのだが、どこをJavaScriptにしたいのか?
<a href="index_en.html"><img src="イギリス国旗画像" /></a> <a href="index_fr.html"><img src="フランス国旗画像" /></a> <a href="index_jp.html"><img src="日本国旗画像" /></a> :
国旗ファイルの名前は「ja.gif」等とします。
<div id="lang_link"></div>
var elem = document.getElementById("lang_link"), lang = ["ja", "en", "fr"]; for (var i = 0; i < lang.length; ++i) { var link = elem.appendChild(document.createElement("a")); link.href = location.href.replace(/_\w+?\./, "_" + lang[i] + "."); link.appendChild(document.createElement("img")).src = lang[i] + ".gif"; }
もしくはリンク先を
<a href="javascript:lang_link('ja')"><img src="日本の国旗"></a>
等と指定し、
function lang_link(lang) { location.href = location.href.replace(/_\w+?\./, "_" + lang + "."); }
とすれば良いと思います。
<head></head>内(あるいは.jsファイルに)以下のように関数を定義して、
function change_lang( lang ) { location.href = location.href.replace( /_[a-z][a-z]\.html$/, '_' + lang + '.html' ); return false; }
例えば、フランス国旗には以下のようにリンクする
<a href="/index_fr.html" onclick="return change_lang('fr');"><img src="/img/flag_fr.gif" /></a>
というのはいかがでしょうか。こうしておけば、JavaScript が OFF の人はフランス語のトップに飛び、ONの人は現在見ているページのフランス語版に飛びます。
んー、多分違うと思います。
ファイル名は、index_*.html に限らないんですよ。
company_*.html かもしれないし、
address_*.html かもしれないし、
いといろあるのです。
テンプレートの国旗部分に記述できるのは、
「このページのその言語版に飛ぶ、その言語版のファイル名は、同じディレクトリで、最後の3文字が_*になっている」ということです。
そんなはずないでしょう。
国旗はテンプレート上にあるので、リンク先をべた打ちで指定することはできません。