Хотелось бы реализовать такое. Есть таблица с тремя ячейками. В первой и третьей ячейках - кнопки (рисунки). Если навести курсор мышки на первую ячейку (первую кнопку), то во второй ячейке сваливается (свёртком или выплавает, выезжает) табличка с текстом 1. Если же навести курсор мышки на третью ячейку (вторую кнопку), то во второй же ячейке сваливается табличка с текстом 2.
Конечно, надо ещё учесть 'плавание', ведь ячейка с текстом может изменяться из-за разного разрешения экрана (не мне это Вам говорить, прошу прощения за наив).
Помогите такое реализовать.
1. Мила - 07 Апреля, 2006 - 09:09:03 - перейти к сообщению
2. TvoyWeb - 07 Апреля, 2006 - 16:06:42 - перейти к сообщению
Мила
Можно посидеть покумекать, но лучше дождаться гуру JS. Они скоро будут
Можно посидеть покумекать, но лучше дождаться гуру JS. Они скоро будут
3. Дмитрий Б. - 08 Апреля, 2006 - 01:01:08 - перейти к сообщению
Мила
На JS я бы это реализовывать не советовал, ибо тормозуха будет офигенная! Ну не рассчитан JS на анимацию, как бы там не говорили... Сейчас в меня, конечно, полетят тухлые помидоры, мол, а как же работают всякие там летающие за курсором даты и т. п. Отвечаю: так ведь там таблицы никакой нет! Я как-то пытался менюшку динамическую сделать на таблицах, потом бросил...
З. Ы. А вообще, если сильно надо - могу и скрипт накидать, дел минут на 10...
На JS я бы это реализовывать не советовал, ибо тормозуха будет офигенная! Ну не рассчитан JS на анимацию, как бы там не говорили... Сейчас в меня, конечно, полетят тухлые помидоры, мол, а как же работают всякие там летающие за курсором даты и т. п. Отвечаю: так ведь там таблицы никакой нет! Я как-то пытался менюшку динамическую сделать на таблицах, потом бросил...
З. Ы. А вообще, если сильно надо - могу и скрипт накидать, дел минут на 10...
4. Мила - 08 Апреля, 2006 - 01:50:48 - перейти к сообщению
Хотелось бы доделать (или переделать) скрипты.
Первый скрипт две кнопки и тексты, но тексты без 'выпадания':
Второй скрипт, очень нравиться, но кнопка всего одна и подсказка из-под неё выпадает (а это не то, что надо).
Или же первый скрипт доделать, а если "нет", то второй скрипт переделать под задуманное.
И чё-то во втором скрипте ошибка выскакивает на 61 строке (не понимаю я в этом).
Посмотрите, пожалуйста!
Первый скрипт две кнопки и тексты, но тексты без 'выпадания':
CODE:
<body>
<script>
function setObjText(id, text)
{
setInner(document.getElementById(id), text);
}
function setInner(obj, text)
{
obj.innerHTML = text;
}
</script>
<table width="332">
<tr>
<td width="59"><a href="#" onmouseover="setObjText('tip', '<p align=center><b>текст первый</b></p>' )" onmouseout="setObjText('tip','')">Button1</button></td>
<td id="tip" width="200"> </td>
<td><button onmouseover="setObjText('tip', '<p align=center><b>Второй текст</b></p>')" onmouseout="setObjText('tip','')">
<p align="left">Button2</button></td>
</tr>
</table>
</body>
<body>
<script>
function setObjText(id, text)
{
setInner(document.getElementById(id), text);
}
function setInner(obj, text)
{
obj.innerHTML = text;
}
</script>
<table width="332">
<tr>
<td width="59"><a href="#" onmouseover="setObjText('tip', '<p align=center><b>текст первый</b></p>' )" onmouseout="setObjText('tip','')">Button1</button></td>
<td id="tip" width="200"> </td>
<td><button onmouseover="setObjText('tip', '<p align=center><b>Второй текст</b></p>')" onmouseout="setObjText('tip','')">
<p align="left">Button2</button></td>
</tr>
</table>
</body>
Второй скрипт, очень нравиться, но кнопка всего одна и подсказка из-под неё выпадает (а это не то, что надо).
CODE:
<!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>
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">
</td>
<td>
<DIV class=clTopMenu id=divTopMenu0 style="position: absolute; left: 382px; top: 17px"><A onmouseover="topMenu(0); if(ie)this.blur(); return false" onmouseout=menuOut(0)
href="http://111.htm#" >
<IMG height=12 alt="" src="01.gif" width=103 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>
<!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>
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">
</td>
<td>
<DIV class=clTopMenu id=divTopMenu0 style="position: absolute; left: 382px; top: 17px"><A onmouseover="topMenu(0); if(ie)this.blur(); return false" onmouseout=menuOut(0)
href="http://111.htm#" >
<IMG height=12 alt="" src="01.gif" width=103 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>
Или же первый скрипт доделать, а если "нет", то второй скрипт переделать под задуманное.
И чё-то во втором скрипте ошибка выскакивает на 61 строке (не понимаю я в этом).
Посмотрите, пожалуйста!
5. Дмитрий Б. - 08 Апреля, 2006 - 04:51:41 - перейти к сообщению
Ой! Как много всего! Ладно, щас покопаюсь - авось и выйдет чего...
6. Дмитрий Б. - 10 Апреля, 2006 - 07:42:31 - перейти к сообщению
Написал с нуля:
CODE:
<html>
<head>
<title>Свёрток</title>
<...>
<script type="text/javascript">
<!--
var paperMouseOver=0;
var paperOpened=0;
var paperHeight=1;
var paperDHeight;
var paperMaxHeight=150;//Максимальная высота свитка
var paperMessages=["Текст кнопки № 1", "Текст кнопки № 2"];//Тексты кнопок
var paperDuration=1;//Время разворота в секундах
var paperTime;
function changePaperState(code)
{
clearTimeout(paperTime);
paperMouseOver=code;
switch ((code!=0)+(paperOpened!=0)*2)
{
default://Ничего не открыто, ла и не надо
return;
case 1://Ничего не открыто, надо открыть
document.getElementById('paperText').innerHTML=paperMessages[code-1];
paperOpened=code;
paperDHeight=(paperMaxHeight-1)/25/paperDuration;
break;
case 2://Открыто, надо что-то закрыть
paperDHeight=-(paperMaxHeight-1)/25/paperDuration;
break;
case 3://Открыто и надо открыть
paperDHeight=(paperMaxHeight-1)/25/paperDuration;
if (code!=paperOpened)
paperDHeight=-paperDHeight;
break;
}
processPaper();
}
function processPaper()
{
paperHeight+=paperDHeight;
if (paperHeight>paperMaxHeight)
document.getElementById('paper').height=paperHeight=paperMaxHeight;
else if (paperHeight<1)
{
document.getElementById('paper').height=paperHeight=1;
paperOpened=0;
changePaperState(paperMouseOver);
}
else
{
document.getElementById('paper').height=paperHeight;
paperTime=setTimeout('processPaper();', 40);
}
}
//-->
</script>
</head>
<body>
<...>
<table width="600" height="200">
<tr>
<td width="200"><img src="button1.jpg" width="100%" height="100%" onmouseover="changePaperState(1);" onmouseout="changePaperState(0);"></td>
<td width="200" style="vertical-align:center;"><table width="150" align="center" style="vertical-align:center;" cellpadding="0" cellspacing="0">
<tr height="10" bgcolor="blue"><td style="font-size: 5px;"> </td></tr>
<tr bgcolor="yellow"><td id="paper" height="1"><div style="width: 100%; height: 100%; overflow: hidden;" id="paperText"> </div></td></tr>
<tr height="10" bgcolor="blue"><td style="font-size: 5px;"> </td></tr></table>
</td>
<td width="200"><img src="button2.jpg" width="100%" height="100%" onmouseover="changePaperState(2);" onmouseout="changePaperState(0);"></td>
</tr>
</table>
<...>
</body>
</html>
<head>
<title>Свёрток</title>
<...>
<script type="text/javascript">
<!--
var paperMouseOver=0;
var paperOpened=0;
var paperHeight=1;
var paperDHeight;
var paperMaxHeight=150;//Максимальная высота свитка
var paperMessages=["Текст кнопки № 1", "Текст кнопки № 2"];//Тексты кнопок
var paperDuration=1;//Время разворота в секундах
var paperTime;
function changePaperState(code)
{
clearTimeout(paperTime);
paperMouseOver=code;
switch ((code!=0)+(paperOpened!=0)*2)
{
default://Ничего не открыто, ла и не надо
return;
case 1://Ничего не открыто, надо открыть
document.getElementById('paperText').innerHTML=paperMessages[code-1];
paperOpened=code;
paperDHeight=(paperMaxHeight-1)/25/paperDuration;
break;
case 2://Открыто, надо что-то закрыть
paperDHeight=-(paperMaxHeight-1)/25/paperDuration;
break;
case 3://Открыто и надо открыть
paperDHeight=(paperMaxHeight-1)/25/paperDuration;
if (code!=paperOpened)
paperDHeight=-paperDHeight;
break;
}
processPaper();
}
function processPaper()
{
paperHeight+=paperDHeight;
if (paperHeight>paperMaxHeight)
document.getElementById('paper').height=paperHeight=paperMaxHeight;
else if (paperHeight<1)
{
document.getElementById('paper').height=paperHeight=1;
paperOpened=0;
changePaperState(paperMouseOver);
}
else
{
document.getElementById('paper').height=paperHeight;
paperTime=setTimeout('processPaper();', 40);
}
}
//-->
</script>
</head>
<body>
<...>
<table width="600" height="200">
<tr>
<td width="200"><img src="button1.jpg" width="100%" height="100%" onmouseover="changePaperState(1);" onmouseout="changePaperState(0);"></td>
<td width="200" style="vertical-align:center;"><table width="150" align="center" style="vertical-align:center;" cellpadding="0" cellspacing="0">
<tr height="10" bgcolor="blue"><td style="font-size: 5px;"> </td></tr>
<tr bgcolor="yellow"><td id="paper" height="1"><div style="width: 100%; height: 100%; overflow: hidden;" id="paperText"> </div></td></tr>
<tr height="10" bgcolor="blue"><td style="font-size: 5px;"> </td></tr></table>
</td>
<td width="200"><img src="button2.jpg" width="100%" height="100%" onmouseover="changePaperState(2);" onmouseout="changePaperState(0);"></td>
</tr>
</table>
<...>
</body>
</html>
7. Мила - 10 Апреля, 2006 - 11:04:01 - перейти к сообщению
Ого! Здорово и код маленький, наверное смогу в нём разобраться сама!
Вопросик только имеется. А как сделать, чтобы подсказка разворачивалась только вниз, а то у Вас она идёт и вверх и вниз. Как её прибить к верхнему краю таблицы?
Спасибо большое!
Вопросик только имеется. А как сделать, чтобы подсказка разворачивалась только вниз, а то у Вас она идёт и вверх и вниз. Как её прибить к верхнему краю таблицы?
Спасибо большое!
8. St.A.N. - 10 Апреля, 2006 - 12:17:47 - перейти к сообщению
Дмитрий Б.
Я не понял, в коде видны некие фразы. У меня в редакторе этого не видать. ТОлько текст кнопки 1 и 2 при наведении.
Я не понял, в коде видны некие фразы. У меня в редакторе этого не видать. ТОлько текст кнопки 1 и 2 при наведении.
9. Дмитрий Б. - 10 Апреля, 2006 - 20:54:34 - перейти к сообщению
Мила
St.A.N.
А в редакторе их и не должно быть видно... При наведении фразы обновляются, причём берутся каждый раз из массива paperMessages.
CODE:
заменяем на<td width="200" style="vertical-align:center;"><table width="150" align="center" style="vertical-align:center;" cellpadding="0" cellspacing="0">
CODE:
<td width="200"><table width="150" align="center" cellpadding="0" cellspacing="0">
St.A.N.
А в редакторе их и не должно быть видно... При наведении фразы обновляются, причём берутся каждый раз из массива paperMessages.
10. St.A.N. - 10 Апреля, 2006 - 22:48:33 - перейти к сообщению
Дмитрий Б. пишет:
А в редакторе их и не должно быть видно...
А почему это не должно? Всю жисть скрипты работали, а щас на тебе.
Я имел ввиду Allire Homesite. Это ж тот же ослик.