Изменение изображения при наведении курсора в определённое место

@digitalrange · Регистрация: 25.05.2014

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

Добрый вечер, как реализовать такое? http://www.ilm.com/ (водите курсором по изображению). Если не составит труда киньте пожалуйста пример.

@Streletz · 18.10.2014, 00:52

Это сделано с помощью Flash. Поэтому, о том как это реализовать Вам, скорее всего, лучше спросить в разделе, который посвящён этой технологии.

@digitalrange · 18.10.2014, 00:53 **[ТС]**

Я подумал что может есть возможность реализовать это с помощью CSS

@Streletz · 18.10.2014, 00:56

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

Я подумал что может есть возможность реализовать это с помощью CSS

CSS обладает широкими возможностями. Но, увы, не настолько, чтобы осуществлять подобную обработку.

@Lazy_Den · 18.10.2014, 01:24

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

как реализовать такое?

Хм... Чего ж у них, как-то криво реализовано...
Собственно, могу предложить свой старенький вариант. Может не доведён до идеала, но как хороший старт - пойдёт.

Добавлено через 8 минут
P.S. Чуть подправил, чтоб по центру курсор был.

@digitalrange · 18.10.2014, 01:44 **[ТС]**

ещё вот вопрос
я написал

HTML5
1
2
3
4
<div id="background">
<div id="color">
</div>
</div>

подключил CSS, изображение появилось круг есть, но не движется. Как правильно воздействовать JS'ом на эти элементы? Отдельно подключал JS не работало через <script> </script> тоже не работает

@Lazy_Den · 18.10.2014, 02:01

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

Как правильно воздействовать JS'ом на эти элементы?

В моём случае используется библиотека jQuery. Если у вас она так же присутствует, то нужно JS-код обернуть в такую конструкцию:

JavaScript
1
2
3
$(function(){
    // тут код
});

Если библиотеки не используете, то можно и на чистом JS. Код разместите внизу страницы.

Добавлено через 2 минуты

JavaScript
1
2
3
4
5
6
7
8
9
10
var bg = document.getElementById('background'),
    clr = document.getElementById('color');
 
bg.addEventListener('mousemove', function(e){
    var pX = e.pageX,
        pY = e.pageY;
    clr.style.left = pX +'px';
    clr.style.top = pY +'px';
    clr.style.backgroundPosition = '-'+ pX +'px -'+ pY +'px';
}, false);

@digitalrange · 18.10.2014, 02:21 **[ТС]**

Огромное спасибо за помощь

Новые блоги и статьи Все статьи Все блоги /
Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .
SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .

@digitalrange 0 / 0 / 0 Регистрация: 25.05.2014 Сообщений: 15

	Изменение изображения при наведении курсора в определённое место 18.10.2014, 00:40. Показов 1565. Ответов 7 Метки нет (Все метки) Добрый вечер, как реализовать такое? http://www.ilm.com/ (водите курсором по изображению). Если не составит труда киньте пожалуйста пример. 0

@Streletz 349 / 262 / 65 Регистрация: 07.04.2014 Сообщений: 1,603
	18.10.2014, 00:52
	Это сделано с помощью Flash. Поэтому, о том как это реализовать Вам, скорее всего, лучше спросить в разделе, который посвящён этой технологии. 0

@digitalrange 0 / 0 / 0 Регистрация: 25.05.2014 Сообщений: 15
	18.10.2014, 00:53 [ТС]
	Я подумал что может есть возможность реализовать это с помощью CSS 0

@digitalrange 0 / 0 / 0 Регистрация: 25.05.2014 Сообщений: 15
	18.10.2014, 02:21 [ТС]
	Огромное спасибо за помощь 0

Изменение изображения при наведении курсора в определённое место

Решение