Triangled image maps and hover effects

I'm trying to create a pretty simple hover effect with two triangles that I have. One of the trian开发者_C百科gle would start off underneath it, then on hover, show above the other triangle.

The issue isn't really the effect, it's that the area boxes get in the way. Meaning the left triangle, which temporarily has a z-index above the other triangle, overlaps unnecessarily just because it's perimeter is a square and has a lot of wasted space.

So hovering over triangle 2 only works in so many areas. I've tried to do an image map and utilizing the coordinate maps to do what I need, but I couldn't figure out how to keep it in triangle format while using it to do what I need to do. It just goes to a square.

Is there a way to do this? It's basically just hovering over a specific shape, but CSS/HTML seems to be limited to squares. Any jQuery solutions or..?

Thank you.

Without 100% knowing what you're going for here, I'm going to suggest a general method I used to overcome a somewhat similar problem I had on a past project.

The easiest way to do this is to place all your images in the same staging container, such as a div with position: relative, that is used to give the images a stacking and positioning context. Finally, overlay the entire div with a transparent 1x1 GIF or PNG image that is placed as the last child in the markup with 100% width/height and apply an image map to that blank image. The type of area necessary for creating the triangle shape is a "poly" area. This allows you to specify free-form point-to-point image map area. You would then link your mouseover/mouseout JavaScript to this image map area.

For instance (the CSS positioning and map coordinates are just an example and you will have to specify those yourself, of course):

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();
    });
});

See a working example at this fiddle.

ImageMapster, my jquery image map plugin will probably enable you to do this pretty easily with an image map. It's not totally clear what you are trying to do from the description but the plugin lets you use a second image for a highlight effect, and also lets you define areas other than the hover area to be shown after an event.

This example may be similar to what you are trying to achieve (mouse over the middle circle). You could just have the rectangle (== your 2nd triangle) be invisible before a mouseover.