ОсновноеRadiotalkПользовательское
MPCHAT - CMS хостинг чатов для профессионалов
90   •   Посмотреть все темы

Нижний фрейм - почта и проблемы позиционирования

 

1258
Сергей @seg
Есть у меня кнопки, все бы хорошо... Кстати, если кому надо, то берите.
Вот код кнопок со скольжением.

Это между <head> и </head>

<script language="JavaScript" >
<!-- hide
// браузер с поддержкой JavaScript
var browserOK = false;
var pics;
// -->
</script>
<script language="JavaScript1.1">
<!-- hide
//JavaScript 1.1!
browserOK = true;
pics = new Array();
// -->
</script>
<script language="JavaScript" >
<!-- hide
var objCount = 0; // количество изображений на web-странице
function preload(name, first, second) {
// предварительна\я загрузка изображений и размещение их в массиве
if (browserOK) {
pics[objCount] = new Array(3);
pics[objCount][0] = new Image();
pics[objCount][0].src = first;
pics[objCount][1] = new Image();
pics[objCount][1].src = second;
pics[objCount][2] = name;
objCount++;
}
}
function on(name){
if (browserOK) {
for (i = 0; i < objCount; i++) {
if (document.images[pics[i][2]] != null)
if (name != pics[i][2]) {
// вернуть в исходное систо\яние все другие изображени\я
document.images[pics[i][2]].src = pics[i][0].src;
} else {
// показывать вторую картинку, поскольку курсор пересекает данное изображение
document.images[pics[i][2]].src = pics[i][1].src;
}
}
}
}
function off(){
if (browserOK) {
for (i = 0; i < objCount; i++) {
// вернуть в исходное систо\яние все изображени\я
if (document.images[pics[i][2]] != null)
document.images[pics[i][2]].src = pics[i][0].src;
}
}
}
// заранее загружаемые изображени\я - Вы должны здесь указать
// изображени\я, которые нужно загрузить заранее, а также объект Image,
// к которому они относ\ятс\я (первый аргумент). Именно эту часть
// нужно корректировать, если Вы хотите использовать скрипт
// применительно к другим изображени\ям (конечно это не освобождает
// Вас от об\язанности подредактировать в документе также и раздел body)
preload("link1", "/img/viktor1.gif", "/img/viktor2.gif");
preload("link2", "/img/top1.gif", "/img/top2.gif");
preload("link3", "/img/histori1.gif", "/img/histori2.gif");
preload("link4", "/img/obnov1.gif", "/img/obnov2.gif");
preload("link5", "/img/exit1.gif", "/img/exit2.gif");
preload("link6", "/img/admin1.gif", "/img/admin2.gif");
preload("link7", "/img/post1.gif", "/img/post2.gif");






// -->
</script>

Это между <body> и </body>

<center>

<a href=# onclick="parent.startgame(); return false;" title='Викторина - угадывание слов' onMouseOver="on('link1')" onMouseOut="off()"><img name="link1" src="/img/viktor1.gif" border="0"></a>
<a href=# onclick="parent.wo('index.php?inc=top100','top100','500','400','yes');return false" target=top100 title=Top100 onMouseOver="on('link2')" onMouseOut="off()"><img name="link2" src="/img/top1.gif" border="0"></a>
<a href=# onclick="parent.openhistory();return false" title='История ваших сообщений' onMouseOver="on('link3')" onMouseOut="off()"><img name="link3" src="/img/histori1.gif" border="0"></a>
<a href=# onclick='parent.loadframes();' title='Обновить окно сообщений' onMouseOver="on('link4')" onMouseOut="off()"><img name="link4" src="/img/obnov1.gif" border="0"></a>
<a href=# onclick="parent.location.href='exit.html?'+parent.yourkey;" title='Выйти из чата' onMouseOver="on('link5')" onMouseOut="off()"><img name="link5" src="/img/exit1.gif" border="0"></a>
<a href=# onclick="parent.wo('index.php?inc=admin&'+parent.yourkey,'admin','800','600','yes');return false" target=admin title=Админка onMouseOver="on('link6')" onMouseOut="off()"><img name="link6" src="/img/admin1.gif" border="0"><script>if(parent.admin==1) document.write('');</script></a>
<a href=# onclick="parent.wo('index.php?inc=post&'+parent.yourkey,'post','490','300','yes');return false" target=post title='Почта' id=idpost onMouseOver="on('link7')" onMouseOut="off()"><img name="link7" src="/img/post1.gif" border="0"> писем(<script>document.write(parent.post);</script>)</a>
<script>if(parent.post>0) {parent.focus();alert("У вас новая почта!");}</script>

</center>

Но среди них есть такая кнопачка почты....

