VPF::вставка рисунка в страницу - Форум программистов

almostlost

Дата 26.12.2007, 14:59 (ссылка)

(нет голосов)

Загрузка ...

Новичок

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

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

Всем здрасте.

За ранее извиняюсь за простой вопрос. Но сам ответить не могу.
Есть сайт на нем реализован XMLHttpRequest. ассинхронный запрос отправляется на сервер. сервер берет данные из бд соответсвуя параметрам, а дальше формирует xml ответ.
у меня вопрос следующего характера.
пока request.readyState!=4 нада сделать некий рисунок прогресса на странице. Ну показать пользователю что типа чтото происходит.
Уважаемые javaScripters как вставить в центр страницы рисунок, а потом его убрать. А еще можно сделать некий эффект затемнения всей страницы кроме этого рисунка. А если можно то как?
Заранее благодарю

InfMag

Дата 28.12.2007, 11:26 (ссылка)

(нет голосов)

Загрузка ...

…

Профиль
Группа: Завсегдатай
Сообщений: 1037
Регистрация: 21.11.2004

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

Ты это имел виду?

Код



<html>
<head>
<title>document</title>
</head>
<script type="text/javascript" language="javascript">

function timer()
{
     if (request.readyState==4) tbl.style.display='none';
     setTimeout("timer()", 10);
} timer();

</script>
<body>

<table border="0" callspacing="0" cellpadding="0" width="100%" height="100%" id="tbl" style="position:absolute;z-index:9999;">
<tr><td align="center" valign="middle"><img src="image.jpg" width="100" height="100" border="0"></td></tr>
</table>

</body>
</html>

Это сообщение отредактировал(а) InfMag - 28.12.2007, 11:27

almostlost

Дата 28.12.2007, 14:03 (ссылка)

(нет голосов)

Загрузка ...

Новичок

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

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

Да пожалуй это решение подходит. Спасибо за идею.
Хотел еще спросить как сделать чтото типа затемнения всей страницы, кроме рисунка image.jpg который будет в центре?

InfMag

Дата 28.12.2007, 15:37 (ссылка)

(нет голосов)

Загрузка ...

…

Профиль
Группа: Завсегдатай
Сообщений: 1037
Регистрация: 21.11.2004

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

almostlost, просто z-index затемнения поменьше поставить. А функция затемнения есть, но она вроде работает не во всех браузерах

Ghirik

Дата 28.12.2007, 16:00 (ссылка)

(нет голосов)

Загрузка ...

Опытный

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

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

InfMag,

Цитата

almostlost, просто z-index затемнения поменьше поставить.

Это как? Что такое z-index затемнения?

Добавлено через 6 минут и 51 секунду
Я вполне серьезно не знаю дрогого способа, как изменение прозрачности:

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title block</title>
<script type="text/javascript">
<!--

function op(obj, setOpacity) {
    obj.filters ? obj.style.filter = "alpha(opacity = " + setOpacity + ")" : obj.style.opacity = setOpacity/100;
}
//-->
</script>
</head>
<body bgcolor="#FF00FF">
<p><input id="b1" type="button" value="Изменить прозрачность body" onclick="op(document.getElementsByTagName('body')[0], 20)"></p>
<p><input id="b2" type="button" value="Изменить прозрачность этой кнопки" onclick="op(this, 30)"></p>
<p>ного текста, который будет скроллиться (размножить до нужного объема)Много 
текста, который будет скроллиться (размножить до нужного объема)Много текста, 
который будет скроллиться (размножить до нужного объема)Много текста, который 
будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться 
(размножить до нужного объема)Мно</p>
</body>
</html>

Я в CSS плохо шарю, там наверное есть затемнение?

--------------------

Отдадим всё клиенту, пускай его машина мучается...

InfMag

Дата 28.12.2007, 18:12 (ссылка)

(нет голосов)

Загрузка ...

…

