Имя пользователя:
Пароль:  
Помощь | Регистрация | Забыли пароль?  | Правила  

Компьютерный форум OSzone.net » Компьютеры + Интернет » Вебмастеру » Необходимость менять картинку в шапке в зависимости отразрешения экрана.

Ответить
Настройки темы
Необходимость менять картинку в шапке в зависимости отразрешения экрана.

Аватара для Gudy

Пользователь


Сообщения: 98
Благодарности: 3

Профиль | Сайт | Отправить PM | Цитировать


Изменения
Автор: Gudy
Дата: 12-08-2009
Описание: очепятко
Доброго дня.
Собственно сабж.

Цель:
Узнавать разрешение экрана и в зависимости от него загружать разные картинки в шапке.

Средства.
HTML +JS или PHP


пробовал так:
Код: Выделить весь код
<script language="JavaScript" type="text/javascript">

  if((screen.width <= 1024) && (screen.width > 800))
	{
	alert ('1 case'); 

        document.getElementById('pikkzhere').src="/pic/1024.png";	
	}
  else
	{
	alert ('2 case');	
        document.getElementById('pikkzhere').src="/pic/pic.png"	;
    	
	}


</script>
++
Код: Выделить весь код
<body topmargin="0" >

<table  width="90%"  border="1" align="center" cellspacing="0" bgcolor="#F6F4F7">
  <tr><td colspan=4>
   <img src='/pic/pic.png' id='pikkzhere'>
</td>
  </tr>
Работать не хочет говорит что document.getElementById('pikkzhere').src есть NULL и отбрыкивается.

Думаю связано с тем, что на момент когда запускается выполнение скрипта, остальной документ ещё не прогружен, а следовательно document.getElementById('pikkzhere').src= и правда не существует.

Тогда я попробовал так.

Код: Выделить весь код
<script language="JavaScript" type="text/javascript">
function logotp()
{
  if((screen.width <= 1024) && (screen.width > 800))
	{
	alert ('1 case'); 

        document.getElementById('pikkzhere').src="/pic/1024.png";	
	}
  else
	{
	alert ('2 case');	
        document.getElementById('pikkzhere').src="/pic/pic.png"	;
    	
	}
}
</script>
++
Код: Выделить весь код
<body topmargin="0" onLoad=logotp()>
<table  width="90%"  border="1" align="center" cellspacing="0" bgcolor="#F6F4F7" >
  <tr><td colspan=4>
   <img src='/pic/pic.png' id='pikkzhere'>
</td>
  </tr>
И о,чудо! работает. но толькое в IE, скажем гугльхром картнику не загружает уже.



В связи с чем пребываю в предсуицидальном настроении.
Помогите!!

Спасибо.

-------
Without Mind!
Without Soul!
Without Heart!


Отправлено: 18:23, 12-08-2009

 

Deadooshka


Сообщения: 2499
Благодарности: 682

Профиль | Отправить PM | Цитировать


1. можно подгружать картинки заранее через объекты Image
Код: Выделить весь код
var img = new Image();
img.src = 'pic.png';
2. сделать два тега img, один из которых скрыть display:none, а по onload открывать нужный тег img, а другой скрывать.
Это сообщение посчитали полезным следующие участники:

Отправлено: 19:13, 12-08-2009 | #2



Для отключения данного рекламного блока вам необходимо зарегистрироваться или войти с учетной записью социальной сети.

Если же вы забыли свой пароль на форуме, то воспользуйтесь данной ссылкой для восстановления пароля.


Аватара для Gudy

Пользователь


Сообщения: 98
Благодарности: 3

Профиль | Сайт | Отправить PM | Цитировать


Sham, Познаний в JS мало очень.

Можете какой-нить простенький примерчик набросать с new Image();
И кстати если прогружать картинки заранее полагаю что объём трафика от страницы вырастет в разы.

Относительно второго.
А что есил картинок много? скажем 5-8. Что для всех прописывать display:none ? Громоздко выйдет, ондако.
Но этот способ сберёт пользовательский траффик.
Верно?

-------
Without Mind!
Without Soul!
Without Heart!


Последний раз редактировалось Gudy, 13-08-2009 в 09:56.


Отправлено: 08:40, 13-08-2009 | #3


Deadooshka


Сообщения: 2499
Благодарности: 682

Профиль | Отправить PM | Цитировать


Gudy, все равно каждую картинку придется по новой прописывать...

1 случай используется обычно для предзагрузки в кэш браузера всех картинок (вне зависимости от разрешения)...

создать картинку можно через document.createElement, или через innerHTML (менять содержимое тега td с картинкой)...
Код: Выделить весь код
//td_tag id тега td с картинкой
document.getElementById('td_tag').innerHTML='<img src="/pic/pic.png" />';
как вариант: можно использовать вместо тега img стиль background-image для тега td, который изменяется свойством style.backgroundImage

Отправлено: 10:07, 13-08-2009 | #4


Аватара для Gudy

Пользователь


