Пятница, 05.07.2024, 02:02
Приветствую Вас Гость | RSS

База Полезных Данных

Категории сайта
Форма входа
Реклама
Besucherzahler senior people meet
счетчик для сайта

Каталог статей

Главная » Статьи » Полезные статьи

Скрипт Увеличение/Уменьшение картинки в тексте
Если на вашем сайте расположено много различных демонстрационных фотографий, картинок или других изображений, то вам точно может пригодиться данный скрипт. Скрипт будет очень полезен для различных видов сайтов, где присутствуют изображения. Скрипт очень прост в использовании и удобен в установке.

В этой статье я хочу рассказать, как правильно прикрепить скрипт к своему сайту, функциональная способность которого позволяет увеличивать/уменьшать изображения, которые могут располагаться на любой странице вашего ресурса.

Скрипт рассчитан на увеличение изображение от первоначальных параметров к оригинальному виду и обратно.

Откройте в редакторе страницу сайта где вы хотите применить скрипт, например, это страница index.html и пропишите в начале страницы между тэгами <head></head>  данный скрипт:

<script type="text/javascript" src="js/highslide.js"></script>
<link rel="stylesheet" type="text/css" href="js/highslide.css" />
<script type="text/javascript">
hs.graphicsDir = 'js/graphics/';
hs.wrapperClassName = 'wide-border';
</script>

Дальше, например в тексте документа вы хотите вставить картинку img.jpg. Здесь  есть 3 варианта для увеличения изображения при нажатиии:

1 Вариант. Увеличение вставленной картинки из заранее уменьшенного вида. То есть картинка будет сама уменьшена средствами css или html. Здесь можно использовать картинку в оригинальном виде. Этот скрипт выглядит так:

<a href="img/img.jpg" onclick="return hs.expand(this)"><img src="img/img.jpg" width="40" height="80"></a>


2 Вариант.
Увеличение изображения из второго, уменьшенного файла. То есть, понадобятся две картинки - оригинал slide.jpg и уменьшенная,  при нажатии на которую будет открываться полная slide2.jpg. Выглядеть это будет так:

<a href="img/img2.jpg" onclick="return hs.expand(this)"><img src="img/img.jpg"></a>




3 Вариант. Здесь изображение будет увеличиваться при наведении на него мыши и уменьшаться, когда мышь уйдет с рисунка. Для этого скрипта так же понадобятся две картинки - уменьшенной и оригинальной версии. Скрипт выглядит так:

<img src="ссылка_на картинку1" border="0"onmouseover="this.src='ссылка_на картинку2';" onMouseOut="this.src='ссылка_на картинку1';" />




Всё должно работать в идеальном порядке!


Источник:
Категория: Полезные статьи | Добавил: datbaze (28.11.2012)
Просмотров: 868 | Теги: Изменение, скрипт, уменьшение, изображение, увеличение | Рейтинг: 5.0/1
Всего комментариев: 0
Имя *:
Email *:
Код *:
Поделиться
Поиск по сайту
Реклама
Статистика
Наверх

Copyright MyCorp © 2024