Профиль
Группа: Завсегдатай
Сообщений: 1037
Регистрация: 21.11.2004

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

Ghirik, я имел виду на слой с затемнением z-index потише взять.

Добавлено через 1 минуту и 19 секунд
Ghirik, слушай, а эта тема во всех браузерах работать будет? Ну я имею в виду конечно же из современных... IE, FF, Opera??

almostlost

Дата 29.12.2007, 11:53 (ссылка)

(нет голосов)

Загрузка ...

Новичок

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

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

z-index у меня так и не заработал. ни в опере ни в ИЕ :( Значит нельзя походу

ksnk

Дата 29.12.2007, 13:19 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

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

А так - заработает?

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Title block</title>
<script type="text/javascript">
<!--

function cls(cl){
        var reg; (reg=new RegExp("(^|\\b)"+cl+"(\\b|$)")).compile;
    return {
        add:function(x){
            if (typeof x.className =="string"){
                if (!x.className.match(reg)) // не хочу писать трим
                    x.className+=(x.className&&' '||'')+cl;
            } else        
                x.className=cl
        },
        have:function(x){
            if (typeof x.className =="string")
                return (x.className.match(reg))
            else    
                return false;    
        },
        remove:function(x){
            if (typeof x.className =="string") {
                if (x.className.match(reg))
                    x.className=x.className.replace(reg,'')
            }
        }
    }
}




function op(obj, setOpacity) {
    obj.filters ? obj.style.filter = "alpha(opacity = " + setOpacity + ")" : obj.style.opacity = setOpacity/100;
}
//-->
</script>
<style>
/********** сброс всяких броузерных премудростей ************/
  html,body {padding:0;margin:0;height:100%;}

/********** показывать - непоказывать ************/
 .hidden { display:none; }

/********** пляски вокруг fixed ************/
 .fixed { position:fixed;}

/********** пляски вокруг Чьи в лесу шишки ************/
 .simple {z-index:1;}
 .ontop {z-index:5;}
 .toppest {z-index:10;}

</style>
<!--[if lte IE 6]> 
<style type="text/css">
/********** пляски вокруг fixed (IE6--) ************/
 .fixed { position:absolute;}
</style> 
<![endif]-->

</head>
<body bgcolor="#FF00FF">

<!-- вот ЭТО - затемнение бакграунда -->
<div id='shadow' class='hidden fixed ontop' style="width:100%;height:100%;border:0;padding:0;margin:0;top:0;left:0;background:gray;">&nbsp;</div>

<!-- а вот ЭТО - предложение подождать -->
<table id='wait' class='hidden fixed toppest' style="width:100%;height:100%;border:0;padding:0;margin:0;top:0;left:0;"><tr><td align='center'>
<div style="width:200px;padding:20px; background:white; border:1px solid black;"> wait 10 seconds a while...</div>

</td></tr></table>

<p>
<input type="button" value="Показать 'wait'" onclick="var c=cls('hidden'),w=document.getElementById('wait'),s=document.getElementById('shadow'); c.remove(w),c.remove(s);op(s,50);setTimeout(function(){c.add(w);c.add(s)},1000); return true;">

<input id="b1" type="button" value="Изменить прозрачность body" onclick="op(document.getElementsByTagName('body')[0], 20)"></p>
<p><input id="b2" type="button" value="Изменить прозрачность этой кнопки" onclick="op(this, 30)"></p>
<p>ного текста, который будет скроллиться (размножить до нужного объема)Много 
текста, который будет скроллиться (размножить до нужного объема)Много текста, 
который будет скроллиться (размножить до нужного объема)Много текста, который 
будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться 
(размножить до нужного объема)Мно</p>
</body>
</html>

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

almostlost

Дата 29.12.2007, 19:49 (ссылка)

(нет голосов)

Загрузка ...

Новичок

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

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

О! классна! то что и нужно было! Пасиба большое.

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »