Forum Moderators: open
I would not suggest using an actual html image map - there are major accessibility issues, and I even suspect some search engine issues that haven't gone away.
But you can get the same effect by nesting two divs for each section, with defined width and height. Then position:absolute will get the nested pair positioned right where you need them. Use your default image as a background-image for the outer div.
Then the inner div holds your actual link - which can be anchor text that you wrap in a tag defined as visibility:hidden. CSS can now define a hover behavior that uses a new background image for the anchor element in the inner div.
It may sound complex, but play around with it for a while, and you'll see how it works. There are some tutorials around the web for coding an "image map hover" that will take you step by step, if you want that. I prefer working through it on my own - it sets the concepts in my brain.
You say your are a noob, so this might be a bit much to bite off - especially if your css and html chops are just growing. But a project like this will grow them up pretty fast!
Unless you want the complete background to change for the entire sidebar when just one link is hovered. Then you will need some Javascript to access the DOM and switch styles for the sidebar container so the background changes all over.
