Bir rollover görüntüsü, siz veya müşteriniz fareyi üzerine döndürdüğünüzde başka bir resme dönüşen bir resimdir. Bunlar genellikle düğmeler veya sekmeler gibi etkileşimli bir his yaratmak için kullanılır. Ancak, hemen her şeyden önce rollover görüntüleri oluşturabilirsiniz.
Bu eğitici, Dreamweaver'da bir rollover görüntüsü oluşturmanıza yardımcı olmak için tasarlanmıştır. Aşağıdaki Dreamweaver sürümlerini kullanan kişiler tarafından kullanılmak üzere tasarlanmıştır:
- Dreamweaver MX
- Dreamweaver MX 2004
- Dreamweaver 8
- Dreamweaver CS3
- Dreamweaver CS4
- Dreamweaver CS5
- Dreamweaver CS6
Bu Eğiticinin Gereksinimleri
- Dreamweaver
Yukarıda listelenen versiyonlardan biri. - Orijinal bir resim
Bu resmi optimize ettiğinizden emin olun. Bu, sayfalarınızın daha hızlı yüklenmesine yardımcı olur. - Rollover resmi
Bu görüntü orijinal görüntüyle aynı boyutlarda olmalıdır. Ve orijinal görüntü gibi, sayfa yükleme sürelerine yardımcı olmak için optimize edilmelidir. - Bir web sayfası
Bu, rollover resminizi koyacağınız HTML sayfasıdır.
06/06
Başlamak
- Dreamweaver uygulamasını başlat
- Rolünüzü istediğiniz web sayfasını açın
02/06
Bir Rollover Image Image Nesnesi Ekleme
Dreamweaver, bir rollover görüntüsü oluşturmayı kolaylaştırır.
- Ekle menüsüne ve aşağıdan “Görüntü Nesneleri” alt menüsüne gidin.
- “Resim döndürme” veya “Rollover image” öğesini seçin
Dreamweaver'ın bazı eski sürümleri, bunun yerine Görüntü Nesneleri “Etkileşimli Görüntüler” olarak adlandırılır.
03/06
Dreamweaver'a Kullanılacak Görüntüleri Anlatın
Dreamweaver, rollover resminizi oluşturmak için doldurmanız gereken alanları içeren bir iletişim kutusu açar.
Görüntü adı
Sayfa için benzersiz bir resim adı seçin. Tek bir kelime olmalı, ancak sayıları, alt çizgi (_) ve tireleri (-) kullanabilirsiniz. Bu, değiştirilecek görüntüyü tanımlamak için kullanılacaktır.
Gerçek görüntü
Bu, sayfada çıkacak resmin URL'si veya konumu. Bu alandaki göreli veya mutlak yol URL'lerini kullanabilirsiniz. Bu, web sunucunuzda bulunan veya sayfa ile yükleyeceğiniz bir resim olmalıdır.
Rollover Resmi
Bu, resmin üzerine fare eklediğinizde görünecek olan görüntüdür. Orijinal görüntü gibi, bu görüntü için mutlak veya göreceli bir yol olabilir ve sayfayı yüklediğinizde mevcut olmalı veya yüklenmelidir.
Önyükleme Rollover Resmi
Bu seçenek, rollover'ın daha hızlı görünmesine yardımcı olduğu için varsayılan olarak seçilir. Devrilme görüntüsünü önceden yüklemeyi seçerek, Web tarayıcısı, fare üzerine gelene kadar bir önbellekte saklar.
Alternatif yazı
İyi alternatif metin , resimlerinizi daha erişilebilir hale getirir. Herhangi bir resim eklerken her zaman alternatif metin kullanmalısınız.
Tıklandığında, URL'ye Git
Çoğu kişi bir sayfada bir göründüklerinde bir resmin üzerine tıklar. Yani onları tıklanabilir hale getirme alışkanlığında olmalısın. Bu seçenek, görüntüleyiciyi resmin üzerine tıkladıklarında çekmek için sayfayı veya URL'yi belirtmenize olanak tanır. Ancak bu seçenek bir rollover oluşturmak için gerekli değildir.
Tüm alanları tamamladığınızda, Dreamweaver uygulamasının rollover resminizi oluşturması için Tamam'ı tıklayın.
Bir sonraki sayfada Dreamweaver'in yazdığı komut dosyası gösterilmektedir.
04/06
Dreamweaver sizin için JavaScript yazıyor
Sayfayı kod görünümünde açarsanız, Dreamweaver uygulamasının HTML belgenizin
bölümüne bir JavaScript bloğu eklediğini görürsünüz. Bu blok, fareler bunları döndürdüğünde görüntülerin takas edilmesi için gereken 3 işlevi ve bunu seçtiyseniz önyükleme işlevini içerir.işlev MM_swapImgRestore ()
işlev MM_findObj (n, d)
işlev MM_swapImage ()
işlev MM_preloadImages ()
05/06
Dreamweaver, Rollover için HTML'yi ekler
Dreamweaver uygulamasının rollover görüntülerini önceden yüklemesini seçtiyseniz, önyükleme komut dosyasını çağırmak için belgenizin gövdesinde HTML kodunu göreceksiniz, böylece resimleriniz daha hızlı yüklenecektir.
Onload = "MM_preloadImages ( 'shasta2.jpg')"
Dreamweaver ayrıca, resminiz için tüm kodu ekler ve bağlantı kurar (bir URL eklediyseniz). Rollover kısmı, anchor etiketine, onmouseover ve onmouseout nitelikleri olarak eklenir.
onmouseout = "MM_swapImgRestore ()"
onmouseover = "MM_swapImage ( 'Image1', '', 'shasta1.jpg', 1)"
06/06
Rollover'ı Test Edin
Tamamen işlevsel rollover görüntüsüne bakın ve Shasta'nın zihninde neler olduğunu öğrenin.