Tutorial pentru crearea unei imagini Rollover în Dreamweaver

O imagine de rollover este o imagine care se transformă într-o altă imagine atunci când dvs. sau clientul dvs. rotiți mouse-ul peste el. Acestea sunt utilizate în mod obișnuit pentru a crea o simț interactiv, cum ar fi butoanele sau filele. Dar poți crea imagini de tip rollover din aproape orice.

Acest tutorial este conceput pentru a vă ajuta să creați o imagine de rollover în Dreamweaver. Este destinat utilizării de către utilizatorii care utilizează următoarele versiuni ale Dreamweaver:

• Dreamweaver MX
• Dreamweaver MX 2004
• Dreamweaver 8
• Dreamweaver CS3
• Dreamweaver CS4
• Dreamweaver CS5
• Dreamweaver CS6

Cerințe pentru acest tutorial

• DreamweaverUna dintre versiunile enumerate mai sus.
• O imagine originalăAsigurați-vă că optimizați această imagine. Acest lucru va ajuta paginile dvs. să se încarce mai repede.
• Imaginea rolloverAceastă imagine trebuie să aibă aceleași dimensiuni ca imaginea originală. Și, ca și imaginea originală, ar trebui optimizată pentru a ajuta la încărcarea timpilor de încărcare a paginilor.
• O pagină webAceasta este pagina HTML în care vă veți plasa imaginea de rollover.

Incepe

1. Porniți Dreamweaver
2. Deschideți pagina web unde doriți să vă răsturnați

Inserați un obiect Imagine rulantă

Dreamweaver facilitează crearea unei imagini de rollover.

1. Mergeți la meniul Inserare și în jos până la Obiecte de imagine sub-meniu.
2. Selectați Răsfoirea imaginii sau Rulați imaginea.

Unele versiuni mai vechi ale Dreamweaver apelează în schimb imaginile "Interactive Images".

Spuneți Dreamweaver ce imagini să utilizați

Dreamweaver afișează o casetă de dialog cu câmpurile pe care trebuie să le completezi pentru a crea imaginea de rollover.

Numele imaginii

Alegeți un nume de imagine care este unic pentru pagină. Ar trebui să fie un singur cuvânt, dar puteți utiliza numere, subliniază (_) și cratime (-). Aceasta va fi utilizată pentru a identifica imaginea care trebuie modificată.

Imaginea originală

Aceasta este adresa URL sau locația imaginii care va începe pe pagină. Puteți utiliza adrese URL relative sau absolute în acest câmp. Aceasta ar trebui să fie o imagine care există pe serverul dvs. web sau pe care o veți încărca cu pagina.

Răsturnați imaginea

Aceasta este imaginea care va apărea când vă deplasați mouse-ul peste imagine. La fel ca imaginea originală, aceasta poate fi o cale absolută sau relativă a imaginii și ar trebui să existe sau să fie încărcată atunci când încărcați pagina.

Preload Image Rollover

Această opțiune este selectată în mod prestabilit, deoarece ajută la afișarea mai rapidă a rolloverului. Dacă alegeți să preîncărcați imaginea rollover, browserul Web îl va stoca într-o memorie cache până când mouse-ul se rotește peste ea.

Text alternativ

Textul alternativ bun face ca imaginile dvs. să fie mai accesibile. Ar trebui să utilizați întotdeauna un tip de text alternativ atunci când adăugați imagini.

Când este făcut clic, accesați adresa URL

Majoritatea utilizatorilor vor face clic pe o imagine atunci când văd una pe o pagină. Deci, ar trebui să fii obișnuit să le faci clickabile. Această opțiune vă permite să specificați pagina sau adresa URL pe care doriți să le acceseze vizualizatorul atunci când dau clic pe imagine. Dar această opțiune nu este necesară pentru a crea o răsturnare.

După ce ați completat toate câmpurile, faceți clic pe O.K pentru a crea Dreamweaver imaginea dvs. de rollover.

Dreamweaver scrie JavaScript pentru tine

Dacă deschideți pagina în vizualizarea de cod, veți vedea că Dreamweaver introduce un bloc de JavaScript în din documentul HTML. Acest bloc include cele 3 funcții pe care trebuie să le schimbați atunci când mouse-ul se rotește peste ele și funcția de preîncărcare dacă ați optat pentru acest lucru.

funcție MM_swapImgRestore ()funcție MM_findObj (n, d)funcție MM_swapImage ()funcția MM_preloadImages ()

Dreamweaver adaugă HTML pentru rollover

Dacă ați ales să preîncărcați imaginile de rollover în Dreamweaver, veți vedea codul HTML din corpul documentului pentru a apela scriptul de preload astfel încât imaginile să se încarce mai repede.

onload = "MM_preloadImages ( 'shasta2.jpg')"

Dreamweaver adaugă tot codul pentru imaginea dvs. și le leagă (dacă ați inclus o adresă URL). Porțiunea de răsturnare este adăugată la eticheta de ancorare ca atributele onmouseover și onmouseout.

onmouseout = "MM_swapImgRestore ()"onmouseover = "MM_swapImage ( 'Image1', '', 'shasta1.jpg', 1)"

Examinați răsturnarea

Vedeți imaginea rollover complet funcțională și aflați ce este în mintea lui Shasta.