belajar

Minggu, Januari 30, 2011 | Label: www.ilmugrafis.com

desain grafis

+ GOOGLE Services

TUTORIAL WEB DESAIN

KATEGORI: DREAMWEAVER
Tutorial membuat website belajar HTML, CSS, Javascript dan mendesain mempercantik halaman website

Membuat Rollover Image
Publish: 1 Mei 2010 | Author & Copyright: dj_buang | Status: FREE tutorial

Hai jumpa kembali di Tutorial Dreamweaver mempercantik halaman website kita dengan kolaborasi CSS dan dreamweaver. Pada tutorial belajar Dreamweaver kali ini penulis akan menjelaskan bagaimana cara memasukkan Rollover Image. Apa yang dimaksud rollover image? Rollover image adalah suatu image / gambar yang dilengkapi dengan script di dalamnya sehingga sewaktu gambar (gambar utama/default) itu disorot dengan kursor maka gambar tersebut akan berganti dengan gambar yang lain (gambar kedua)...
Contohnya:
Ini preview'a..

Jika mungkin belum jelas maka silahkan saja coba ikuti pembuatannya dulu, maka siapa tahu nanti jadi lebih jelas apa yang dimaksudkan di atas

Dan seperti ini cara'a..
1. buka dreamweaver seperti biasa dan buat file baru berextensi html.. (anda bisa menggunakan tampilan Split maupun Code, tp saya terbiasa menggunakan tampilan code)
2. kita buat dulu bagian yang ingin dirollover gambar (backgroundnya) di antara tag <body></body> dengan menggunakan sebuah div tag dengan nama element menggunakan class atau id..
(di sini saya menggunakan element class)
berikut kode tag'a..

tampilan tersebut akan membuat sebuah link standar yang biasa digunakan tanpa ada style apapun..
dan berikut kode css yang ditaruh di antara tag <head></head>

#ffffff adalah bilangan hexadecimal untuk warna putih yang digunakan sebagai warna background..(saya menggunakan warna putih karena di halaman preview berlatarbelakang warna putih..)
* : cari dan isi gambar yang ingin digunakan untuk gambar awal dan gambar hover..
0 0 : merupakan posisi dari gambar backround 0 pertama adalah untuk posisi x dan 0 kedua adalah untuk posisi y..
no-repeat : merupakan perulangan dari gambar..no-repeat berarti tidak menggunakan perulangan..jika kalian ingin menggunakan perulangan..gunakan repeat-x untuk perulangan horizontal..dan repeat-y untuk perulangan vertical..
padding-left : memberikan jarak dari kiri untuk memperlihatkan gambar dari tulisan link yang ada..(saya menggunakan 20px karena lebar dari gambar adalah 15px..)
jika ingin menggunakan hover di setiap tag atau class atau id..cukup gunakan ":hover" setelah nama tag atau nama class atau nama id.. (tanpa kutip)
LIVE PREVIEW

Cara Lainnya::
Bagi yang masih kebingungan dengan permainan Tag dan CSS jangan kuatir karena ada cara alternatif dalam menampilkan rollover image karena di dalam aplikasi dreamweaver telah disediakan :)
1. Buka aplikasi Dreamweaver
2. Pilih Insert >> Image Objects >> Rollover Image
tutorial dreamweaver

3. Maka akan muncul pop up yang harus anda lengkapi
tutorial dreamweaver

Penjelasan:
Image name: adalah nama / judul Rollover image anda (isi sesuka anda)
Original image: gambar utama/default Rollover image
Rollover image: gambar kedua (gambar yang akan muncul saat kursor disorot)
Arternate text : adalah penjelasan tentang gambar tersebut mengenai apa (boleh dikosongi/ boleh diisi sesuka anda)
When Clicked, Go to URL: isi dengan URL link yang anda inginkan, bisa web anda, paman google, atau web IG yaitu >> http://www.ilmugrafis.com :)
Nah setelah selesai Klik OK, mudah bukan, sekarang coba buka halaman yang anda buat dengan browser anda (IE, Mozzila, Opera) whatever... yang penting minumnya teh sak kotaknya... wkwkwk :P
Just pudding
tutorial dreamweaver

Semoga Bermanfaat ^_^/

Share URL

Share the URL of this Tutorial in IM, Email or post in forums

