Jak utworzyć obraz najazdu w programie Dreamweaver
Te zduplikowane obrazy mogą być używane jako najazdy.
pk74 / obrazy Getty
Obraz najazdu to obraz, który zmienia się na inny obraz, gdy Ty lub Twój klient najedziecie na niego myszą. Są one powszechnie używane do tworzenia interaktywnych elementów, takich jak przyciski lub zakładki. Ale możesz tworzyć obrazy najazdu z niemal wszystkiego.
Ten samouczek ma pomóc w tworzeniu obrazu najazdu w programie Dreamweaver. Jest przeznaczony do użytku przez osoby korzystające z następujących wersji programu Dreamweaver:
- Dreamweaver MX
- Dreamweaver MX 2004
- tkacz snów 8
- Dreamweaver CS3
- Dreamweaver CS4
- Dreamweaver CS5
- Dreamweaver CS6
Wymagania dla tego samouczka
- Uruchom Dreamweaver
- Otwórz stronę internetową, na której chcesz najechać
- Przejdź do menu Wstaw i w dół do Obiekty obrazu podmenu.
- Wybierz Najazd obrazu lub Obraz najazdu .
Jedna z wersji wymienionych powyżej.
Pamiętaj, aby zoptymalizować ten obraz. Pomoże to w szybszym wczytywaniu stron.
Ten obraz powinien mieć takie same wymiary jak obraz oryginalny. I podobnie jak oryginalny obraz, powinien być zoptymalizowany, aby przyspieszyć ładowanie strony.
To jest strona HTML, na której umieścisz obraz najazdu.
Zaczynaj
Lifewire / J Kyrnin' id='mntl-sc-block-image_2-0-1' /> Lifewire / J Kyrnin
Wstaw obiekt obrazu najazdu
Dreamweaver ułatwia tworzenie obrazu najazdu.
Niektóre starsze wersje programu Dreamweaver zamiast tego nazywają Image Objects Interactive Images.
Powiedz Dreamweaver, jakich obrazów użyć
Dreamweaver wyświetla okno dialogowe z polami, które należy wypełnić, aby utworzyć obraz najazdu.
Nazwa obrazu
Wybierz nazwę obrazu, która jest unikalna dla strony. Powinno to być jedno słowo, ale możesz używać cyfr, podkreśleń (_) i łączników (-). Będzie to używane do identyfikacji obrazu do zmiany.
Oryginalny obraz
To jest adres URL lub lokalizacja obrazu, który rozpocznie się na stronie. W tym polu możesz użyć względnej lub bezwzględnej ścieżki URL. Powinien to być obraz, który istnieje na Twoim serwerze internetowym lub który prześlesz wraz ze stroną.
Obraz najazdu
To jest obraz, który pojawi się po najechaniu myszą na obraz. Podobnie jak oryginalny obraz, może to być bezwzględna lub względna ścieżka do obrazu i powinna istnieć lub zostać przesłana podczas przesyłania strony.
Wstępnie wczytaj obraz najazdu
Ta opcja jest wybrana domyślnie, ponieważ pomaga szybciej pojawiać się najazd. Po wybraniu wstępnego załadowania obrazu najazdu przeglądarka internetowa będzie przechowywać go w pamięci podręcznej, dopóki nie najedzie na niego mysz.
Alternatywny tekst
Dobry tekst alternatywny sprawia, że Twoje obrazy są bardziej dostępne. Podczas dodawania obrazów należy zawsze używać jakiegoś tekstu alternatywnego.
Po kliknięciu przejdź do adresu URL
Większość ludzi kliknie obraz, gdy zobaczą go na stronie. Powinieneś więc mieć w zwyczaju sprawiać, by były klikalne. Ta opcja umożliwia określenie strony lub adresu URL, na który widz przeniesie się po kliknięciu obrazu. Ale ta opcja nie jest wymagana do utworzenia najazdu.
Po wypełnieniu wszystkich pól kliknij OK aby Dreamweaver utworzył obraz najazdu.
Dreamweaver pisze dla Ciebie JavaScript
Jeśli otworzysz stronę w widoku kodu, zobaczysz, że Dreamweaver wstawia blok JavaScript do twojego dokumentu HTML. Ten blok zawiera 3 funkcje potrzebne do zamiany obrazów, gdy najedziesz na nie myszą, oraz funkcję wstępnego ładowania, jeśli zdecydujesz się na to.
|_+_|
Dreamweaver dodaje kod HTML dla najazdu
Jeśli zdecydujesz, że Dreamweaver wstępnie wczytuje obrazy najazdu, zobaczysz kod HTML w treści dokumentu, aby wywołać skrypt wstępnego ładowania, aby obrazy wczytywały się szybciej.
|_+_|
Dreamweaver dodaje również cały kod obrazu i łączy go (jeśli podałeś adres URL). Część rollover jest dodawana do tagu kotwicy jako atrybuty onmouseover i onmouseout.
|_+_|
Przetestuj rollover
Lifewire / J Kyrnin' id='mntl-sc-block-image_2-0-35' /> Lifewire / J Kyrnin
Zobacz w pełni funkcjonalny obraz najazdu i dowiedz się, co myśli Shasta.