-
Вебмастеру
(
http://forum.oszone.net/forumdisplay.php?f=22)
Необходимость менять картинку в шапке в зависимости отразрешения экрана.
Доброго дня.
Собственно сабж.
Цель:
Узнавать разрешение экрана и в зависимости от него загружать разные картинки в шапке.
Средства.
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, скажем гугльхром картнику не загружает уже.
В связи с чем пребываю в предсуицидальном настроении.
Помогите!!
Спасибо. |
1. можно подгружать картинки заранее через объекты Image
Код:
var img = new Image();
img.src = 'pic.png';
2. сделать два тега img, один из которых скрыть display:none, а по onload открывать нужный тег img, а другой скрывать. |
Sham, Познаний в JS мало очень.
Можете какой-нить простенький примерчик набросать с new Image();
И кстати если прогружать картинки заранее полагаю что объём трафика от страницы вырастет в разы.
Относительно второго.
А что есил картинок много? скажем 5-8. Что для всех прописывать display:none ? Громоздко выйдет, ондако.
Но этот способ сберёт пользовательский траффик.
Верно?
|
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
|
Почему-то всё работает только в IE.
Хром и ФФ скрипт выполняют правильно. Но картинка после его завершения не появляется.
в ИЕ всё нормально пашет.
Кстати, по поводу бекграунда.
Скорее всего, если ячейка пустая, тоесть в ней нет текста, то высота её булет чисто символической и бекграунд не отобразиться.
|
и в догонку. а есть ли способ растянуть картинку-бекграунд ровно на размер того годе она бекграунд (скажем на ячейку таблицы).
Я вроде читал что реализуется это только в css3
|
Цитата:
Цитата Gudy
есть ли способ растянуть картинку-бекграунд ровно на размер того годе она бекграунд (скажем на ячейку таблицы). »
|
есть свойства background-position и background-repeat, ими и рулится. CSS3 пока не кроссбраузерный...
Цитата:
Цитата Gudy
Скорее всего, если ячейка пустая, тоесть в ней нет текста, то высота её булет чисто символической и бекграунд не отобразиться. »
|
туда или &nbsp; или однопиксельную прозрачную картинку...
Цитата:
Цитата Gudy
Я вроде читал что реализуется это только в css3 »
|
не нашел в спецификации http://www.w3.org/TR/css3-roadmap/... |
Решил задачу так:
Код:
<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 ·· подогнать размер к целому количеству повторов
|
Время: 15:04.
© OSzone.net 2001-
