Question: Why is it that I can't use a relative path for `IO.StreamReader("Resources/file.txt")`?

I'm working with a web app, so obviously the file isn't going to be in the same absolute location between my development machine and the server.

How can I fix my filename path so it finds the file?

For reference, I have a file (relative to the page calling it) at path "Resources/file.txt" but the stupid function is looking in root "C:\Program Files (x86)\Microsoft Visual Studio 9.0\Common7\IDE." And just in case it matters, I'm on .NET 3.5 at the moment.

Thanks. :)

Answer: 
I set a breakpoint in your `hideState` function and looked at these properties:

* `e.target`
* `e.relatedTarget`

The first is the element that triggered the event. This was the area, as expected. For mouse enter/exit events, the 2nd is the area that the mouse moved into. In this case it is:

```
<div class="state SK hover" 
    style="background-image:url(/map/icons/SK.png); 
     width:97px; height:176px; background-repeat:no-repeat;">
</div>

```

So you have a series of rectangular DIVs overlaid on top of the image map. When you show the DIV, in the same area where the mouse is, it becomes the topmost layer, and the mouse therefore exits the `area` and enters the `div` causing the problem you are seeing.

In order to solve this problem, you need to be sure that the imagemap is always the topmost layer, yet you can still see the `div` elements through it. You can do this by making a copy of the image, and making the imagemap transparent (but with a higher z-index than the divs). Basically, you have 3 layers: the bottom one is the visible image; the 2nd one is your `div` elements, the top one is the imagemap (but completely transparent). The markup is like this:

```
    <img src="http://luff.redlinestaging.com/map/map_canada.png" 
        class="map_canada" 
        style="position: absolute; left: 0; top: 0">

    <img src="http://luff.redlinestaging.com/map/map_canada.png" 
        usemap="#canada" 
        class="map_canada" 
        style="z-index: 1000; opacity: 0; position: absolute; left: 0; top: 0;">

```

The `position: absolute` is needed to put the two images on top of each other. You will notice the first one has no imagemap. It's not needed. This is just for show: this is the background image you can see. The 2nd one is the imagemap, but `opacity:0` makes it invisible, and `z-index:1000` ensures it is always on top, even when you add the divs later as a result of the mouseover event. So the imagemap still has the highest priority, but it doesn't conceal the actual image or the divs that will be rendered behind it.

Working example:

<http://jsfiddle.net/eZTV3/>

An alternative is to use [ImageMapster](http://www.outsharked.com/imagemapster) which is a jquery plugin to do this for you without the need to manage alternate images for each area. That is- you can provide it with a single alternate image and it will use the data from each respective area to fill the highlights. The first demo on the web site shows this.
I have added the following to SK:

```
.SK:hover {
    display:block !important;
    background-image:url("http://luff.redlinestaging.com/map/icons/SK.png"); 
    width:97px; 
    height:176px; 
    background-repeat:no-repeat;
}

```

If you look at my sample, you will see that SK does not have this problem.

<http://jsfiddle.net/webwarrior/d2nNN/10/>

I am still trying to figure out why...

Maybe the CSS hover could end up being enough, but could be slow to load.
When I tried removing the Javascript, the CSS hover did nothing.

Here the "ON" state is working nicely too:

<http://jsfiddle.net/webwarrior/d2nNN/13/>

hth.