Jak tworzyć obrazy najazdu z kodem HTML

Autor: Janice Evans
Data Utworzenia: 23 Lipiec 2021
Data Aktualizacji: 16 Grudzień 2024
Anonim
How to create  image rollover using HTML 5 and Javascript
Wideo: How to create image rollover using HTML 5 and Javascript

Zawartość

Z milionami stron internetowych, które istnieją w Internecie, bardzo ważne jest, aby były unikalne. Jedną z technik dodawania efektu dynamicznego do stron internetowych są „obrazy najazdu”, znane również jako „przyciski najazdu”. Zasadniczo, gdy użytkownik unosi się nad obrazem, zmienia się i powraca do normalnego stanu po usunięciu myszy. Może to być wykorzystane do niektórych subtelnych efektów, takich jak zmiana koloru obrazu lub litery. Możesz utworzyć własny obraz najazdu z podstawowym formatowaniem HTML w różnych programach projektowych.


Instrukcje

Twórz dynamiczne strony internetowe za pomocą obrazów rollover (Jupiterimages / Photos.com / Getty Images)
  1. Utwórz nowy dokument o żądanym rozmiarze (w pikselach) za pomocą oprogramowania do edycji obrazów, takiego jak Photoshop. Utwórz obrazy normalne i „rollover”, które muszą być tego samego rozmiaru.

  2. Zapisz oba obrazy pojedynczo, przechodząc do menu „Plik” i wybierając „Zapisz”. Użyj formatów JPEG, GIF lub PNG. Chociaż pierwsze dwa są najczęściej używane, PNG zachowują przezroczystość. Pamiętaj, aby zapisać obraz w lokalnym folderze głównym witryny.

  3. Otwórz odpowiednie oprogramowanie do projektowania, takie jak Adobe Dreamweaver. Kliknij przycisk „Odśwież” w bibliotece, aby zaktualizować bibliotekę i lokalny folder główny witryny. Znajdź obrazy w folderze głównym.


  4. Przejdź do widoku kodu strony internetowej.

  5. Wpisz „

    „W kodzie bez cytatów początkowych.

  6. Zastąp „http://yoursite.com” swoim adresem witryny. Zastąp także „IMAGE1” i „IMAGE2” odpowiednio nazwami obrazów normalnych i „rollover”.

Czego potrzebujesz

  • Oprogramowanie do edycji obrazów
  • Oprogramowanie do projektowania stron internetowych