2

私は自分のウェブサイトで動作するコードを持っています。現在、href="#image1" アンカー タグを含むテキスト リンクを使用して、特定の div タグ内の画像を別の画像に置き換えています。

この背後にある原則は、住所のテキストをクリックすると、地図がその特定の住所の地図の画像に変わるということです。ただし、現在、画像にグラデーション オーバーレイを使用しており、実際のマップは css 背景画像を使用してコーディングされています。

.map-grad {
    background-image: url(../img/map.png);
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader( src=//ssl.gstatic.com/s2/oz/images/local/map_gradient.png, sizingMethod=scale)";
    background: -webkit-linear-gradient(top, transparent 0%, transparent 66%, rgba(0, 0, 0, 0.294) 77%, rgba(0, 0, 0, 0.497) 91%, rgba(0, 0, 0, 0.7) 100%), url(../img/map.png);
    background: -moz-linear-gradient(top, transparent 0%, transparent 66%, rgba(0, 0, 0, 0.294) 77%, rgba(0, 0, 0, 0.497) 91%, rgba(0, 0, 0, 0.7) 100%), url(../img/map.png);
    background: -ms-linear-gradient(bottom, transparent 0%, transparent 66%, rgba(0, 0, 0, 0.294) 77%, rgba(0, 0, 0, 0.497) 91%, rgba(0, 0, 0, 0.7) 100%), url(../img/map.png);
    background: -o-linear-gradient(bottom, transparent 0%, transparent 66%, rgba(0, 0, 0, 0.294) 77%, rgba(0, 0, 0, 0.497) 91%, rgba(0, 0, 0, 0.7) 100%), url(../img/map.png);
    background: linear-gradient(bottom, transparent 0%, transparent 66%, rgba(0, 0, 0, 0.294) 77%, rgba(0, 0, 0, 0.497) 91%, rgba(0, 0, 0, 0.7) 100%), url(../img/map.png);
    background-position: center;
    height: 250px;
    max-height: 250px;
    max-width: 1600px;
}

私のjQueryは次のとおりです。

 var itemInfo = { // Initialise the item information
      img1: ['/img/map.png', ''],
      img2: ['/img/map2.jpg', ''],
};

$(function() {
      $('#maps a').click(function() { // When an item is selected
            var id = $(this).attr('href').replace(/#/, ''); // Retrieve its ID
            $('#info img').attr('src', itemInfo[id][0]); // Set the image
            $('#info p').text(itemInfo[id][1]); // And text
            return false; // Prevent default behaviour
      });
});

画像リンクの形式は次のとおりです。

<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>

置き換えられる実際の画像は次のとおりです。

<div class="map-grad">
    <div id="info">
        <img src="/img/map.png">
    </div>
</div>

CSSの背景画像を介してこれらの画像を置き換える方法を提案してください。私が考えていたのは、background-image css タグを .map-grad から削除し、これを次のように単純に配置することでした。

<div id="info">
<div class="map-grad" style="background-image: url(../img/map.png);"></div>
</div>

現在置き換えられているimg srcではなく、css urlを置き換えるようにjQueryをコーディングしますか? 何か考えや助けはありますか？ありがとう

4

1 に答える 1