Но т.к. абсолютный div на самом деле прямоугольный - ссылка не активна, она как-будто под стеклом.
Вопрос в том, можно ли сделать так, чтобы под этим бэкграундом все было активно?
Спустя 35 минут, 16 секунд (12.03.2012 - 21:56) bodja написал(а):
поменять слой для дива с ссылкой
Спустя 1 минута, 14 секунд (12.03.2012 - 21:57) Rigel написал(а):
bodja
не понял
не понял
Спустя 3 минуты, 41 секунда (12.03.2012 - 22:01) akuchkovsky написал(а):
Вот два моих варианта, либо так сделать:
1 Вариант:
Первому блоку с position: absolute; добавить свойство z-index: 1;
Второму блоку добавить position: relative; и z-index: 2;
2 Вариант:
Если есть возможность, то перенести ссылку в блок, а не под блок.
1 Вариант:
Первому блоку с position: absolute; добавить свойство z-index: 1;
Второму блоку добавить position: relative; и z-index: 2;
<div style="position: absolute; z-index: 1;"></div>
<div style="position: relative; z-index: 2; "><a href="#">текст ссылки</a></div>
2 Вариант:
Если есть возможность, то перенести ссылку в блок, а не под блок.
<div style="position: absolute;"><div><a href="#">текст ссылки</a></div></div>
Спустя 2 минуты, 18 секунд (12.03.2012 - 22:03) Rigel написал(а):
akuchkovsky
но так ссылка будет поверх красной области, а надо чтобы она именно "выглядывала" из-за красной области и была кликабельна.
но так ссылка будет поверх красной области, а надо чтобы она именно "выглядывала" из-за красной области и была кликабельна.
Спустя 13 минут, 51 секунда (12.03.2012 - 22:17) akuchkovsky написал(а):
| Цитата (Rigel @ 13.03.2012 - 01:03) |
| надо чтобы она именно "выглядывала" |
Добавить слой еще один и сделать его третьим z-index: 3; а ссылка будет z-index: 2
делов минут на 10-20, и картинку разрезать по слоям, как полагается, и все, больше не знаю как, удачи.
<div style="border: 1px solid black; position: absolute; width: 200px; height: 200px; z-index: 1;"></div>
<div style="background-color: blue; position: absolute; width: 30px; height: 200px; z-index: 3;"></div>
<div style="z-index: 2; position: relative;"><a href="#">FFFFFFFFFFFF</a></div>
Спустя 4 часа, 24 минуты, 22 секунды (13.03.2012 - 02:41) sebastjan написал(а):
Вот тебе для наглядности если так уж хочется линк сделать кликабельный и чтоб он из под друго слоя торчал.
Делает имитацию, накладываем поверх всего над текстом ещё один прозрачный блок который и будет кликабельный.
Но всё это честно говоря не от мира сего.
Картинку гиф приложил
И ещё, если очень приспичит можешь яваскрипт отслеживать высоту блока с текстом и задвать высоту блоку прозрачному-кликабельному.
Делает имитацию, накладываем поверх всего над текстом ещё один прозрачный блок который и будет кликабельный.
Но всё это честно говоря не от мира сего.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
.aa{
height: 200px;
width: 200px;
position: absolute;
top: 0px;
z-index: 10;
background-image: url(img/div-index-2.gif);
background-repeat: no-repeat;
background-position: 0px 0px;
border: 1pt solid #0033FF;
}
.dd{
height: 200px;
width: 200px;
position: absolute;
top: 0px;
text-align: right;
}
.link{
height: 60px;
width: 198px;
position: absolute;
top: 0px;
z-index: 20;
border: 1pt solid #CC0000;
cursor:pointer;
}
</style>
</head>
<body>
<div class="aa"></div>
<div class="dd">xxxxxxxx ffffff aaaaa aaaa aaaaa aaaa aaaa aaaa aaaa xxxx xxx xxxx xxxx xxxx xx </div>
<div class="link"></div>
</body>
</html>
Картинку гиф приложил
И ещё, если очень приспичит можешь яваскрипт отслеживать высоту блока с текстом и задвать высоту блоку прозрачному-кликабельному.
Спустя 5 часов, 51 минута, 44 секунды (13.03.2012 - 08:33) sergeiss написал(а):
Я так думаю, надо абстрагироваться от этого решения и попробовать сделать по-другому. Если я, конечно, правильно понял задачу 
Вобщем, у тэга IMG есть такая штуковина, как "карта" (MAP). Её форма может быть любой. И если сделать картинку, которую положить в DIV, сделать для картинки MAP, то можно сделать то, что ты хочешь.
Для этой карты можно сделать "свой" курсор, реагирование на события различные (JS)... Т.е. как-то выделить часть картинки, сделать её активной.
PS. Как выглядит работа с "картой" можно посмотреть тут: http://phpforum.ru/index.php?showtopic=22888&hl= (там ссылки есть). Можно посмотреть код страницы с картинкой и МАПами, чтобы понятнее было.
Вобщем, у тэга IMG есть такая штуковина, как "карта" (MAP). Её форма может быть любой. И если сделать картинку, которую положить в DIV, сделать для картинки MAP, то можно сделать то, что ты хочешь.
Для этой карты можно сделать "свой" курсор, реагирование на события различные (JS)... Т.е. как-то выделить часть картинки, сделать её активной.
PS. Как выглядит работа с "картой" можно посмотреть тут: http://phpforum.ru/index.php?showtopic=22888&hl= (там ссылки есть). Можно посмотреть код страницы с картинкой и МАПами, чтобы понятнее было.
Спустя 4 часа, 46 минут, 2 секунды (13.03.2012 - 13:19) Rigel написал(а):
sebastjan
работает, спасибо!
Но я, конечно, не думал, что это так сложно и реализуется такими противоестественными методами
sergeiss
спасибо, что напомнил про map, попробую еще такой способ.
А сделать я хотел вот что:
Есть игрушка у меня:
В основном части страницы бегает герой с мечом наперевес, задает жару всяким лягушкам, стрекозам, получает опыт, получает ранения и тратит энергию.
Сейчас состояние энергии, опыта, жизни отображаются в прямоугольном блоке, но вот хотелось сделать как в Diablo II
Чтобы были красивые рамки, сфера жизни и маны, expirience-бар, обросший травой. Вот поэтому нужен хотя бы кликабельный линк из-под прямоугольного прозрачного блока, чтобы понять как это реализовать. А то получается рядом с такой сферой невозможно кликнуть по монстру, в которого надо выпустить стрелу, потому как она неактивен и "под стеклом".
Надеюсь, понятно описал
работает, спасибо!
Но я, конечно, не думал, что это так сложно и реализуется такими противоестественными методами
sergeiss
спасибо, что напомнил про map, попробую еще такой способ.
А сделать я хотел вот что:
Есть игрушка у меня:
В основном части страницы бегает герой с мечом наперевес, задает жару всяким лягушкам, стрекозам, получает опыт, получает ранения и тратит энергию.
Сейчас состояние энергии, опыта, жизни отображаются в прямоугольном блоке, но вот хотелось сделать как в Diablo II
Чтобы были красивые рамки, сфера жизни и маны, expirience-бар, обросший травой. Вот поэтому нужен хотя бы кликабельный линк из-под прямоугольного прозрачного блока, чтобы понять как это реализовать. А то получается рядом с такой сферой невозможно кликнуть по монстру, в которого надо выпустить стрелу, потому как она неактивен и "под стеклом".
Надеюсь, понятно описал
Спустя 8 минут, 3 секунды (13.03.2012 - 13:27) sergeiss написал(а):
| Цитата (Rigel @ 13.03.2012 - 14:19) |
| В основном части страницы бегает герой с мечом наперевес, задает жару всяким лягушкам, стрекозам, получает опыт, получает ранения и тратит энергию. Сейчас состояние энергии, опыта, жизни отображаются в прямоугольном блоке, но вот хотелось сделать как в Diablo II Чтобы были красивые рамки, сфера жизни и маны, expirience-бар, обросший травой. |
Если честно, то не знаю, как там в Diablo II сделано
Даже не знаю, что это за игрушка такая Но, судя по описанию, мапы как раз могут помочь тут. Спустя 7 минут, 2 секунды (13.03.2012 - 13:34) Rigel написал(а):
sergeiss
| Цитата (sergeiss @ 13.03.2012 - 14:27) |
| Даже не знаю, что это за игрушка такая |
Свернутый текст
Спустя 2 часа, 13 минут, 5 секунд (13.03.2012 - 15:47) sebastjan написал(а):
Rigel
| Цитата |
| Но я, конечно, не думал, что это так сложно и реализуется такими противоестественными методами |
Дело не в реализации как, дело в том - зачем?
Я понимаю что для общего познания можно и на яваскипте игрушку реализовывать.
Но для этого есть более эфективные инструменты, такие как флашь и Акшен скрипт.
Да и не бязательно городить с дивами такое, можно сделать ту часть текста, который от куда то вылазить - картинкой и кликабельной.