http://www.ilmugrafis.com/dreamweaver.php?page=membuat-rollover-image

* Klik Link, copy (ctrl + c) dan paste (ctrl + v)

Indahnya Berbagi Via

<> Info dan Kontak Penulis

DJ AFRAN
TTL: Jakarta, 25 Oktober 1991
Telp/HP: -
Homepage: -

Saya (Penulis) bersedia mematuhi ketentuan dan peraturan di IG
- Tutorial / Artikel ini resmi saya diberikan untuk dipublikasikan di www.ilmugrafis.com
- Kritik, Saran, maupun Pertanyaan seputar Tutorial bisa menghubungi Penulis
Semoga Bermanfaat, Terima kasih

Rekomendasi Resmi ilmugrafis.com
Video Tutorial Metode Belajar Cepat dan Mudah:

- Dijamin Bagus dan Berkualitas Bagi Pemula Maupun Mahir
- Video Tutorial ini BAHASA INDONESIA
- Lebih Murah dan Praktis
- Keunggulan: Tinggal Lihat - Praktek - Mahir

- add by ilmugrafis.com -

Video Tutorial Web DESIGN Dreamweaver + Photoshop

Mendesain sebuah web ternyata tidak sulit seperti yang dibayangkan. Anda tidak perlu lagi harus mempelajari bahasa-bahasa pemrograman seperti yang dilakukan saat terdahulu...
Selengkapnya...

CD Video Tutorial Membuat Toko Online Joomla + Virtuemart

Untuk membuat dan mengelola toko online secara mandiri, tidak perlu menguasai bahasa pemrograman yang memusingkan. Ada banyak aplikasi toko online siap pakai yang bisa kita gunakan
Selengkapnya...

CD Video Tutorial Joomla 1.5
cd tutorial joomla 1.5

Video Tutorial Bahasa Indonesia berisi Panduan Penggunaan Joomla 1.5, Content Management System adalah Sebuah sistem yang digunakan untuk mengatur isi website dengan baik dan mudah
Selengkapnya...

CD Tutorial Pemrograman Website dengan PHP - Web Programming

Kabar gembira buat anda yang ingin membuat website dinamis dengan cms buatan sendiri memakai Pemrograman PHP dan Aplikasi PHP karena kini telah hadir CD tutorial Web Programing yang akan mengajarkan dari Pemula hingga menjadi Mahir membuat Website dinamis...
Selengkapnya...

Aturan dan Kebijakan di IG

Semua Konten di ilmuGRAFIS bertujuan sebagai media pendidikan dan pembelajaran, oleh karena itu dimohon tidak menyalahgunakan informasi dan pengetahuan yang diperoleh untuk hal - hal yang merugikan diri sendiri maupun orang lain
Kami melakukan segala upaya untuk memastikan bahwa informasi di ilmuGRAFIS tersaji seakurat dan sebaik mungkin. Anda bisa melaporkan jika ada konten ataupun informasi yang tidak berkenan di tab kontak kami
Jika anda ingin memposting ulang atau mengcopy konten baik itu Tutorial maupun Artikel dari ilmuGrafis maka dimohon untuk mencantumkan sumber dari Artikel dan Tutorial tersebut yaitu ilmuGrafis.com serta dilarang mengubah maupun mengedit ulang tanpa ijin dari penulis yang bersangkutan

Didukung Oleh:

Choose Language

Translate

KATEGORI

PHOTOSHOP

- Brush Pattern Plug-In

CORELDRAW

ILLUSTRATOR

ANIMATION

WEB DESAIN

DESKTOP PUBLISHING

MICROSOFT

3D + ARSITEKTUR

VIDEO PRODUCTION

FREEWARE

MAGAZINE

ENTERTAINMENT

Link To Us

<br  /><a href="http://www.ilmugrafis.com" target="_blank"><img  src="http://www.ilmugrafis.com/images/ilmugrafis.gif" title="tutorial  desain grafis indonesia" alt="tutorial ilmu grafis indonesia"  width="120" height="60" hspace="2" vspace="2" border="0"  /></a><br />   <a href="http://www.ilmugrafis.com">ilmugrafis  indonesia</a><br />

Kode HTML
Boleh dipasang di blog/web anda

IG Staff