• Страница 1 из 2
  • 1
  • 2
  • »
Модератор форума: likbezz  
Скрипты и коды для юкоз - Форум аццкого кодера » Раздел для начинающих » Вопросы/ответы на тему JQuery и JScript на сайтах в uCoz » Разные картинки под разные маниторы (Разные картинки под разные маниторы)
Разные картинки под разные маниторы
Дата: Воскресенье, 09.05.2010, 19:33 |
SerPaladin
Рядовой
Группа: Пользователи
Сообщений: 10
Награды: 0
Репутация: 0
Статус: Offline


скажите пожалуста как сделать, чтобы две картинки которые отображаются скриптом, показывались разными поочерёдно каждый раз при перезагрузке страницы, ну в общем чтобы сделать аналаговую картинку??? кто знает скрипт подскажите умоляю....

PS/ образно говоря у меня два скрипта приймем их в виде <script js> <src:"путь картинки1"></script>

<script js> <src:"путь картинки"></script>

мне нужно, чтобы после перезагрузки браузера работали разные картинки

вот этот

Code
<script type="text/javascript">
document.write('<style>');
if (x <= 1000) {document.write('#clientWidth{background:url(http://denis-osadchiy.at.ua/Fon/1/800x600.jpg)no-repeat top center;width:'+x+'px; height:'+y+'px;}');}
if (x >= 1000 && x < 1200) {document.write('#clientWidth{background:url(http://denis-osadchiy.at.ua/Fon/1/1024x768.jpg) no-repeat top center;width:'+x+'px; height:'+y+'px;}');}
if (x >= 1200 && x < 1480) {document.write('#clientWidth{background:url(http://denis-osadchiy.at.ua/Fon/1/1440x900.jpg) no-repeat top center;width:'+x+'px; height:'+y+'px;}');}
if (x >= 1441) {document.write('#clientWidth{background:url(http://denis-osadchiy.at.ua/Fon/1/1600x1200.jpg) no-repeat top center;width:'+x+'px; height:'+y+'px;}');}
document.write('<\/style>');

</script>
скрипт - это есть одна моя картинка(соответственно есть вторая), тоесть я хочу сделать, чтоб для всех размеров была одна картинка, потом для этих же но после перезагрузки окна браузера вторая вместо 1, ну тоесть картинка стала динамической, как было в http://likbezz.ucoz.ru/forum/52-61-1 посте
Code
<script type="text/javascript">
<!--
var imgBg=new Array()
imgBg[0]='url(\/_example\/rotator\/psBg.gif);';
imgBg[1]='url(\/_example\/rotator\/psBg-e.gif);';
imgBg[2]='url(\/_example\/rotator\/psBg-g.gif);';
imgBg[3]='url(\/_example\/rotator\/psBg-r.gif);';
imgBg[4]='url(\/_example\/rotator\/psBg-b.gif);';
imgBg[5]='url(\/_example\/rotator\/psBg-gb.gif);';
imgBg[6]='url(\/_example\/rotator\/psBg-s.gif);';
var whichquote = Math.floor(Math.random()*(imgBg.length));
//-->
</script>
, за который отдельное "спасибо"


 
Дата: Понедельник, 10.05.2010, 05:10 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


Quote (SerPaladin)
скажите пожалуста как сделать, чтобы две картинки которые отображаются скриптом, показывались разными поочерёдно каждый раз при перезагрузке страницы

Я, честно, долго «вчитывался» .. но чёй-то так и не понял, что конкретно тебе нужно ... так как я понял, то я об этом писал ....

Quote (SerPaladin)
мне нужно, чтобы после перезагрузки браузера работали разные картинки

Вот, например:

«Смена фоновой картинки при обновлении страницы для uCoz »

«Случайная фоновая картинка для «шапки» сайта на «информерах»
«Автоматическая смена фона/картинки без перезагрузки страницы »
Глянь ещё вот этот пост ...
А чем тебе не подходит «Случайная фоновая картинка для «шапки» сайта на Java Script» ...

Если ничего не подойдёт - напиши «понятно» что ты хочешь ...

Flesh

 
Дата: Понедельник, 10.05.2010, 22:44 |
SerPaladin
Рядовой
Группа: Пользователи
Сообщений: 10
Награды: 0
Репутация: 0
Статус: Offline


