將切換類應用到圖像元素

我正在構建一個離子應用程序，我想單擊圖像並使用其他圖像進行更改。這是一個切換功能。將切換類應用到圖像元素

我有以下類：

img{ 
&.default { 
    background-image: url("img/726-star.png"); 
    &.activated{ 
    background-image: url("img/726-star-selected.png"); 
    } 
}

我將類，如下圖所示：

<img class="default" style="width:38px;height:38px;margin-top:30px;"/>

但是，當我在Chrome調試工具，看到我沒有看到默認的類被應用。我究竟做錯了什麼？

更新：所以，我使用DIV現在不是圖像，但我沒有看到在div顯示的圖像：

#favImage { 
    &.default { 
    background-image: url("img/726-star.png"); 
    } 
    &.activated { 
    background-image: url("img/726-star-selected.png"); 
    } 
}

<div id="favImage" class="default" style="width:38px;height:38px;margin-top:30px;"></div>

來源

2016-03-27 john doe

嘗試'IMG { ＆.DEFAULT { 背景圖像：URL（「IMG/726-star.png」）; } ＆.activated { background-image：url（「img/726-star-selected.png」）; } }' –

使用'div'或'span'代替它，而不是'img'標籤 –

請參閱帶有編輯的更新問題。 –

首先我recommened你sparate你的風格在HTML到一個CSS文件。如果您使用的是img標籤，請不要忘記將src屬性插入img標籤，否則img不會顯示。通過點擊它來改變圖像我使用JavaScript函數，通過在img標籤上寫入一個屬性「onclick」來激活JavaScript函數並調用JavaScript函數。該函數將圖像id映射到變量中，並使用匹配方法檢查圖像src是否包含字符串「726-star-not」，如果圖像src未更改爲「726-star-selected」，反之亦然。

to learn more about the match method

function myFunction() { 
 
     
 
    var image = document.getElementById('favImage'); 
 
    
 
    if (image.src.match("726-star-not")) { 
 
     image.src = "img/726-star-selected.png"; 
 
    } else { 
 
     image.src = "img/726-star-not.png"; 
 
    } 
 

 
}

#favImage{ 
 
    width:38px; 
 
    height:38px; 
 
    margin-top:30px; 
 
}

<html> 
 
    <head> 
 
     <link rel="stylesheet" href="css/style.css"/> 
 
     <script src="js/javascript.js"></script> 
 
       
 
    </head> 
 
    <body> 
 
     <img id="favImage" src="img/726-star-not.png" onclick="myFunction()"> 
 
    </body> 
 
</html>

來源

2016-03-27 11:31:44

非常感謝！我想知道是否所有這些都可以通過CSS完成，而無需編寫任何JS代碼。 –

將切換類應用到圖像元素

回答

相關問題