Манипуляции с картинкой

@Subik · Регистрация: 10.01.2013

Студворк — интернет-сервис помощи студентам

Всем привет.
На сайт магазина нужно вставить картинки товара.
Но...=)
Картинка на против товара должна быть 50х50(примерно)
Но при наведении курсора, она должна увеличится до 350х300(примерно)
+ на новой увеличенной картинке должен появится текст.
Так же новая увеличенная картинка не должна выходить за рамки сайта.
Вообщем увеличение должно происходить в центр сайта.
Как только курсор с картинки убираем, она должна вернуться в исходный размер 50х50
Есть идеи как это сделать средствами Html'a=))?

@CapObvs · 24.09.2013, 11:37

Средствами HTML ты такую вещь не сделаешь. Нужно по-любому использовать JavaScript (а точнее, jQuery).

Для этого тебе нужно:

1. Если ты еще jQuery не используешь, между тегами <head> и </head> прописать следующую строчку:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>

2. Создать файл с расширением .js, в котором написать примерно такой скрипт:

function my() {

$('#img').hover(function() {

$('#img').animate({
'width':'350px',
'height':'300px'
})

},

function() {

$('#img').animate({
'width':'50px',
'height':'50px'

})
}

});

}

window.onload = my;

3. Затем в файл html опять же между тегами <head> и </head> написать:

<script type="text/javascript" src="Путь к созданному javascript-файлу"></script>

@KaRaNTiN · 24.09.2013, 11:39

Сообщение от Subik

Есть идеи как это сделать средствами Html'a=))?

Никак. Проще это сделать это средствами jQuery.

@Subik · 24.09.2013, 11:46 **[ТС]**

Хорошо, можно и с JS.
Как тогда такое сделать?

Добавлено через 4 минуты
И да, забыл добавить, все это дело будет работать на битриксе.
Файл я может быть и смогу создать, а вот сделать запись в хедах нет=(

@CapObvs · 24.09.2013, 11:54

В любом случае тебе придётся делать скрипт JS и каким-то образом подключать его к своим файлам))

О том, как подключать файлы стилей и JS в Битриксе, можешь почитать, например, вот тут:

http://lamp-dev.ru/bitrix/bitr... pt-header/

@KaRaNTiN · 24.09.2013, 12:45

Сообщение от Subik

а вот сделать запись в хедах нет=(

учи битрикс).. Всё можно.

@Subik · 24.09.2013, 18:42 **[ТС]**

Спасибо=)
Буду разбираться=)
Но если, будет, что еще добавить, пожалуйста не стесьняйтесь=)
Буду рад, новым ответам=)

Новые блоги и статьи Все статьи Все блоги /
Программный контроль заполнения реквизита табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать контроль заполнения реквизита "ПричинаСписания". . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .
Программное заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .	Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .	Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем

@Subik 170 / 45 / 5 Регистрация: 10.01.2013 Сообщений: 424

	Манипуляции с картинкой 24.09.2013, 11:21. Показов 2682. Ответов 6 Метки нет (Все метки) Всем привет. На сайт магазина нужно вставить картинки товара. Но...=) Картинка на против товара должна быть 50х50(примерно) Но при наведении курсора, она должна увеличится до 350х300(примерно) + на новой увеличенной картинке должен появится текст. Так же новая увеличенная картинка не должна выходить за рамки сайта. Вообщем увеличение должно происходить в центр сайта. Как только курсор с картинки убираем, она должна вернуться в исходный размер 50х50 Есть идеи как это сделать средствами Html'a=))? 0

@CapObvs 0 / 0 / 0 Регистрация: 24.09.2013 Сообщений: 5
	24.09.2013, 11:37
	Средствами HTML ты такую вещь не сделаешь. Нужно по-любому использовать JavaScript (а точнее, jQuery). Для этого тебе нужно: 1. Если ты еще jQuery не используешь, между тегами <head> и </head> прописать следующую строчку: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script> 2. Создать файл с расширением .js, в котором написать примерно такой скрипт: function my() { $('#img').hover(function() { $('#img').animate({ 'width':'350px', 'height':'300px' }) }, function() { $('#img').animate({ 'width':'50px', 'height':'50px' }) } }); } window.onload = my; 3. Затем в файл html опять же между тегами <head> и </head> написать: <script type="text/javascript" src="Путь к созданному javascript-файлу"></script> 0

@Subik 170 / 45 / 5 Регистрация: 10.01.2013 Сообщений: 424
	24.09.2013, 11:46 [ТС]
	Хорошо, можно и с JS. Как тогда такое сделать? Добавлено через 4 минуты И да, забыл добавить, все это дело будет работать на битриксе. Файл я может быть и смогу создать, а вот сделать запись в хедах нет=( 0

@CapObvs 0 / 0 / 0 Регистрация: 24.09.2013 Сообщений: 5
	24.09.2013, 11:54
	В любом случае тебе придётся делать скрипт JS и каким-то образом подключать его к своим файлам)) О том, как подключать файлы стилей и JS в Битриксе, можешь почитать, например, вот тут: http://lamp-dev.ru/bitrix/bitr... pt-header/ 0

@Subik 170 / 45 / 5 Регистрация: 10.01.2013 Сообщений: 424
	24.09.2013, 18:42 [ТС]
	Спасибо=) Буду разбираться=) Но если, будет, что еще добавить, пожалуйста не стесьняйтесь=) Буду рад, новым ответам=) 0