カテゴリー別アーカイブ: JavaScript

マウスを乗せると画像が切り替わるようなページは、ホームページビルダー8を使う場合、どのようにしてやればいいですか?

マウスカーソルを画像に乗せると、画像が切り替わる仕組みのことを「画像のロールオーバー効果」と呼びます。設定方法ですが、まず、ホームページビルダーのページ編集モードで、画像を挿入後、その画像を右クリックして「画像ロールオーバー効果の設定」を選びます。その後は、ウィザードに従い、切替後の画像ファイルを選択すればOKです。もちろん、ロールオーバー効果を設定した画像にも、リンクを設定することができます。切替後の画像ファイルは、切替前の画像ファイルを一部加工した形式に設定することも可能です。



ただし、ロールオーバー効果を使いすぎると、次のようなデメリットが発生するので注意して下さい。



1.画像が2枚必要になるので、ホームページのサイズが増えて

重くなるので、ブラウザの表示時間が長くなる。



2.ロールオーバー効果を処理するために、JavaScriptの

複雑なソースコードが、HTMLファイル内に埋め込まれる。

なので、SEO(検索エンジン最適化)上は、不利。

フォームから入力された値をgetElementsByNameで取得する方法について教えてください

HTML

1つ目のフォーム<input name="tokyo" type="text"><br>
2つ目のフォーム<input name="tokyo" type="text"><br>
3つ目のフォーム<input name="tokyo" type="text"><br>
<button onclick="getElements()">押す</button>

JavaScript

function getElements() { 
    var elements = document.getElementsByName("tokyo") 
	alert(elements[0].value + elements[1].value +  elements[2].value)
}

解説:
HTMLでは3つの入力フォームを作成しています。
すべてに name=”tokyo” を設定しています。これをキーとして
getElementsByName(“tokyo”) にて、3つのフォームから入力されたオブジェクト(3つ)を
配列として受け取ります。
配列の添え字は 0 から始まります。valueで値を取得できます。
alert(elements[0].value + elements[1].value + elements[2].value)
は、3つの値を画面に表示させている処理です。個別にも出せますが、ここでは一緒に出すために+で文字列をつなげています。

たとえば、3つのフォームから
渋谷
恵比寿
新宿
と入力してボタンを押した場合、ウインドウには
渋谷恵比寿新宿
と連結して表示されます。