| |
|
|
| | Проблема в следующем:
Есть картинка (в аттаче сообщения). На ней в определенных местах расположены области, в которых должны быть ссылки (например, ссылка 1, ссылка 2 итд).
Ссылки необходимо расположить не относительно всего документа, а именно относительно картинки. То есть, чтобы контейнер с картинкой можно по странице было бы гонять туда-сюда, а ссылки при этом оставались бы каждая на своем месте.
Может, делал кто чего-нибудь похожее? Хотя б на мысль верную натолкните)) | |
| |
|
|
| |
|
|
| |
для: aexb
(21.06.2006 в 19:08)
| | | <MAP NAME="pic">
<AREA HREF="page1.php" SHAPE="poly" COORDS="92,76,167,49,177,62,97,93,92,76">
<AREA HREF="page2.php" SHAPE="poly" COORDS="205,37,259,25,260,36,209,52,205,37">
<AREA HREF="page3.php" SHAPE="poly" COORDS="303,13,367,6,373,16,308,30,303,13">
</Map>
<img src="/pictures/pic.jpg" width="431" height="131" alt="" usemap='#pic' border="0">
Смотри вообщем документацию на тему map | |
| |
|
|
| |
|
|
| |
для: valenok
(21.06.2006 в 19:22)
| | | Вопрос в другом: ссылки НЕ ДОЛЖНЫ РИСОВАТЬСЯ на картинке, а должны писаться в HTML. Это условие - обязательно. | |
| |
|
|
| |
|
|
| |
для: aexb
(21.06.2006 в 19:24)
| | |
<img src="image.jpg" id='img' style="left:100px; top:100px;">
<div id='div' style="left:115px; top:115px;"><a href="site">Link</a></div>
<SCRIPT language="JavaScript">
var left = 15; // Как далеко с лева текст от левого края картинки
var top= 15; // Как далеко с верху текст от верхнего края картинки
document.getElementById('div').style.left=document.getElementById('img').style.left + "px";
document.getElementById('div').style.top=document.getElementById('img').style.top + "px";
</SCRIPT>
|
| |
| |
|
|
| |
|
|
| |
для: valenok
(21.06.2006 в 19:31)
| | | Нет, к сожалению, предложенный вариант не работает. Вот мой кривой:
<html>
<style>
div.img {
width: 400px;
height: 400px;
background: url('for_links.gif');
background-repeat: no-repeat;
}
div.img div {position: absolute;}
</style>
<body>
<div class="img">
<div style="top: 70; left: 80; z-index: 1">link1</div>
<div style="top: 138; left: 240; z-index: 2">link2</div>
<div style="top: 230; left: 120; z-index: 3">link3</div>
<div style="top: 320; left: 260; z-index: 4">link4</div>
</div>
</body>
</html>
|
Работать-то это работает, но если картинка сдвигается, скажем, влево, то надписи при этом остаются на месте. Из-за position:absolute. Как привязать надписи именно к картинке? Дело в CSS, только не пойму, чего не хватает (или, наоборот, лишнее). | |
| |
|
|
| |
|
|
| |
для: aexb
(21.06.2006 в 20:08)
| | | Вот, накатал скриптик )
<body onresize = rePos()>
<center><img src = "1.jpg" id = "img">
<script>
// Позиционируем инфу относительно объектов. (c) Бог зайцев
function getCoords(obj)
{
/* Функция находит координаты объекта */
x=0;
y=0;
oid=obj.id;
while(obj){
x+=obj.offsetLeft;
y+=obj.offsetTop;
obj=obj.offsetParent;
}
return [x,y]
}
function addData(obj,left,top,txt)
{
/* С помощью этой функции добавляем html код, который
позиционируем относительно объекта )) */
coords = getCoords(obj)
x=coords[0];
y=coords[1];
document.write('<div pos = "'+oid+'" qleft="'+left+'" qtop="'+top+'" style = "position:absolute;left:'+(left+x)+';top:'+(top+y)+';padding:0;">'+txt+'</div>')
}
function rePos()
{
/* Мы хочим предусмотреть все случае. А координаты картинки могут быть заданы неявно, например она может быть отцентрована. Поэтому при изменении размеров окошка мы должны подправить расположение наших объектов)) */
for(i=0;i<(d=document.getElementsByTagName
('div')).length;i++)
{
if((p=d[i].getAttribute('pos')))
{
obj=document.getElementById(p);
lf=d[i].getAttribute('qleft')*1;
tp=d[i].getAttribute('qtop')*1;
coords = getCoords(obj)
x=coords[0];
y=coords[1];
d[i].style.left=lf+x;
d[i].style.top=tp+y;
}
}
}
/* Теперь собсна добавляем сами ссылки, или чего там нам надо )
Первым идет объект, относительно которого надо позиционировать код
Затем идет координата Х относительно объекта (!)
Затем идет координата Y относительно объекта (!)
Последним параметром передаем сам код, тут может бысть ссылка или другая картинка )
*/
addData(document.getElementById('img'),20,20,'<b>Привет! Как дела?!</b>');
</script>
|
| |
| |
|
|