<a href=# onclick="parent.wo('index.php?inc=post&'+parent.yourkey,'post','490','300','yes');return false" target=post title='Почта' id=idpost onMouseOver="on('link7')" onMouseOut="off()"><img name="link7" src="/img/post1.gif" border="0"> писем(<script>document.write(parent.post);</script>)</a>
Вот как этот скрипт <script>document.write(parent.post);</script>
вытащить правильно из кнопки и вставить в картинку рядом? Обьясняю подробней.

Сейчас вид у кнопки такой: **********

Писем конечно можно убрать, но счетчик я хочу вставить в эту картинку ********** и пристыковать эту вторую кнопку к сообщениям, что бы цифра висела в окне картинки. Кнопка конечно тут рабочая не нужна, просто как обрамление. (окно у картинки без фона, хотя можно залить и наложить счетчик поверх, если так проще.)

Что то не соображу как это реализовать только.
Спасибо заранее.

Отредактировано seg - 12.12.2008
1258
Сергей @seg
Ну так чего? Так никто и не подскажет? Как это соединить?

<img src="img/post3.gif" alt="Кол-во сообщений" /> <script> document.write(parent.post);</script>

Вот так должно получится **********

Отредактировано seg - 08.12.2008
20090
Dimitry @Dimitry
<span style='position:relative; top:0;left:10;width:50;height:10;'><script> document.write(parent.post);</script></span>

если получится играйся с парамтерами стилей!
возможно в img такие же стили надо прописать и тоже играться ими )

2536
удалён @crigon
position:reLative;

20090
Dimitry @Dimitry
crigon пишет:

position:reLative;

опечатка )

1258
Сергей @seg
Спасибо demon, serhio , все встало как надо. 😁

**********

Отредактировано seg - 08.12.2008
1258
Сергей @seg
Рано радовался. Все сработало, но как оказалось только на моем монике (19 дюймов 3х4). Сначала позиционирование вставил под тег закрывающий </center>

Через короткое время обнаружил, что в разных браузераз по разному позиция идет. Вынес из под тега и пришлось двигать прилично... Сдвинул, стало во всех браузерах одинаково. Но...
Пришел на работу, глянул с моника (22дюйма широкоформатника) висит нолик далеко не там где я его поставил. Слышал про z-index , но что то пока не очень в нем разобрался. Экспиреминтирую, своего кншно добьюсь, но не скоро.
1) Там где про этот индекс обьясняют, расчитано на уже понимающих людей. Но это полбеды.
2) Менять индекс наугад, с перезагрузкой чата и сносом кэша... долго. А HTMLPad 2008 что то не очень вроде хочет работать с этим индексом. Может посоветуте редактор лучше? Мне в свое время сказали, что этот лучший. Просто я сервер убью (шутка) перезагружая чат. )))

Сейчас он так у меня стоит
<a href=# onclick="parent.wo('index.php?inc=post&'+parent.yourkey,'post','490','300','yes');return false" target=post title='Почта' id=idpost onMouseOver="on('link7')" onMouseOut="off()"><img name="link7" src="/img/post1.gif" border="0"> </a>
<img src="img/post3.gif" alt="Кол-во сообщений" />

</center>
<span style='position:reLative; top:-16;left:1035;width:10;height:0;'><font color="#000080"><script> document.write(parent.post);</script></font></span>

Отредактировано seg - 11.12.2008
20090
Dimitry @Dimitry
<a href=# onclick="parent.wo('index.php?inc=post&'+parent.yourkey,'post','490','300','yes');return false" target=post title='Почта' id=idpost onMouseOver="on('link7')" onMouseOut="off()"><img name="link7" src="/img/post1.gif" border="0"> ТУТ НУЖНО БЫЛО СТАВИТЬ SPAN ВНУТРИ А</a>

z-index:2;

уровень слоя.. чем больше тем выше и виднее!

1258
Сергей @seg
Спасиб. Хотел плюсик блямкнуть, а форум не дает, грит нельзя тебе плюсов больше на сегодня от меня )))

1732
DirtyDollar @DirtyDollar
Можеш ешё картинки обойти вот таким способом. Только цвета под себя поставь.
<DIV STYLE="width:100%; filter:
filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#999999,endColorStr=#555555);
padding: 30px;
margin-top: 20px;
margin-bottom: 20px;
margin-right: auto;
margin-left: auto;
background: #222222;
border: 3px double #ededed;
text-align:left; /* part 2 of 2 centering hack */
width: 300px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 270px;>
Blurry text with smudge of gray.</div>

1258
Сергей @seg
Дим не вышло, как ты писал под a> вставить. Сдвигает скрипт следующую картинку.

Сделал по другому, вот код всего фрейма:

<html>
<head>
<META http-equiv=Content-Type content='text/html; charset=windows-1251'>
<link rel=STYLESHEET type=text/css href=style.css>
<style type="text/css">
#layer1 {
position: reLative; /* Относительное позиционирование */
}

