Карты треугольных изображений и эффекты наведения - PullRequest
Новая
       17

Карты треугольных изображений и эффекты наведения

1 голос
/ 26 мая 2011

Я пытаюсь создать довольно простой эффект наведения с двумя имеющимися у меня треугольниками.Один из треугольников начинался бы под ним, а затем при наведении указывал на другой треугольник.

На самом деле проблема не в том, что мешают блоки областей.Значение левого треугольника, который временно имеет z-индекс над другим треугольником, излишне перекрывается только потому, что его периметр является квадратом и имеет много потерянного пространства.

Таким образом, зависание над треугольником 2 работает только во многихобласти.Я пытался сделать карту изображения и использовать карты координат, чтобы сделать то, что мне нужно, но я не мог понять, как сохранить его в формате треугольника, используя его, чтобы сделать то, что мне нужно.Это просто уходит в квадрат.

Есть ли способ сделать это?В основном это просто зависание над определенной формой, но CSS / HTML кажется ограниченным квадратами.Любые решения jQuery или ..?

Спасибо.

Ответы [ 2 ]

2 голосов
/ 27 мая 2011

ImageMapster, мой jquery плагин для карты изображений , вероятно, позволит вам сделать это довольно легко с картой изображений.Из описания не совсем понятно, что вы пытаетесь сделать, но плагин позволяет использовать второе изображение для эффекта выделения, а также позволяет определять области, отличные от области наведения, которые будут отображаться после события.

Этот пример может быть похож на то, что вы пытаетесь достичь (наведите курсор на средний круг).Вы можете просто сделать прямоугольник (== ваш 2-й треугольник) невидимым перед наведением мыши.

2 голосов
/ 27 мая 2011

Не зная на 100%, что вы здесь делаете, я собираюсь предложить общий метод, который я использовал для преодоления несколько схожей проблемы, с которой я сталкивался в прошлом проекте.

Самый простой способ сделать это - поместить все ваши изображения в один промежуточный контейнер, такой как div с position: relative, который используется для придания изображениям контекста укладки и позиционирования. Наконец, наложите на весь div прозрачное изображение GIF или PNG размером 1x1, которое помещается как последний дочерний элемент в разметке со 100% шириной / высотой, и примените карту изображения к этому пустому изображению. Тип области, необходимой для создания треугольной формы, является областью «поли». Это позволяет вам указывать произвольную форму двухточечной карты изображения. Затем вы должны связать свой JavaScript при наведении курсора мыши с этой областью карты изображений.

Например, (позиционирование CSS и координаты карты - только пример, и вам, конечно, придется указать их самостоятельно):

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>

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%;
}

JQuery 

$(function() {
    $("#areaTriangle").hover(function() {
        $("img.triangle2").show();
    }, function() {
        $("img.triangle2").hide();
    });
});

См. Рабочий пример на этой скрипке .

...