Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Две кнопки - одно выплывающее меню. 
:(
    Опции темы
Gift
Дата 7.4.2006, 07:04 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 9
Регистрация: 6.4.2006

Репутация: нет
Всего: нет



Ну, наверное, не совсем меню всё-таки - скорее поп-ап (тултип, подсказка)!
Хотелось бы реализовать такое. Есть таблица с тремя ячейками. В первой и третьей ячейках - кнопки (рисунки). Если навести курсор мышки на первую ячейку (первую кнопку), то во второй ячейке сваливается (свёртком или выплавает, выезжает) табличка с текстом 1. Если же навести курсор мышки на третью ячейку (вторую кнопку), то во второй же ячейке сваливается табличка с текстом 2.
Конечно, надо ещё учесть 'плавание', ведь ячейка с текстом может изменяться из-за разного разрешения экрана (не мне это Вам говорить, прошу прощения за наив).
Помогите такое реализовать.
PM MAIL   Вверх
smartov
Дата 7.4.2006, 11:57 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


свой собственный
****


Профиль
Группа: Экс. модератор
Сообщений: 4225
Регистрация: 2.2.2006
Где: NJ

Репутация: 7
Всего: 259



Код

<body>

<script>

function setObjText(id, text)
{
    setInner(document.getElementById(id), text);
}

function setInner(obj, text)
{
obj.innerHTML = text;
}

</script>

<table height="300">
<tr>
    <td><button onmouseover="setObjText('tip', '<h1>Hint1</h1>')">Button1</button></td>
    <td id="tip" width="200">&nbsp;</td>
    <td><button onmouseover="setObjText('tip', '<b>Hint2</b>')">Button2</button></td>
</tr>
</table>

</body>

PM MAIL   Вверх
Gift
Дата 7.4.2006, 13:06 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 9
Регистрация: 6.4.2006

Репутация: нет
Всего: нет



Не совсем то, что хотелось бы. Посидел, поковырял, кое-что подходит, но...
1) Хотелось, чтобы при наведении на ячейки с кнопками из второй ячейки выпадал список или текст (типа выпадающий свиток).
2) При отведении курсора от ячеек с кнопками - список сворачивался.

Вот код выпадающего свитка, может на его основе можно что-то сделать? (только когда я его открываю - выдаёт ошибку сценария в строке 61 - не знаю и не понимаю, что за ошибка (не силён в кодерстве на яве со скрипом smile ))

Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>Разворачивающиеся свитки</TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1251">
<STYLE>
BODY {
    BACKGROUND-COLOR: #ffffff
}
A {
    COLOR: red; TEXT-DECORATION: none
}
A:hover {
    COLOR: red
}
A:visited:unknown {
    COLOR: #808080
}
TD {
    FONT-SIZE: 10pt; FONT-FAMILY: arial,helvetica
}
DIV.clTopMenu {
    Z-INDEX: 31; VISIBILITY: hidden;  WIDTH: 101px; CLIP: rect(0px 101px 14px 0px); POSITION: absolute; HEIGHT: 150px; BACKGROUND-COLOR: #eeeeee; layer-background-color: #EEEEEE
}
DIV.clTopMenuBottom {
    Z-INDEX: 2; WIDTH: 101px; CLIP: rect(0px 101px 3px 0px); POSITION: absolute; TOP: 11px; HEIGHT: 3px; BACKGROUND-COLOR: #cecfce; layer-background-color: #CECFCE
}
DIV.clTopMenuText {
    FONT-SIZE: 11px; Z-INDEX: 1; LEFT: 5px; WIDTH: 91px; FONT-FAMILY: arial,helvetica; POSITION: absolute; TOP: 15px; BACKGROUND-COLOR: #eeeeee  
}
</STYLE>

<script>
/********************************************************************************
Copyright (C) 1999 Thomas Brattli
This script is made by and copyrighted to Thomas Brattli at www.bratta.com
Visit for more great scripts.
This may be used freely as long as this msg is intact!
********************************************************************************
Browsercheck:*/
ie=document.all?1:0
n=document.layers?1:0