потому, что я использую картинку под все экраны через скрипт этот
Code
<script type="text/javascript">
document.write('<style>');
if (x <= 1000) {document.write('#clientWidth{background:url(http://denis-osadchiy.at.ua/Fon/1/800x600.jpg)no-repeat top center;width:'+x+'px; height:'+y+'px;}');}
if (x >= 1000 && x < 1200) {document.write('#clientWidth{background:url(http://denis-osadchiy.at.ua/Fon/1/1024x768.jpg) no-repeat top center;width:'+x+'px; height:'+y+'px;}');}
if (x >= 1200 && x < 1480) {document.write('#clientWidth{background:url(http://denis-osadchiy.at.ua/Fon/1/1440x900.jpg) no-repeat top center;width:'+x+'px; height:'+y+'px;}');}
if (x >= 1441) {document.write('#clientWidth{background:url(http://denis-osadchiy.at.ua/Fon/1/1600x1200.jpg) no-repeat top center;width:'+x+'px; height:'+y+'px;}');}
document.write('<\/style>');

</script>

куда нужно вставлять скрипты для смены фона при обновлении страницы, для того чтобы они работали на этой странице???

Code
<html><head>
   
<meta content="text/html; charset=UTF-8" http-equiv="content-type">  
<title>$SITE_NAME$ - $MODULE_NAME$</title>  
<?$META_DESCRIPTION$?>  
<link href="http://s44.ucoz.net/src/css/947.css" rel="StyleSheet" type="text/css">  
</head><body style="background: none repeat scroll 0% 0% rgb(0, 0, 0); margin: 0px; padding: 0px;"><table style="border-collapse: collapse;" width="22" height="24"><tbody><tr><td style="text-align: left; vertical-align: middle; background-color: rgb(255, 255, 255); letter-spacing: 0pt; word-spacing: 0pt;"><script src="http://denis-osadchiy.at.ua/media/?t=video;w=30;h=30;f=http%3A%2F%2Fdenis-osadchiy.at.ua%2Fmusi.swf" type="text/javascript"></script><br></td></tr></tbody></table>
$ADMIN_BAR$
<!--
/**
http://denis-osadchiy.at.ua/ Template Style ヅ
Date: 07.05.2010
Updated by: Flesh Team
HTML Document
**/
-->
<script type="text/javascript">
<!--
var x,y;
// общий синтаксис
if (self.innerHeight) {
  x = self.innerWidth;
  y = self.innerHeight;
// IE 6 Strict Mode
} else if (document.documentElement && document.documentElement.clientHeight) {
  x = document.documentElement.clientWidth;
  y = document.documentElement.clientHeight;
// Остальные версии IE
} else if (document.body) {
  x = document.body.clientWidth;
  y = document.body.clientHeight;
}
//-->
</script>
<style type="text/css"><!--@import url('/_theme/_st/example.css');h1{text-align:center;font-family:'Times New Roman',Georgia,serif;text-shadow:1px 1px 1px #8F8E70;margin:20px 0px 50px;color:#C00;}#clientWidth h2{margin:20px;padding:10px;background:#FFF;}#clientWidth strong{margin:10px 20px;padding:3px;background:#FFF;}#clientWidth{background:url(/_example/rotator/psBg.gif);height:150%;margin:0px auto;padding:0px;text-align:center;}--></style>
<script type="text/javascript">
document.write('<style>');
if (x <= 1000) {document.write('#clientWidth{background:url(http://denis-osadchiy.at.ua/Fon/1/800x600.jpg)no-repeat top center;width:'+x+'px; height:'+y+'px;}');}
if (x >= 1000 && x < 1200) {document.write('#clientWidth{background:url(http://denis-osadchiy.at.ua/Fon/1/1024x768.jpg) no-repeat top center;width:'+x+'px; height:'+y+'px;}');}
if (x >= 1200 && x < 1480) {document.write('#clientWidth{background:url(http://denis-osadchiy.at.ua/Fon/1/1440x900.jpg) no-repeat top center;width:'+x+'px; height:'+y+'px;}');}
if (x >= 1441) {document.write('#clientWidth{background:url(http://denis-osadchiy.at.ua/Fon/1/1600x1200.jpg) no-repeat top center;width:'+x+'px; height:'+y+'px;}');}
document.write('<\/style>');

</script>
<div id="clientWidth"><br><table style="background: none repeat-x scroll 0% 0% transparent;" border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
<tbody><tr><td>
$GLOBAL_AHEADER$  
<table style="border: 1px solid rgb(172, 172, 172);" border="0" cellpadding="0" cellspacing="0" width="731" height="44">  
<tbody><tr><td align="center" valign="top">  
<div class="grayLink" style="font-size: 10px; text-align: left; padding: 5px; margin-bottom: 5px;"><a title="Главная" href="$HOME_PAGE_LINK$"><!--<s5176>-->$GLOBAL_CLEFTER$  
  </a></div><!--ENDIF-->  
<!-- <middle> --><!-- <body> -->$CONTENT$<!-- </body> -->
</td>  
  <!-- </middle> -->  
</tr>  
</tbody></table> <br><br><br>

<br>
<br>

$POWERED_BY$</td></tr></tbody></table></div></body></html>


 
Дата: Вторник, 11.05.2010, 06:33 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


SerPaladin,
... кажись я тебя понял ...
Если в двух словах - тебе нужно чтобы картинки менялись в зависимости от разрешения экрана, плюс от обновления, то есть к своему разрешению, выводилась своя случайная картинка? ... Я правильно тебя понял? ...
Если правильно, то вот скрипт:

Java Script:

Quote (Java Script)
<script type="text/javascript">
<!--
var x,y;
var numBg = Math.floor(Math.random() * 5); // Количество картинок + 1
// общий синтаксис
if (self.innerHeight) {
x = self.innerWidth;
y = self.innerHeight;
// IE 6 Strict Mode
} else if (document.documentElement && document.documentElement.clientHeight) {
x = document.documentElement.clientWidth;
y = document.documentElement.clientHeight;
// Остальные версии IE
} else if (document.body) {
x = document.body.clientWidth;
y = document.body.clientHeight;
}
document.write('<style>');
if (x <= 800) {document.write('#clientWidth{background:url(/_example/bg/psBg700-'+numBg+'.gif);width:'+(x-50)+'px;}');}
if (x >= 800 && x < 1000) {document.write('#clientWidth{background:url(/_example/bg/psBg900-'+numBg+'.gif);width:'+(x-50)+'px;}');}
if (x >= 1000 && x < 1200) {document.write('#clientWidth{background:url(/_example/bg/psBg1100-'+numBg+'.gif);width:'+(x-50)+'px;}');}
if (x >= 1200) {document.write('#clientWidth{background:url(/_example/bg/psBg1500'+numBg+'.gif);width:'+(x-50)+'px;}');}
document.write('<\/style>');
//-->
</script>

Где:
var numBg = Math.floor(Math.random() * 5); // Количество картинок + 1 - количество картинок к каждому варианту разрешений. Имя файла, в данном варианте вот такое: с «psBg900-0.gif» по «psBg900-4.gif» ....

width:'+(x-50)+'px; - Это мой код, так как у меня в стилях «#clientWidth{margin:50px auto;}». В твоём случае оставь как у тебя.

HTML-код:

Code
<div id="clientWidth">
<strong>Пример динамической смены фоновой картинки у элемента при оновлении страницы и в зависимости от разрешения монитора пользователя. v2</strong>
</div>

Где:
Лишнее, а именно, «<strong>Пример динамической ..... много-многа букаф ...» ... убрать ...

Скриншот:

Пример:

Прикрепления (Пример динамической смены фоновой картинки у элемента при оновлении страницы и в зависимости от разрешения монитора)

P.S. Что непонятно - код в исходнике ... biggrin

Flesh

Прикрепления: rotator-v9.html (3.7 Kb) · 9210307.png (32.0 Kb)

 
Дата: Среда, 15.12.2010, 15:27 |
Рядовой
Группа: Пропавшие
Сообщений: 1
Награды: 0
Репутация: 0
Статус: Offline


Всем привет! Мне нужна ваша помощь... На своем сайте я изменила шапку стандартного шаблона. Эта шапка состоит из нескольких кусочков. Проблема в том, что на разных разрешениях экрана эти кусочки не состыковываются друг с другом... Особенно видно что эта картинка уходит ЗА эту и отображается только половина собаки...Посоветуйте что нужно сделать..
Код страницы сайта:


 
Дата: Четверг, 23.12.2010, 16:12 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


Evgeniya72tm,
Quote (Evgeniya72tm)
Всем привет!

- Добрый ...
Quote (Evgeniya72tm)
Проблема в том, что на разных разрешениях экрана эти кусочки не состыковываются друг с другом...

На «разных» - это на каких? - на высоких или на маленьких? - это принципиальный вопрос.
Сходил на сайт - при большом - более 2800px всё, вроде нормально, с шапкой, имеется в виду .....
При маленьком .... менее 1000px действительно, части наезжают друг на друга.
Выход: - установи минимальную ширину для блока с шапкой ... или вообще для всего сайта. Какие проблемы-то? .... Всё очевидно.


 
Дата: Воскресенье, 22.04.2012, 14:36 |
Dejet
Сержант
Группа: Пользователи
Сообщений: 22
Награды: 0
Репутация: 0
Статус: Offline


А подскажи, у меня стоит твой скрипт по которому картинки меняются при перезагрузке страницы. Я заметил что у меня на разных разрешениях экрана (маленьких разрешениях) картинка полностью не влазит на экран.
Вот скрипт:
Code
<script type="text/javascript">function changemyBack()
{ var myindex = 0; var mybackgrounds = new Array(12);  
  mybackgrounds[0] = "url('/images/bg/image1.jpg')";
  mybackgrounds[1] = "url('/images/bg/image2.jpg')";  
  mybackgrounds[2] = "url('/images/bg/image3.jpg')";  
  mybackgrounds[3] = "url('/images/bg/image4.jpg')";  
  mybackgrounds[4] = "url('/images/bg/image5.jpg')";  
  mybackgrounds[5] = "url('/images/bg/image6.jpg')";  
  mybackgrounds[6] = "url('/images/bg/image7.jpg')";  
  mybackgrounds[7] = "url('/images/bg/image8.jpg')";  
  mybackgrounds[8] = "url('/images/bg/image9.jpg')";  
  mybackgrounds[9] = "url('/images/bg/image10.jpg')";  
  mybackgrounds[10] = "url('/images/bg/image11.jpg')";  
  mybackgrounds[11] = "url('/images/bg/image12.jpg')";  
  myindex = Math.floor(Math.random()*12);  
  document.body.style.backgroundImage = mybackgrounds[myindex];
  }
</script>

Как приделать это (чтоб картинка влазила) этому скрипту?


 
Дата: Воскресенье, 22.04.2012, 17:14 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


Dejet,
Quote (Dejet)
Как приделать это (чтоб картинка влазила) этому скрипту?

Code
body{background-size:100% 100%!important;}

Подстройка размера изображения под разрешение экрана средствами CSS
...


 
Дата: Вторник, 24.04.2012, 14:33 |
Dejet
Сержант
Группа: Пользователи
Сообщений: 22
Награды: 0
Репутация: 0
Статус: Offline


Что то не работает(
Вот такое растянутое по высоте получается:

Добавлено (24.04.2012, 14:33)
---------------------------------------------
Разобрался) спасибо, просто нужно было поправить код на вот так:

Code
body{background-size:100% !important;}

Так кстати правильно будет?


 
Дата: Вторник, 24.04.2012, 15:55 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


Dejet,
Quote (Dejet)
Так кстати правильно будет?

Не совсем, по идее, должны задаваться оба значения:
Либо так:
Code
body{background-size:100% auto!important;}

либо так:
Code
body{background-size:auto 100%!important;}

В первом случае, заполнение происходит по ширине, во втором по высоте.
...


 
Дата: Воскресенье, 17.06.2012, 00:14 |
Dejet
Сержант
Группа: Пользователи
Сообщений: 22
Награды: 0
Репутация: 0
Статус: Offline


Сразу извиняюсь если пишу не туда
Хочу сделать рамку, вот такую - в виде киноплёнки вокруг картинки - постера вот здесь My WebPage.
Подскажите пожалуйста как это сделать

Вот такой код "Вид материалов"
Code
<TABLE border="0" cellpadding="0" cellspacing="0" width="100%" class="eBlock"><TBODY><TR><TD style="padding:3px;">  
<TR><TD align="center" style="background:none;padding:5px;border:1px solid #FFFFFF;">

<TABLE border="0" cellpadding="1" cellspacing="0" width="100%" class="eBlock"><TBODY><TR><TD style="padding:3px;">  
<TABLE border="0" cellpadding="1" cellspacing="1" width="100%" style="padding-bottom:1px;"><TBODY><TR><TD colspan="2" align="left" style="background:none;padding:5px;border:1px solid #B8B8B8;">  
<DIV style="float:left"> <span style="font-size: 11pt;"> <b><A href="$ENTRY_URL$"> $TITLE$ $FILTER1_VALUE$ </span></A></b> </DIV>  
<span style="font-size: 10pt;"><DIV style="float:right">  
Добавил: <A href="$PROFILE_URL$">$USERNAME$</A> | Дата:$DATE$ | <A href="$CATEGORY_URL$">$CATEGORY_NAME$</A> | $MODER_PANEL$  
</DIV> </span>

</TD></TR><TR valign="top"><TD align="left" width="22%" style="background:none;padding:5px;border:1px solid #B8B8B8;">  

<?if($IMG_URL1$)?><DIV align="center"> <A id="thumb1" href="$ENTRY_URL$" class="highslide" onclick="return hs.expand(this)">  
<IMG src="$IMG_URL1$" alt="$TITLE$" title="Смотреть фильм" height="310" width="220"></A></DIV><?endif?>

</TD><TD align="right" style="background:none;padding:5px;border:1px solid #B8B8B8;">  
<DIV class="eMessage" style="text-align:left;clear:both;padding-top:10px;padding-bottom:5px;">
<noindex><div align="right"><?if($AUTHOR_SITE$)?><a href="http://www.kinopoisk.ru/level/1/film/$AUTHOR_SITE$/" target="_blank" rel="nofollow"><img src="http://www.kinopoisk.ru/rating/$AUTHOR_SITE$.gif" title="Рейтинг фильма на кинопоиске" rel="nofollow"></a><?endif?></div></noindex><br>  
<span style="font-size: 11pt;"><b>Описание:  </b></span> <span style="font-size: 10pt;"><span style="color: black;">

$MESSAGE$</span></span>  
</DIV></TD></TR><TR><TD colspan="2" align="left" style="background:none;padding:5px;border:1px solid #B8B8B8;"><P align="center">  
   
<A href="$ENTRY_URL$"><B><span style="font-size: 11pt;">СМОТРЕТЬ</span></B></A><span style="font-size: 10pt;">    Просмотров: [<B>$READS$</B>] | <A href="$COMMENTS_URL$"> </A> Комментарии <A href="$COMMENTS_URL$"> ($COMMENTS_NUM$)</A> | Рейтинг: $RATING$/$RATED$</span></P></TD></TR></TBODY></TABLE>  
   
</TD></TR></TBODY></TABLE>  

</TD></TR></TBODY></TABLE>


Сообщение отредактировал Dejet - Воскресенье, 17.06.2012, 00:24
 
Дата: Воскресенье, 17.06.2012, 00:53 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


Dejet,
Quote (Dejet)
Хочу сделать рамку, вот такую - в виде киноплёнки вокруг картинки - постера вот здесь My WebPage.
Подскажите пожалуйста как это сделать

Проще всего положить подложку фоном к ячейке, а в самой ячейке сам постер.
Естественно все это хорошо, пока постер фиксированного и определенного размера.
Ничего сложного не вижу, подобрать и установить подходящие размеры.
...


 
Дата: Воскресенье, 17.06.2012, 01:24 |
Dejet
Сержант
Группа: Пользователи
Сообщений: 22
Награды: 0
Репутация: 0
Статус: Offline


К сожалению не фиксированного размера, так как с боку текст с описанием, а вот он бывает большим - и соответственно длиннее по высоте

 
Дата: Воскресенье, 17.06.2012, 02:07 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


Dejet,
Quote (Dejet)
К сожалению не фиксированного размера, так как с боку текст с описанием, а вот он бывает большим - и соответственно длиннее

Имелось в виду: «постер фиксированного и определенного размера» - картинка для которой подложка - рамка.
Я смотрел у вас они в принципе одинаковые более менее, так что проблем нне должно быть, если ничего не изменится.
...


 
Дата: Воскресенье, 17.06.2012, 13:09 |
Dejet
Сержант
Группа: Пользователи
Сообщений: 22
Награды: 0
Репутация: 0
Статус: Offline


А как это сделать, помогите если можно

 
Скрипты и коды для юкоз - Форум аццкого кодера » Раздел для начинающих » Вопросы/ответы на тему JQuery и JScript на сайтах в uCoz » Разные картинки под разные маниторы (Разные картинки под разные маниторы)
  • Страница 1 из 2
  • 1
  • 2
  • »
Поиск:


Мобильная версия