Как сделать ролловер изображений с HTML кодом

Видео: HTML Image Submit Buttons (with Rollover) Tutorial

Содержание

направления
Что вам нужно

С миллионами веб-сайтов, которые существуют в Интернете, важно, чтобы ваш был уникальным. Одним из методов, используемых для добавления динамического эффекта к веб-сайтам, является «ролловер изображений», также известный как «кнопки ролловера». По сути, когда посетитель наводит курсор на изображение, оно изменяется и возвращается к нормальному состоянию, когда мышь удалена. Это может быть использовано для некоторых тонких эффектов, таких как изменение цвета изображения или буквы. Вы можете создать свое собственное изображение ролловера с базовым форматированием HTML в различных дизайнерских программах.

направления

Создавайте динамические сайты с помощью ролловеров (Jupiterimages / Photos.com / Getty Images)

Создайте новый документ нужного размера (в пикселях) с помощью программного обеспечения для редактирования изображений, такого как Photoshop. Создайте обычные и «ролловерные» изображения, которые должны быть одинакового размера.
Сохраните оба изображения по отдельности, перейдя в меню «Файл» и выбрав «Сохранить». Используйте форматы JPEG, GIF или PNG. Хотя первые два наиболее часто используются, PNG сохраняют прозрачность. Обязательно сохраните изображение в локальной корневой папке вашего сайта.
Откройте соответствующее программное обеспечение для дизайна, например, Adobe Dreamweaver. Нажмите кнопку «Обновить» в библиотеке, чтобы обновить библиотеку и локальную корневую папку для вашего сайта. Найдите изображения в корневой папке.
Переключитесь на просмотр кода веб-страницы.
Тип "
"В коде без стартовых кавычек.
Замените "http://yoursite.com" на адрес своего сайта. Также замените «ИЗОБРАЖЕНИЕ 1» и «ИЗОБРАЖЕНИЕ 2» именами обычных изображений и изображений «ролловера» соответственно.