[JS]見てるページのメニューを変更する（ボタンが画像の場合）

by

前に書いた記事のクラスを追加するタイプの場合だと、リンクしてるものが文字じゃなくて画像だったりすると画像そのものが変更出来ない。
そんな質問を見つけたので、画像ボタンの場合のものを作ってみた。

基本の判定は同じ（ファイル名とリンクのsrc一致）で、一致した場合クラス追加じゃなくて画像のsrcに_onを追加します。

<div id="menu">
<ul>
<li><a href="index.html"><img src="image/01.png" /></a></li>
<li><a href="menu2.html"><img src="image/02.png" /></a></li>
<li><a href="menu3.html"><img src="image/03.png" /></a></li>
</ul>
</div>

表示してるページのメニューがこうなる▼

<li><a href="menu3.html"><img src="image/01_on.png" /></a></li>

window.onload = function() {
if (document.getElementsByTagName) {
var myMenu = document.getElementById(“menu”).getElementsByTagName(“a”);
var myHref = document.location.href;
var myUrl = FilePass(myHref);
var HrefList = new Array();
for (var i = 0; i

「[JS]見てるページのメニューを変更する（ボタンが画像の場合）」への3件のフィードバック

  1. はじめまして。
    とても素晴らしいボタンなので使わせてください。
    そこでお願いなのですが、
    マウスオーバの時の画像は共通の画像を使っているようなので、
    独自の　[strong]画像_on[/strong]　にするにはどうしたらいいのでしょうか？

    上記のようにしたいのですが、
    出来ましたら教えていただけると助かります。

    よろしくお願いします。

    返信

  2. 追記です。
    タグが表示されないのでもう一度書きます
    吐き出された画像は

    <a href="menu3.html" rel="nofollow"></a>

    それと、他でjQueryを使っていると、マウスアウト時に画像が見つからないと言われます。
    IDを変えればいいことでしょうか？

    返信

  3. Beckyさん
    ソースコードはエンティティ化したものを貼付けてください。
    jQueryがあるならjQueryのプラグインを使う方が早いですよ。

    返信

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。