If you're not entirely sure what direction to take, I can share a technique I once used to solve a similar issue on a previous project.
To address this, consider placing all images within a shared staging container like a div with a position: relative property to establish the stacking and positioning context for the images. Then, overlay the entire div with a transparent 1x1 GIF or PNG image as the last child in the markup, with dimensions set to cover the whole container. By applying an image map to this blank image, specifically using a "poly" shape area, you can define a free-form point-to-point region for interactive purposes. Link your mouseover/mouseout JavaScript actions to this image map area.
For example (actual CSS positions and map coordinates will need to be tailored to your specific needs):
The HTML
<div class="imagePanel">
<img src="http://www.mysite.com/images/triangle1.png" alt="" class="triangle1" />
<img src="http://www.mysite.com/images/triangle2.png" alt="" class="triangle2" />
<img src="http://www.mysite.com/images/blank.gif" alt="" class="imageMap" usemap="#mapOver"/>
<map id="mapOver" name="mapOver">
<area id="areaTriangle" shape="poly" coords="25,240,108,100,190,240" href="#" />
</map>
</div>
The CSS
div.imagePanel
{
position: relative;
width: 300px;
height: 300px;
}
div.imagePanel > img
{
position: absolute;
}
img.triangle1
{
left: 25px;
top: 100px;
}
img.triangle2
{
left: 75px;
top: 75px;
display: none;
}
img.imageMap
{
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
The jQuery
$(function() {
$("#areaTriangle").hover(function() {
$("img.triangle2").show();
}, function() {
$("img.triangle2").hide();
});
});
Check out a live demonstration on this fiddle.