Сообщения: 98
Благодарности: 3

Профиль | Сайт | Отправить PM | Цитировать


Почему-то всё работает только в IE.

Хром и ФФ скрипт выполняют правильно. Но картинка после его завершения не появляется.
в ИЕ всё нормально пашет.


Кстати, по поводу бекграунда.
Скорее всего, если ячейка пустая, тоесть в ней нет текста, то высота её булет чисто символической и бекграунд не отобразиться.

-------
Without Mind!
Without Soul!
Without Heart!


Последний раз редактировалось Gudy, 13-08-2009 в 11:45.


Отправлено: 11:31, 13-08-2009 | #5


Аватара для Gudy

Пользователь


Сообщения: 98
Благодарности: 3

Профиль | Сайт | Отправить PM | Цитировать


и в догонку. а есть ли способ растянуть картинку-бекграунд ровно на размер того годе она бекграунд (скажем на ячейку таблицы).
Я вроде читал что реализуется это только в css3

-------
Without Mind!
Without Soul!
Without Heart!


Отправлено: 13:25, 13-08-2009 | #6


Deadooshka


Сообщения: 2499
Благодарности: 682

Профиль | Отправить PM | Цитировать


Цитата Gudy:
есть ли способ растянуть картинку-бекграунд ровно на размер того годе она бекграунд (скажем на ячейку таблицы). »
есть свойства background-position и background-repeat, ими и рулится. CSS3 пока не кроссбраузерный...
Цитата Gudy:
Скорее всего, если ячейка пустая, тоесть в ней нет текста, то высота её булет чисто символической и бекграунд не отобразиться. »
туда или &nbsp; или однопиксельную прозрачную картинку...

Цитата Gudy:
Я вроде читал что реализуется это только в css3 »
не нашел в спецификации http://www.w3.org/TR/css3-roadmap/...

Последний раз редактировалось Sham, 13-08-2009 в 14:42.

Это сообщение посчитали полезным следующие участники:

Отправлено: 14:22, 13-08-2009 | #7


Аватара для Gudy

Пользователь


Сообщения: 98
Благодарности: 3

Профиль | Сайт | Отправить PM | Цитировать


Решил задачу так:

Код: Выделить весь код
<script> 
function topimage()
{
 
  if (screen.width <= 800) 
{
document.getElementById('logo_area').innerHTML='<img valign=top align=center name=800 src=/pic/800.png  />';
}
 
  if((screen.width <= 1024) && (screen.width > 800))
	{
document.getElementById('logo_area').innerHTML='<img  valign=top align=center name=1024 src=/pic/1024.png  />';
	}
  if((screen.width <= 1152) && (screen.width > 1024))
	{
document.getElementById('logo_area').innerHTML='<img valign=top align=center name=1152 src=/pic/1152.png  />';
 	}
  if((screen.width <= 1280) && (screen.width > 1152))
	{
document.getElementById('logo_area').innerHTML='<img valign=top align=center  name=1280 src=/pic/1280.png  />';
 	}
  if (screen.width > 1280)
	{
document.getElementById('logo_area').innerHTML='<img valign=top align=center name=1366 src=/pic/1366.png  />';
 	}	
 
}
</script> 
<link rel="stylesheet" href="/style.css" /> 
</head> 
 
<body topmargin="0" align=center onLoad="topimage();"> 
 
<table  width="90%" border="0" align="center" cellspacing="0" > 
  <tr> 
    <td width=100% valign="top" "align="center"   id="logo_area"> 
 
 
</td> 
  </tr></table>


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

ЗЫ.
Про ЦСС3 эт я с этим напутал.
Код: Выделить весь код
background-size:	50% ·· картинка фона уменьшена вдвое
100 200% ·· ширина сто пикселей, высота вдвое больше оригинала
auto * масштабировать пропорционально
round ·· подогнать размер к целому количеству повторов

-------
Without Mind!
Without Soul!
Without Heart!


Отправлено: 20:58, 13-08-2009 | #8



Компьютерный форум OSzone.net » Компьютеры + Интернет » Вебмастеру » Необходимость менять картинку в шапке в зависимости отразрешения экрана.

Участник сейчас на форуме Участник сейчас на форуме Участник вне форума Участник вне форума Автор темы Автор темы Шапка темы Сообщение прикреплено

Похожие темы
Название темы Автор Информация о форуме Ответов Последнее сообщение
Как в Укозе сделать логотип в шапке lom2 Вебмастеру 2 25-02-2008 18:50
Интерфейс - [решено] Убрать в окне приветствия необходимость вводить пароль (при вводе пароля - ошибка) Сова Microsoft Windows 2000/XP 5 26-12-2007 22:35
[решено] Как запретить менять разрешение экрана pipez Microsoft Windows 2000/XP 4 29-11-2005 10:50
Необходимость разделить DVD 9 Gb на 2 обычных Nord Owl Видео и аудио: обработка и кодирование 2 23-11-2005 15:20




 
Переход