Image Hover does not show ...?

Question

I'm having problems with the toolbar for my website ... I do a good job of this, but some parts of it do not work too well. I'm trying to make the image change color / image on hover. However, this does not work when I use the background-image tag in css. It shows the original image that I had, but does not change ... That's what I still have

#heading-button-1{
margin-left: 15%;
background-image: url(toolbar-button-home-default.png);
display: block; 
}

#heading-button-1:hover{
background-image: url(Website/toolbar-button-tracks-highlighted.png);   
width: 7%;
height: 8%;
display: block;
}

    <a type="button" id="heading-button-1" title="Home" href="#" target="_blank" class="toolbar-buttons">
    </a>

    <a title="Tracks" href="#" target="_blank" class="toolbar-buttons">
    <img type="button" id="heading-button-2" src="Website/toolbar-button-tracks-default.png" width"7%" class="toolbar-buttons"/>
    </a>

But this doesn’t seem to work, as you can see in the screenshot I took. I am using Adobe Dreamweaver CC 2015, so if you have any links, suggestions or solutions, please help :)

Answer 1

javascript , .

onmouseover onmouseout

<a title="Tracks" href="#" target="_blank" class="toolbar-buttons">
<img src="Original.jpg" onmouseover="this.src='Hover.jpg'" onmouseout="this.src='Original.jpg'" border="0" alt=""/>
</a>

Original.jpg Hover.jpg , , .

onclick

onclick , , , , , .

<a title="Tracks" href="#" target="_blank" class="toolbar-buttons">
<img src="Original.jpg" onclick="this.src='Click.jpg'" border="0" alt=""/>
</a>

Answer 2

• , , . , Linux , url(Website/... url(Website/... - .
• ? , ?
• , display: block; , , .
• - text-decoration: none;
• .png , , , background-color: #CC393E;. .

nav a {
  padding: 10px 20px;
  background-color: #CC393E;
  display: inline-block;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  font-size: 24px;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  font-family: Helvetica, sans-serif;
}

nav a:hover {
  background-color: #af2c30;
}

<nav>
  <a href="#">Home</a>
  <a href="#">Tracks</a>
</nav>

Hide result

, , javascript