var numberOfMenus=2

var mwidth=100

var pxBetween=10

var fromLeft=20

var fromTop=10
//The bgColor цвет линии снизу
var bgColor='#000077'
var bgColorChangeTo='#440000'

var imageHeight=10

function makeNewsMenu(obj,nest){
    nest=(!nest) ? '':'document.'+nest+'.'                    
    this.css=(n) ? eval(nest+'document.'+obj):eval('document.all.'+obj+'.style')    
    this.scrollHeight=n?this.css.document.height:eval('document.all.'+obj+'.offsetHeight')
    this.moveIt=b_moveIt;this.bgChange=b_bgChange;
    this.slideUp=b_slideUp; this.slideDown=b_slideDown;
    this.clipTo=b_clipTo;
    this.obj = obj + "Object";    eval(this.obj + "=this")        
}
//Objects methods
function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x; this.css.top=this.y}
function b_bgChange(color){if(ie) this.css.backgroundColor=color; else this.css.bgColor=color}
function b_clipTo(t,r,b,l){
    if(n){this.css.clip.top=t; this.css.clip.right=r; this.css.clip.bottom=b; this.css.clip.left=l
    }else this.css.clip="rect("+t+","+r+","+b+","+l+")";
}
function b_slideUp(ystop,moveby,speed,fn,wh){
    if(!this.slideactive){
        if(this.y>ystop){
            this.moveIt(this.x,this.y-5); eval(wh)
            setTimeout(this.obj+".slideUp("+ystop+","+moveby+","+speed+",'"+fn+"','"+wh+"')",speed)
        }else{
            this.slideactive=false; this.moveIt(0,ystop); eval(fn)
        }
    }
}
function b_slideDown(ystop,moveby,speed,fn,wh){
    if(!this.slideactive){
        if(this.y<ystop){
            this.moveIt(this.x,this.y+5); eval(wh)
            setTimeout(this.obj+".slideDown("+ystop+","+moveby+","+speed+",'"+fn+"','"+wh+"')",speed)
        }else{
            this.slideactive=false; this.moveIt(0,ystop); eval(fn)
        }
    }
}
//Initiating the page, making cross-browser objects
function newsMenuInit(){
    oTopMenu=new Array()
    for(i=0;i<=numberOfMenus;i++){
        oTopMenu[i]=new Array()
        oTopMenu[i][0]=new makeNewsMenu('divTopMenu'+i)
        oTopMenu[i][1]=new makeNewsMenu('divTopMenuBottom'+i,'divTopMenu'+i)
        oTopMenu[i][2]=new makeNewsMenu('divTopMenuText'+i,'divTopMenu'+i)
        oTopMenu[i][1].moveIt(0,imageHeight)
        oTopMenu[i][0].clipTo(0,mwidth,imageHeight+3,0)
        oTopMenu[i][0].moveIt(i*mwidth+fromLeft+(i*pxBetween),fromTop)
        oTopMenu[i][0].css.visibility="visible"
    }
}
//Moves the menu
function topMenu(num){
    if(oTopMenu[num][1].y==imageHeight) oTopMenu[num][1].slideDown(oTopMenu[num][2].scrollHeight+20,10,40,'oTopMenu['+num+'][0].clipTo(0,mwidth,oTopMenu['+num+'][1].y+3,0)','oTopMenu['+num+'][0].clipTo(0,mwidth,oTopMenu['+num+'][1].y+3,0)')
    else if(oTopMenu[num][1].y==oTopMenu[num][2].scrollHeight+20) oTopMenu[num][1].slideUp(imageHeight,10,40,'oTopMenu['+num+'][0].clipTo(0,mwidth,oTopMenu['+num+'][1].y+3,0)','oTopMenu['+num+'][0].clipTo(0,mwidth,oTopMenu['+num+'][1].y+3,0)')
}
//Changes background onmouseover
function menuOver(num){oTopMenu[num][1].bgChange(bgColorChangeTo)}
function menuOut(num){oTopMenu[num][1].bgChange(bgColor)}


