| 1 |
2 |
3 |
Внутри тега <BODY> - </BODY> там где у Вас будет картинка с отражением |
|
|
| 1. Пример (отражение включено) |
 |
|
1. Просто картинка
2. Эта же картинка с включенным отражением class="reflect", все параметры по умолчанию. |
| 2. Пример (высота отражения rheight) |
|
|
|
Высота отражения задаётся в % от высоты картинки.
По умолчанию 50%.
1. class="reflect rheight20"
2. class="reflect rheight60"
3. class="reflect rheight100" |
| 3. Пример (прозрачность отражения ropacity) |
|
|
|
Прозрачность отражения задаётся в %.
По умолчанию 50%.
1. class="reflect ropacity20"
2. class="reflect ropacity50"
3. class="reflect ropacity80" |
| 4. Пример (фон отражения) |
|
|
Задание фона отражению и рамки картинки с отражением
1. Пример красного фона и рамки
2. Так можно сделать зеленоватую подсветку отражения морской воды. |
| 5. Пример (рамка картинки с отражением) |
|
Помещаем картинку с отражением в контейнер(тег div) и ему задаём нужные размеры и рамку. |
Зеркальным отражением можно управлять из скрипта:
Например:
- 1. добавить или изменить существующее отражение; height и opacity могут принимать значения от 0 до 1
Reflection.add(document.getElementById("imageID"), { height: 3/4, opacity: 2/3 });
- 2. удалить существующее зеркальное отражение
Reflection.remove(document.getElementById("imageID"));
- 3. изменить значения по умолчанию для высоты и прозрачности отражения; по умолчанию оба равны 0.5
Reflection.defaultHeight = height;
Reflection.defaultOpacity = opacity; |
| 6. Пример (изменение прозрачности при наведении и снятии курсора) |
|
При наведении курсора прозрачность отражения уменьшается (отражение становится ярче), при снятии прозрачность востанвливается. |
| 7. Пример (включение-выключение отражения) |
|
Сброс отражения |
При клике по картинке отражение появляется, а при клике по ссылке "Сброс отражения" исчезает. |
| 8. Пример (изменение прозрачности отражения) |
|
Начальная прозрачность 10%.
Увеличение прозрачности на 10% при каждом клике по ссылке "Увеличить".
(10% opacity) увеличить |
При каждом клике по ссылке "увеличить" прозрачность будет увеличиваться на 10%. |
| 9. Пример (размеры картинки с отражением) |
|
|
Это делается заданием размеров исходной картинки. |
| 10. Пример (картинка с отражением - ссылка) |
|
Картинку с отражением можно вставлять в тег , т.е. использовать как ссылку. |
