Время:
Новых сообщений: Нет
Вы на форуме дней
Ваша группа: Гость
Ваш IP: 18.221.92.180
Logical-Portal — молодежный портал со своей изюминкой, каждый сможет найти что-то интересное и полезное для себя, например наш форум общения с которым вам обязательно нужно ознакомиться.
  • Страница 1 из 1
  • 1
Архив - только для чтения
Watermark на uCoz реально?? !!!
Сообщение оставлено 01.06.2010 в 22:35:58 | Сообщение #1
Всем привет! Сегодня я вам расскажу как сделать вотермарк картинкой на uCoz'e в трех видах:
- Эффект рамки для изображения. Пример
- Водяной знак на изображении. http://i037.radikal.ru/0912/e2/4b3ca8b68af3.jpg
- Подпись к изображению. Пример

Установка:

Для начала активируем Дополнительное поле #1.Потом идем в замена стандартных надписей - Добавление в модуль новости - и меняем Дополнительное Поле 1 на URL Изображения.
Эффект рамки для изображения:
Потом идем в вид материалов новостей:
В самый верх вида материалов вставляем,или вставляем в любое место в CSS.

Code
<style>.frame-block {   

position: relative;   

display: block;   

height:335px;   

width: 575px;   

}   

.frame-block span {   

background: url(Ваша рамка.png) no-repeat center top;   

height:335px; - Размеры   

width: 575px; - Размеры   

display: block;   

position: absolute;   

}   
</style>

А потом уже вставляем в вид материалов:

Code
<div class="frame-block">   

<span> </span>   

<img src="$OTHER1$" alt="" />   

</div>

Водяной знак на изображении:
CSS:

Code
<style>.transp-block {   

background: #000 url(Водяной знак.jpg) no-repeat;   

width: 575px;   

height: 335px;   

}   

img.transparent {   

filter:alpha(opacity=75); - Прозачность watermark'a   

opacity:.75;   

}</style>

HTML:

Code
<div class="transp-block">   

<img class="transparent" src="$OTHER1$" alt="" />   

</div>

Подпись к изображению:
CSS:

Code
<style>   
.img-desc {   

position: relative;   

display: block;   

height:335px;   

width: 575px;   

}   

.img-desc cite {   

background: #111;   

filter:alpha(opacity=55);   

opacity:.55;   

color: #fff;   

position: absolute;   

bottom: 0;   

left: 0;   

width: 555px;   

padding: 10px;   

border-top: 1px solid #999;   

}   
</style>

HTML:

Code
<div class="img-desc">   

<img src="$OTHER1$" alt="" />   

<cite>Ваша подпись</cite>   

</div>
 
 
   
Сообщение оставлено 01.06.2010 в 23:24:45 | Сообщение #2
Работает?
 
 
   
Сообщение оставлено 01.06.2010 в 23:40:34 | Сообщение #3
вроде да
 
 
   
Сообщение оставлено 01.06.2010 в 23:40:41 | Сообщение #4
попробуй
 
 
   
Сообщение оставлено 14.06.2010 в 10:44:06 | Сообщение #5
Quote (SpiritIce)
А потом уже вставляем в вид материалов:

Code
Показать код
<div class="frame-block">

<span> </span>

<img src="$OTHER1$" alt="" />

</div>


не обязательно, это можно использовать везде, также $OTHER1$ здесь лишний, т.к. картинки по разному грузят на сайт "$IMAGE1_10$" к примеру и т.п., либо просто картинки на сайте)) картинку закрываете div'ом который несёт в себе определённый стиль
Code
<div class="frame-block">
имг
</div>
и сам Watermark на uCoz не реально, это только работа со стилем, если картинку открыть отдельно то она будет простой) обычное наложение css smile
 
 
   
Сообщение оставлено 16.06.2010 в 16:39:38 | Сообщение #6
не работает
 
 
   
Сообщение оставлено 16.06.2010 в 16:48:13 | Сообщение #7
да скрипт не работает
закрыто
 
 
   
Сообщение оставлено 18.06.2010 в 21:10:10 | Сообщение #8
Автор знает зачем делают вотемарк и как он работает ????
В данном примере рассмотрен часный случай с наложением картинки на картинку. в браузере это выглядит как вотемар....

НО вотемарки для поисковиков и любителей качать картинки и ониего даже не заметят )) Тема закрыта. спасибо за скрипт.

 
   
  • Страница 1 из 1
  • 1
Поиск:
 
Графика от: Megas, GraFOS | Дизайн сверстал E.A.
Хостинг от uCoz
Яндекс.Метрика