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
- Dreamweaver
Una 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 rollover
Această 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ă web
Aceasta este pagina HTML în care vă veți plasa imaginea de rollover.
01 din 06
Incepe
- Porniți Dreamweaver
- Deschideți pagina web unde doriți să vă răsturnați
02 din 06
Inserați un obiect imagine de tip rollover
Dreamweaver facilitează crearea unei imagini de rollover.
- Mergeți la meniul Inserare și în jos până la submeniul "Image Objects".
- Selectați "Image rollover" sau "Rollover image"
Unele versiuni mai vechi ale Dreamweaver apelează în schimb imaginile "Interactive Images".
03 din 06
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.
Atunci când faceți clic pe, 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 OK pentru a crea Dreamweaver imaginea dvs. de răsturnare.
Următoarea pagină prezintă scriptul scris de Dreamweaver.
04 din 06
Dreamweaver scrie JavaScript pentru tine
Dacă deschideți pagina în vizualizarea codului, veți vedea că Dreamweaver inserează un bloc de JavaScript în
al documentului dvs. 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 ()
05 din 06
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)"
06 din 06
Examinați răsturnarea
Vedeți imaginea rollover complet funcțională și aflați ce este în mintea lui Shasta.