Главная » 2012 » Сентябрь » 3 » Картинка с описанием на странице материала (Скрипты для ucoz)
03.09.2012, 22:49

Картинка с описанием на странице материала




В целом, можно найти в интернете скрипты, которые прописывают под изображением нужный текст, который расположен в title самого изображения. Однако, если вы не хотите, чтобы ваш сайт нагружался лишними скриптами, можно попробовать этот способ на HTML+CSS
Шаг 1:
Активируйте в нужом модуле "дополнительное поле 1" и переименуйте его в "Описание скриншота"
Шаг 2:

На страницу материалов и комментариев к нему или в вид материалов:

Code
<div class="content_img">
  <img alt="пример новости в демо" title="картинка новости "src="$IMAGE_URL1$">
<span>$OTHER1$</span>
</div>

При необходимости, можете повторить шаги 1-2 для дополнительных изображений и полей.
Шаг 3:

В CSS поставьте:

Code

/* Описание под картинкой
------------------------------------------*/
.content_img {
  width:160px;
  float:right;  
  display:block;
  text-align:center;
  background: #f6f6f6;
  outline: 1px solid #D0D0D0;  
  border: 1px solid #fff;  
  padding: 5px 5px 5px 5px;  
  margin: 0px 2px 5px 20px;  
}

.content_img img {
  margin: 3px 0px 3px 0px;  
}

.content_img span {
  color:#777;
  font: 10px Verdana,Arial,Helvetica, sans-serif;
  text-shadow: 1px 1px 1px #fff;  
}


Обратите внимание, что в данном примере, контейнер div будет размещён с правой стороны вашего контента, для отображения с левой стороны контента, вам необходимо установить этот стиль:

Code
/* Описание под картинкой
------------------------------------------*/
.content_img {
  width:160px;
  float:left;  
  display:block;
  text-align:center;
  background: #f6f6f6;
  outline: 1px solid #D0D0D0;  
  border: 1px solid #fff;  
  padding: 5px 5px 5px 5px;  
  margin: 0px 20px 5px 0px;  
}

.content_img img {
  margin: 3px 0px 3px 0px;  
}

.content_img span {
  color:#777;
  font: 10px Verdana,Arial,Helvetica, sans-serif;
  text-shadow: 1px 1px 1px #fff;  
}


На этом всё, спасибо за внимание!
Материал взят с сайта infoscript.ru
Внимание! Копирование данного материала запрещено без указания ссылки на сайт Infoscript.ru
Источник/Автор: center-dm.ru
Категория: Скрипты uCoz | Просмотров: 1529 | Добавил: sold93 | Рейтинг: 5.0/2 |
Теги: странице, На, картинка, описанием, материал
Всего комментариев: 2
0  
1 hoster-saitov   (03.09.2012 23:09) [Материал]
Аватар пользователя
В целом, можно найти в интернете скрипты, которые прописывают под изображением нужный текст, который расположен в title самого изображения. Однако, если вы не хотите, чтобы
А пчм после чтобы не чё не написано?

0  
2 sold93 -Infoscript Team-  (03.09.2012 23:22) [Материал]
Аватар пользователя
biggrin не дописал мысль

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]