Trying to keep header links visible on all pages - html

Question

I have added a My account link and a wishlist link to my header. It shows fine on the home page but when I go on to any other page, the images are no longer displayed, all I see is the Alt text.
Can someone help me tweak my code so that the same images are shown properly on all pages? :-)
I have tried to do it so that the pictures change color on hover by having one image below the other...
PHP:
<div id="myaccount">
<a href="wordpress/my-account"><img class="bottom" src="wp-
content/themes/mt_theme/images/my_account_hover.png" alt="My
Account"/>
<img class="top" src="wp-content/themes/my_theme/images/my_account.png" alt="My Account"/>
<p class="icotext">My Account</p>
</a>
</div>
<div id="wishlist">
<a href="wishlist"><img class="bottom2" src="wp-content/themes/smy_theme/images/wishlist_hover.ico" alt="Wishlist"/>
Wishlist
CSS:
#myaccount{
position: relative;
margin: 0 auto;
}
#myaccount img {
position:absolute;
left:900px;
top: -20px;
Height: 50px !important;
width: 50px !important;
}
a:hover img.top {
opacity:0;
}
.icotext{
position: absolute;
left: 890px;
top: 28px;
color: #000000
}
a:hover .icotext{
font-weight: bold;
left: 888px;
}
#wishlist{
position: relative;
margin: 0 auto;
}
#wishlist img {
position:absolute;
left:990px;
top: -20px;
Height: 50px !important;
width: 50px !important;
}
.icotext2{
position: absolute;
left: 992px;
top: 28px;
color: #000000
}
a:hover .icotext2{
font-weight: bold;
left: 990px;
}
a:hover img.top2 {
opacity:0;
}
img.bottom2 {
opacity:0;
}
a:hover img.bottom2 {
opacity:1;
}
img.bottom {
opacity:0;
}
a:hover img.bottom {
opacity:1;

Answer 1

I'm guessing the other pages are trying to get the images from another folder.
src="wp-content/themes/my_theme/images/my_account.png"
You are using a relative address that is interpreted as "{current folder}/wp-content/..."
Try using
src="/wp-content/themes/my_theme/images/my_account.png"
The / on the front will be interpreted as "{site_root}/wp-content/..."