0

アイコンとラベルで構成されたメニューがあります。アイコンをクリックすると、関連するラベルが青色に変わります。最近、ピクセルのスワップと呼ばれる手法について耳にしましたが、アイコンも青色にできるのではないかと思いました。可能であれば、純粋な Javascript を使用してください。

これは私が現時点で持っているコードです...

function init() {

    [].forEach.call(document.querySelectorAll('.navico'), function(el) { 
        el.addEventListener('click', imageButtonClickHandler); 
    });


    function imageButtonClickHandler() {  

    this.id.search("aboutnav"); 
       if(this.id.match("aboutnav")) {
            grey();
            var a = document.getElementById("a");
            a.style.color = 'blue';
            a.style.fontSize = '15px';

        }

上記の関数で呼び出される関数「灰色」は JQuery であり、私のパートナーによって作成されたものなので理解できませんが、選択を解除するか、別のアイコンをクリックすると、選択したメニュー オプションが基本的に灰色に戻ります。

前もって感謝します。

4

1 に答える 1

1

アイコンが画像の場合、JavaScript を使用して画像を直接変更する方法はありません。ただし、他の画像を使用して画像の外観を変更する手法はあります。

たとえば、「アイコンを青くする」がアイコンの特定の色のパターンを変更したい場合、青くしたい部分だけを透明にし、画像内の他のすべてを透明にする別の画像を作成できます (カットアウトを考えてください)。 ）。次に、より高い z-index を使用してアイコンと同じ場所に画像を配置しますが、visibility:hidden (または、必要に応じて display:none) を設定します。次に、画像を青色にすることは、画像を表示することを意味します。

アイコンを青色にすることで、青色の「色合い」を持たせたい場合は、半透明の png を作成して同じ手法を使用できます。また、要素 (div など) を作成し、背景色を青に設定してから透明度を設定するだけで、青味を出すこともできます。このようにして、使用したい色ごとに画像を作成する代わりに、任意の色を選択できます。

于 2013-08-02T18:30:33.640 に答える