//Calls the init function onload
onload=newsMenuInit;
</SCRIPT>



<META content="Microsoft FrontPage 6.0" name=GENERATOR></HEAD>
<BODY>
<table width="100%"><tr><td align="center">&nbsp;
</td>
<td>
<DIV class=clTopMenu id=divTopMenu0><A onmouseover="topMenu(0); if(ie)this.blur(); return false" onmouseout=menuOut(0) 
href="http://111.htm#" ><IMG height=11 alt="" 
src="рисунок/keycontrol.gif" width=101 align=top 
border=0></A> 
<DIV class=clTopMenuText id=divTopMenuText0>А вот и мы Ля Ля.<BR><BR>Приходите дети в африку гулять </DIV>
<DIV class=clTopMenuBottom id=divTopMenuBottom0></DIV></DIV>

</td></tr></table>
</BODY></HTML>


PM MAIL   Вверх
smartov
Дата 7.4.2006, 13:13 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


свой собственный
****


Профиль
Группа: Экс. модератор
Сообщений: 4225
Регистрация: 2.2.2006
Где: NJ

Репутация: 7
Всего: 259



Цитата(Gift @ 7.4.2006, 12:06 Найти цитируемый пост)
кое-что подходит, но...

И почему многие новички прямо хотят весь код чтобы за них написали.
Я показал пример как можно это сделать - дальше или сам или за деньги, потому что это уже работа на заказ.
PM MAIL   Вверх
Gift
Дата 9.4.2006, 08:54 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 9
Регистрация: 6.4.2006

Репутация: нет
Всего: нет



А как сделать, чтобы в твоём скрипте шрифт у текста был другого цвета (синим, например)?
PM MAIL   Вверх
smartov
Дата 9.4.2006, 12:22 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


свой собственный
****


Профиль
Группа: Экс. модератор
Сообщений: 4225
Регистрация: 2.2.2006
Где: NJ

Репутация: 7
Всего: 259



Стилями

Цитата(smartov @ 7.4.2006, 10:57 Найти цитируемый пост)

<style>
h1
{
color: blue;
}
</style>

..........

<td><button onmouseover="setObjText('tip', '<h1 >Hint1</h1>')">Button1</button></td>

Добавлено @ 12:35
P.S.
Если неудобно писать HTML внутри строки, я так подумал.
Вот вариант получше smile
В функцию setObjText('tip', 'div2') передается 2 параметра
1-й - id элемента куда пихать
2-й - id элемента откуда доставать


Код

<body>
<script>
function setObjText(id, source_div_id)
{
    setInner(document.getElementById(id), document.getElementById(source_div_id));
}
function setInner(obj, source)
{
obj.innerHTML = source.innerHTML;
}
</script>

<style>
.invisible
{
    display: none;
}
</style>

<!-------------------->
<div id="div1" class="invisible">
<font color="red">Red font</font> looks good
</div>
<!-------------------->

<!-------------------->
<div id="div2" class="invisible">
<table width="200">
    <tr>
        <td bgcolor="blue">&nbsp;</td>
    </tr>
    <tr>
        <td bgcolor="yellow">&nbsp;</td>
    </tr>
</table>
<h1>Ukraine rules</h2> :)
</div>
<!-------------------->

<table height="300">
<tr>
    <td><button onmouseover="setObjText('tip', 'div1')">Button1</button></td>
    <td id="tip" width="200">&nbsp;</td>
    <td><button onmouseover="setObjText('tip', 'div2')">Button2</button></td>
</tr>
</table>

</body>


Это сообщение отредактировал(а) smartov - 9.4.2006, 12:27
PM MAIL   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »


 




[ Время генерации скрипта: 0.0861 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.