0

Webページにドロップダウンリストがあります。現在、リストで選択されている個々の画像が表示されます。

私が達成したいのは、たとえばパブなどのセクターが選択された場合です。これを行う知識のある人なら誰でも、1つの個別の画像ではなく、パブの画像のグループが表示されます。大学などの別のオプションを選択すると、大学のロゴの複数の画像が表示されます。

ドロップダウンリストとして使用している場合でも、画像にマウスクリックハイパーリンクを追加する方法はありますか？

これは可能だと思いますが、この件に関する情報はあまり見つかりません。

どんな援助も素晴らしいでしょう。

私のHTMLコード：

<table border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td width="100%">
            <form name="mygallery">
                <p>
                    <select name="picture" size="1" onChange="showimage()">
                        <option selected value="gfx/Marstons.jpg">Marstons pubs</option>
                        <option value="gfx/NorthUni.jpg" href="http://www.northumbria.ac.uk/">Northumbria University</option>
                    </select>
                </p>
            </form>
        </td>
    </tr>
    <tr>
        <td width="100%">
            <p align="center">
                <img src="gfx/Marstons.jpg" name="pictures" width="99" height="100">
        </td>
    </tr>
</table>

私のJavascript

function showimage() {
    if (!document.images) return
    document.images.pictures.src = document.mygallery.picture.options[document.mygallery.picture.selectedIndex].value
}
4

1 に答える 1

1

何が必要なのかわかりませんが、select オプションに直接 href 属性を追加することはできません。

ユーザーが選択したときに img に適用するオプションに URL のみを追加する場合は、html5 で提供される data-* 属性を使用できます。

リクエストで提供されたコードの例を次に示します。

ライブテスト用の JS フィドル:http://jsfiddle.net/BVAkh/1/

HTML部分：

<html>
  <head></head>
  <body>
    <table border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td width="100%">
            <form name="mygallery">
                <p>
                    <select name="picture" size="1" onChange="javascript:showimage()">
                        <option selected value="gfx/Marstons.jpg">Marstons pubs</option>
                        <option value="gfx/NorthUni.jpg" data-href="http://www.northumbria.ac.uk/">Northumbria University</option>
                    </select>
                </p>
            </form>
        </td>
    </tr>
    <tr>
        <td width="100%">
            <p align="center">
              <img src="gfx/Marstons.jpg" name="pictures" width="99" height="100" />
          </p>
        </td>
    </tr>
</table>
      </body>
    </html>

JS部分：

function showimage() {
    if (!document.images) return;
    var selectedItem = document.mygallery.picture.options[document.mygallery.picture.selectedIndex];
    document.images.pictures.src = selectedItem.value;   

    if(selectedItem.getAttribute("data-href")) {
      document.images.pictures.onclick = function() {
        window.location.href = selectedItem.getAttribute("data-href");
      }
    }
    else {
      document.images.pictures.onclick = null;
    }  
}

でも、イメージチェンジは考え直したほうがいいと思います。p に id を設定し、innerHTML でコンテンツを変更してください。<a></a>data-href が提供されている場合は、画像にタグを追加できます。

于 2013-01-14T14:30:24.620 に答える