Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > отображать текст когда курсор в ячейке


Автор: malcalena 21.5.2008, 13:24
предположим есть список организаций, у каждой свои координаты (телефоны адреса и прочее). все это на одной страничке.надо чтобы пользователь видел сначала только названия организаций, а адреса появлялись только когда он кликнет на названии. (наподобие всплывающего меню... или штот типа того).
сама не умею - примеров подходящих тож не могу найти
прошу помощи ))

Автор: bars80080 21.5.2008, 13:46
может и при наведении сойдёт, обычная подсказка (лень переписывать её под клик)
Код
<style>
.qw { position: relative; margin: 20px; border: #0000ff; }
.pods { display: none; position: absolute; top: 20px; left: 20px; border: solid 1px #ff0000; background: #ffff00; }
</style>
<script>
function ups(x, y) {
    if(y == 1) { x.getElementsByTagName('div')[0].style.display = 'block'; }
    else { x.getElementsByTagName('div')[0].style.display = 'none'; }    
}
</script>
<div class="qw" onmouseover="ups(this, 1)" onmouseout="ups(this, 0)">инфо открытая 1
<div class="pods">подсказка красивая 1</div></div>
<div class="qw" onmouseover="ups(this, 1)" onmouseout="ups(this, 0)">инфо открытая 2
<div class="pods">подсказка красивая 2</div></div>
<div class="qw" onmouseover="ups(this, 1)" onmouseout="ups(this, 0)">инфо открытая 3
<div class="pods">подсказка красивая 3</div></div>
<div class="qw" onmouseover="ups(this, 1)" onmouseout="ups(this, 0)">инфо открытая 4
<div class="pods">подсказка красивая 4</div></div>

Автор: malcalena 21.5.2008, 21:38
попробовала - не совсем то к сожалению..
покажу наглядно чего хочу!
1) вариант када инфа скрыта: (строчки близко друг к другу (как тогда када используем (/br))
      комп1
      комп2
      комп3
2) вариант када показывает адрес
      комп1
          адрес
      комп2
      комп3

как будто строчки 1 и 2 раздвинулись и всплыл адрес, при этом строчки 2 и 3 по прежнему близко друг к другу ))

вот так хочется сделать ))

Добавлено через 36 секунд
но фсеравно пасиба ))

Автор: UniBomb 21.5.2008, 23:17
malcalena, 
Что то похожее есть http://dev.jquery.com/view/trunk/plugins/accordion/demo/?p=1.1.1 (сниние прямоугольнички), правда там щёлкнуть по ячейке надо)

Автор: malcalena 22.5.2008, 08:59
ага похоже )) тока как это реализовать я не знаю - я тока в дримвивере делаю, да и то немного...
код я скопировала а толку-то.. 

Автор: bars80080 22.5.2008, 09:12
malcalena, так ничего не меняется
Код
<style>
.qw { position: relative; border: #0000ff; cursor: pointer; }
.qw div { display: none; padding-left: 20px; border: solid 1px #ff0000; background: #ffff00; }
</style>
<script>
function ups(x) {
    var obj = x.getElementsByTagName('div')[0];
    if(obj.style.display != 'block') { obj.style.display = 'block'; }
    else { obj.style.display = 'none'; }    
}
</script>
<div class="qw" onclick="ups(this)">инфо открытая 1 <div>подсказка красивая 1</div></div>
<div class="qw" onclick="ups(this)">инфо открытая 2 <div>подсказка красивая 2</div></div>
<div class="qw" onclick="ups(this)">инфо открытая 3 <div>подсказка красивая 3</div></div>
<div class="qw" onclick="ups(this)">инфо открытая 4 <div>подсказка красивая 4</div></div>

Автор: malcalena 22.5.2008, 13:39
да, этот вариант подходит))
пасиба большое, очень выручили ))

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)