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

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

1. можно подгружать картинки заранее через объекты Image

Код:

var img = new Image();
img.src = 'pic.png';

2. сделать два тега img, один из которых скрыть display:none, а по onload открывать нужный тег img, а другой скрывать.

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

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

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

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

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

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

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

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

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

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

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

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

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

Цитата Gudy:

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

есть свойства background-position и background-repeat, ими и рулится. CSS3 пока не кроссбраузерный...

Цитата Gudy:

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

туда или   или однопиксельную прозрачную картинку...

Цитата Gudy:

Я вроде читал что реализуется это только в css3 »

не нашел в спецификации http://www.w3.org/TR/css3-roadmap/...

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

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

Код:

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