#layer1 {
top: -16px; /* Сдвигаем текст вверх */
left: 405px; /* Сдвигаем текст вправо */
color: #000080; /* Синий цвет текста */
font-size: 12px; /* Размер шрифта в пикселах */
}



#layer1 { z-index: 2; }


</style>


<script language="JavaScript" >
<!-- hide
// браузер с поддержкой JavaScript
var browserOK = false;
var pics;
// -->
</script>
<script language="JavaScript1.1">
<!-- hide
//JavaScript 1.1!
browserOK = true;
pics = new Array();
// -->
</script>
<script language="JavaScript" >
<!-- hide
var objCount = 0; // количество изображений на web-странице
function preload(name, first, second) {
// предварительна\я загрузка изображений и размещение их в массиве
if (browserOK) {
pics[objCount] = new Array(3);
pics[objCount][0] = new Image();
pics[objCount][0].src = first;
pics[objCount][1] = new Image();
pics[objCount][1].src = second;
pics[objCount][2] = name;
objCount++;
}
}
function on(name){
if (browserOK) {
for (i = 0; i < objCount; i++) {
if (document.images[pics[i][2]] != null)
if (name != pics[i][2]) {
// вернуть в исходное систо\яние все другие изображени\я
document.images[pics[i][2]].src = pics[i][0].src;
} else {
// показывать вторую картинку, поскольку курсор пересекает данное изображение
document.images[pics[i][2]].src = pics[i][1].src;
}
}
}
}
function off(){
if (browserOK) {
for (i = 0; i < objCount; i++) {
// вернуть в исходное систо\яние все изображени\я
if (document.images[pics[i][2]] != null)
document.images[pics[i][2]].src = pics[i][0].src;
}
}
}
// заранее загружаемые изображени\я - Вы должны здесь указать
// изображени\я, которые нужно загрузить заранее, а также объект Image,
// к которому они относ\ятс\я (первый аргумент). Именно эту часть
// нужно корректировать, если Вы хотите использовать скрипт
// применительно к другим изображени\ям (конечно это не освобождает
// Вас от об\язанности подредактировать в документе также и раздел body)
preload("link1", "/img/viktor1.gif", "/img/viktor2.gif");
preload("link2", "/img/top1.gif", "/img/top2.gif");
preload("link3", "/img/histori1.gif", "/img/histori2.gif");
preload("link4", "/img/obnov1.gif", "/img/obnov2.gif");
preload("link5", "/img/exit1.gif", "/img/exit2.gif");
preload("link6", "/img/admin1.gif", "/img/admin2.gif");
preload("link7", "/img/post1.gif", "/img/post2.gif");






// -->
</script>

</head>
<body class=top-body>
<center>

<a href=# onclick="parent.startgame(); return false;" title='Викторина - угадывание слов' onMouseOver="on('link1')" onMouseOut="off()"><img name="link1" src="/img/viktor1.gif" border="0"></a>
<a href=# onclick="parent.wo('index.php?inc=top100','top100','500','400','yes');return false" target=top100 title=Top100 onMouseOver="on('link2')" onMouseOut="off()"><img name="link2" src="/img/top1.gif" border="0"></a>
<a href=# onclick="parent.openhistory();return false" title='История ваших сообщений' onMouseOver="on('link3')" onMouseOut="off()"><img name="link3" src="/img/histori1.gif" border="0"></a>
<a href=# onclick='parent.loadframes();' title='Обновить окно сообщений' onMouseOver="on('link4')" onMouseOut="off()"><img name="link4" src="/img/obnov1.gif" border="0"></a>
<a href=# onclick="parent.location.href='exit.html?'+parent.yourkey;" title='Выйти из чата' onMouseOver="on('link5')" onMouseOut="off()"><img name="link5" src="/img/exit1.gif" border="0"></a>
<a href=# onclick="parent.wo('index.php?inc=admin&'+parent.yourkey,'admin','800','600','yes');return false" target=admin title=Админка onMouseOver="on('link6')" onMouseOut="off()"><img name="link6" src="/img/admin1.gif" border="0"><script>if(parent.admin==1) document.write('');</script></a>
<a href=# onclick="parent.wo('index.php?inc=post&'+parent.yourkey,'post','490','300','yes');return false" target=post title='Почта' id=idpost onMouseOver="on('link7')" onMouseOut="off()"><img name="link7" src="/img/post1.gif" border="0"></a>
<img src="img/post3.gif" alt="Кол-во сообщений" />
<div id="layer1"><script> document.write(parent.post);</script></div>

</center>


<script>if(parent.post>0) {parent.focus();alert("У вас новое личное сообщение!");}</script>
</body>
</html>

Зеленое, то что вставил, красное, то к чему относится. Если у кого широкоэкранный монитор, посмотрите пожалуйста как это выглядит у вас? Если не трудно... Адрес чата у меня в подписи. Вход свободный.

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


Отредактировано seg - 12.12.2008