1

Javascriptでマルチロールオーバーをしようとしています。多くの人が css を使用すると言っていることは知っていますが、今回は Javascript で行う予定です。

とにかく、このロールオーバー階層には多くの問題があります。5 つのボタンを持つボタン イメージ ナビゲーションがあります。ボタンの 1 つにマウスを合わせると、ボタンの色が変わり、そのボタンの下に見出しが表示されます。次の部分は、ユーザーが見出しにカーソルを合わせる必要があることです。すると、見出しを説明するテキストを含む別の画像が表示されます。

たとえば、ボタンが赤いスマイルの場合、ロールオーバーすると青いスマイルになり、その下に Happy という見出しが表示されます。次に、幸せをロールオーバーすると、幸せとはどういう意味かを説明するテキストの画像が表示されます。これはクライアントが望んでいる方法であり、私がテキストの画像を使用している唯一の理由は、彼のテキストが独自のフォントを使用しているからです.

だから、私がこれをコーディングしようとしていて、仕事なしで答えを探していないことを示すために、これまでの私のコードを示します. それはある程度機能しますが、あまり良くありません。私はJavaScriptにあまり慣れていません。

function rollover()
{
  var images = document.getElementsByTagName("img");
  var roll = new RegExp("roll");
  var header = new RegExp("_(?=roll)");
  var text = new RegExp("_(?=text)");
  var simple = new RegExp("simple");
  var currentRoll;
  var preload = [];
  var fileLoc = "images/rollovers/";

  for ( var i=0; i<images.length; i++)
  {
    if (images[i].id.match(roll))
    {
      currentRoll = images[i].id;
      preload[i] = new Image();
      preload[i].src = images[i].id + "_over.gif";
      images[i].onmouseover = function() 
      { 
        var button = this.id;
        this.src = fileLoc + this.id + "_over.gif";

        for ( var i=0; i<images.length; i++)
        {
          if (images[i].id.match(header))
          {
            var temp = images[i].id;
            if (images[i].id == "_" + this.id + "_header")
            {
              images[i].src = fileLoc + this.id + "_header.gif";
              images[i].style.visibility="visible";
              images[i].onmouseover = function() 
              {
                  for ( var i=0; i<images.length; i++)
                  {
                    if (images[i].id.match(text))
                    {
                      var temp = images[i].id;
                      images[i].src = fileLoc + this.id + "_text.gif";
                      images[i].style.visibility="visible";
                      break;

                    }
                  }  
              }
              break;
            }
            else
            {
              images[i].src = fileLoc + this.id + "_header.gif";
              images[i].setAttribute("id", 
              images[i].style.visibility="visible";
              images[i].onmouseover = function() 
              {
                for ( var i=0; i<images.length; i++)
                {
                  if (images[i].id.match(text))
                  {
                    var temp = images[i].id;
                    images[i].src = fileLoc + this.id + "_text.gif";
                    images[i].style.visibility="visible";
                    break;

                  }
                }  
              }
              break;
            }
          }
        }
        images[i].onmouseout = function() 
        { 
          this.src = fileLoc + this.id + "_org.gif"; 
          for ( var i=0; i<images.length; i++)
          {
            if (images[i].id.match(header))
            {

              images[i].style.visibility="hidden"
            }
          } 

        }
      }  
    }

    else if (images[i].id.match(simple))
    {
      preload[i] = new Image();
      preload[i].src = images[i].id + "_over.gif";
      images[i].onmouseover = function() 
      {
        this.src = fileLoc + this.id + "_over.gif";  
      }
      images[i].onmouseout = function()
      {
        this.src = fileLoc + this.id + "_org.gif";
      }
    }
  }
}

window.onload = rollover;
4

1 に答える 1

4

クレープ..

jQueryの使用を検討する必要があります。

例えば..

$(
    function() {
        $("img.rollover").hover(
            function() {
                this.src = this.src.replace("_org","_over");
            },
            function() {
                this.src = this.src.replace("_over","_org");
            }
        );
    }
)

関数内では、可視性をいじって、他にやりたいことをすることもできます。

于 2008-12-22T17:18:14.000 に答える