2013-03-22 2 views
0

Я пытаюсь сделать панель навигации, закрепленную в нижней правой части страницы, которую я сделал, и я собирался сделать карту изображения из нее, пока я не пошел в Dreamweaver и мое изображение даже не появлялось, чтобы рисовать вокруг, я собирался сделать это вручную, пока не подумал, будет ли это работать? (так как он на самом деле все время перемещается, его трудно сделать на нем.) Как бы я мог превратить свой образ в работоспособные кнопки?Как сделать изображение карты нижнего колонтитула

here's what my footer looks like

+1

Он движется? Это анимированный gif на вашем сайте? Dreamweaver - хороший инструмент для настройки карт изображений. Возможно, вам нужно будет проверить путь к вашему изображению в Dreamweaver, чтобы он мог найти изображение, чтобы вы могли рисовать карту imagemap. Вы можете настроить карту изображений вручную, но я нахожу, что это много проб, ошибок и разочарований. Визуальный инструмент позволит сэкономить время и дать вам результаты, которые вам нравятся. –

+0

его не анимированный gif. он движется в том, что при изменении размера браузера он остается в углу. и когда вы прокручиваете его, он продолжает оставаться в углу. это оно! я дважды проверю свой путь. спасибо :) – rachel

+0

, но будет ли карта изображений работать над чем-то, что фиксируется в правом нижнем углу? – rachel

ответ

1

Если вы не можете получить Dreamweaver сотрудничать, вы всегда можете попробовать веб-приложение, как это:

http://www.image-maps.com/

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

1

Если найти трудно отобразить изображение, а не использовать position: relative; для контейнера, а затем использовать <a> и использовать следующие стили

a { 
    display: block; 
    height: 30px; /* Set accordingly */ 
    width: 30px; /* Set accordingly */ 
    position: absolute; 
    /* Now set top, bottom, left, right according to your requirements */ 
} 

Просто примечание стороны, используйте border: 1px solid #f00; просто чтобы убедиться, что ваш <a> обертывания решила цель, которую позже вы можете удалить или отключить границу.

Также вы можете использовать :nth-of-type для <a>, так что вам не нужно объявлять классы для каждого элемента <a>

Смежные вопросы