Search code examples
imageonclickhoveronmouseout

Click image to change it, with hover effect HTML

When I click my image, it changes (i removed onmouseover to test), but when i mouseout it reverts. How do I make it so my image has a rollover effect and also stays as the new image once clicked?

<img src="images/Character/NotSelected_Mage.png" alt="image"
onclick="this.src='images/Character/Selected_Mage.png'"/
onmouseover="this.src='images/Character/Selected_Mage.png';"
onmouseout="this.src='images/Character/NotSelected_Mage.png';">

I'm a beginner so i'm only using html, if I have to use CSS or javascript or jquery (would that mean users would have to install javascript to view my website?) do I have to place anything in my code to tell it that i'm suddenly using something other than html?

Solution

  • Try changing the line:

    onclick="this.src='images/Character/Selected_Mage.png'"

    To:

    onclick="this.src='images/Character/Selected_Mage.png'; this.onmouseover = false; this.onmouseout = false;"