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


Автор: Gift 7.4.2006, 07:04
Ну, наверное, не совсем меню всё-таки - скорее поп-ап (тултип, подсказка)!
Хотелось бы реализовать такое. Есть таблица с тремя ячейками. В первой и третьей ячейках - кнопки (рисунки). Если навести курсор мышки на первую ячейку (первую кнопку), то во второй ячейке сваливается (свёртком или выплавает, выезжает) табличка с текстом 1. Если же навести курсор мышки на третью ячейку (вторую кнопку), то во второй же ячейке сваливается табличка с текстом 2.
Конечно, надо ещё учесть 'плавание', ведь ячейка с текстом может изменяться из-за разного разрешения экрана (не мне это Вам говорить, прошу прощения за наив).
Помогите такое реализовать.

Автор: smartov 7.4.2006, 11:57
Код

<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>

Автор: Gift 7.4.2006, 13:06
Не совсем то, что хотелось бы. Посидел, поковырял, кое-что подходит, но...
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>


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

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

Автор: Gift 9.4.2006, 08:54
А как сделать, чтобы в твоём скрипте шрифт у текста был другого цвета (синим, например)?

Автор: smartov 9.4.2006, 12:22
Стилями

Цитата(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>

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