Необходимость менять картинку в шапке в зависимости отразрешения экрана. [Версия для КПК]

Показать полную графическую версию : Необходимость менять картинку в шапке в зависимости отразрешения экрана.

Gudy

12-08-2009, 18:23

Доброго дня.
Собственно сабж.

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

Средства.
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, скажем гугльхром картнику не загружает уже.

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

Спасибо.

Sham

12-08-2009, 19:13

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

Gudy

13-08-2009, 08:40

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

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

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

Sham

13-08-2009, 10:07

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

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

создать картинку можно через document.createElement (https://developer.mozilla.org/en/DOM/document.createElement), или через innerHTML (менять содержимое тега td с картинкой)...
//td_tag id тега td с картинкой
document.getElementById('td_tag').innerHTML='<img src="/pic/pic.png" />';

как вариант: можно использовать вместо тега img стиль background-image для тега td, который изменяется свойством style.backgroundImage

Gudy

13-08-2009, 11:31

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

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

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

Gudy

13-08-2009, 13:25

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

Sham

13-08-2009, 14:22

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

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

Gudy

13-08-2009, 20:58

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

<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 ·· подогнать размер к целому количеству повторов