રોલઓવર ઇમેજ એવી છબી છે જે કોઈ અન્ય છબીમાં બદલાય છે જ્યારે તમે અથવા તમારા ગ્રાહક તેના પર માઉસને રોલ કરે છે. આનો ઉપયોગ બટનો અથવા ટૅબ્સ જેવા ઇન્ટરએક્ટિવ લાગણી બનાવવા માટે થાય છે. પરંતુ તમે રોલઓવર છબીઓ માત્ર વિશે કંઈપણ વિશે બનાવી શકો છો.
આ ટ્યુટોરીયલ Dreamweaver માં રોલઓવર છબી બનાવવા માટે તમને મદદ કરવા માટે રચાયેલ છે. તે Dreamweaver ની નીચેની આવૃત્તિઓનો ઉપયોગ કરીને લોકો દ્વારા ઉપયોગ માટે બનાવાયેલ છે:
- ડ્રીમવેવેર એમએક્સ
- ડ્રીમવેવેર એમએક્સ 2004
- ડ્રીમ વીવર 8
- ડ્રીમવેવર સીએસ 3
- ડ્રીમવેવર સીએસ 4
- ડ્રીમવેવર સીએસ 5
- ડ્રીમવેયર CS6
આ ટ્યુટોરીયલ માટે જરૂરીયાતો
- ડ્રીમવેવર
ઉપર યાદી થયેલ એક આવૃત્તિઓ. - મૂળ છબી
આ છબીને ઑપ્ટિમાઇઝ કરવાની ખાતરી કરો આ તમારા પૃષ્ઠોને વધુ ઝડપથી લોડ કરવામાં સહાય કરશે. - રોલઓવર ઇમેજ
આ છબી મૂળ છબીની સમાન પરિમાણો હોવી જોઈએ. અને, મૂળ છબીની જેમ, પૃષ્ઠ લોડ વખત સહાય કરવા માટે ઑપ્ટિમાઇઝ થવું જોઈએ. - વેબ પેજ
આ HTML પૃષ્ઠ છે જ્યાં તમે તમારા રોલઓવર છબીને મુકીશું.
06 ના 01
શરૂ કરો
- ડ્રીમવેવર પ્રારંભ કરો
- વેબ પૃષ્ઠ ખોલો જ્યાં તમે તમારા રોલઓવર ઇચ્છો છો
06 થી 02
રોલઓવર છબી છબી ઑબ્જેક્ટ શામેલ કરો
ડ્રીમ વીવર એક રોલઓવર છબી બનાવવાનું સરળ બનાવે છે.
- સામેલ કરો મેનૂ પર જાઓ અને "છબી ઑબ્જેક્ટ્સ" પેટા મેનૂ પર જાઓ.
- "છબી રોલઓવર" અથવા "રોલઓવર છબી" પસંદ કરો
ડ્રીમવેઅરના કેટલાક જૂના સંસ્કરણો તેના બદલે છબી ઓબ્જેક્ટ્સ "ઇન્ટરએક્ટીવ ઇમેજ્સ" ને કૉલ કરે છે.
06 ના 03
ડ્રીમવેવર કહો છબીઓ શું વાપરશે
ડ્રોમીવર તમારા રોલઓવર છબીને બનાવવા માટે ક્ષેત્રોમાં ભરવા માટે તમારે સંવાદ બોક્સ પૉપ કરે છે.
છબીનું નામ
પૃષ્ઠ માટે અનન્ય છબી નામ પસંદ કરો. તે બધા એક શબ્દ હોવો જોઈએ, પરંતુ તમે નંબરો, અંડરસ્કોર્સ (_) અને હાઇફન્સ (-) નો ઉપયોગ કરી શકો છો. આને બદલવા માટે છબીને ઓળખવા માટે ઉપયોગમાં લેવાશે.
મૂળ છબી
આ તે URL અથવા સ્થાનનું સ્થાન છે જે પૃષ્ઠ પર શરૂ થશે. તમે આ ક્ષેત્રમાં સંબંધિત અથવા નિરપેક્ષ પાથ URL નો ઉપયોગ કરી શકો છો. આ એક એવી છબી હોવી જોઈએ કે જે તમારા વેબ સર્વર પર અસ્તિત્વ ધરાવે છે અથવા તમે પૃષ્ઠ સાથે અપલોડ કરશો.
રોલઓવર છબી
આ છબી છે જે છબી પર જ્યારે તમે માઉસ દેખાશે. મૂળ છબીની જેમ, આ છબીમાં ચોક્કસ અથવા સંબંધિત પથ હોઈ શકે છે, અને જ્યારે તમે પૃષ્ઠ અપલોડ કરો ત્યારે તે અસ્તિત્વમાં હોવું જોઈએ અથવા અપલોડ કરવું જોઈએ.
પ્રીલોડ રોલઓવર છબી
આ વિકલ્પ ડિફોલ્ટ તરીકે પસંદ કરવામાં આવે છે કારણ કે તે રોલઓવરને વધુ ઝડપથી દેખાવામાં મદદ કરે છે. રોલઓવર ઇમેજને પ્રીલોડ કરવાને પસંદ કરીને, વેબ બ્રાઉઝર તેને કેશમાં સંગ્રહિત કરશે જ્યાં સુધી તેના પર માઉસ રોલ નહીં થાય.
વૈકલ્પિક ટેક્સ્ટ
ગુડ વૈકલ્પિક ટેક્સ્ટ તમારી છબીઓને વધુ સુલભ બનાવે છે. કોઈ પણ છબીઓ ઉમેરતી વખતે તમારે હંમેશા કોઈ વૈકલ્પિક વૈકલ્પિક ટેક્સ્ટનો ઉપયોગ કરવો જોઈએ.
ક્લિક કરેલું, URL પર જાઓ
મોટાભાગના લોકો છબી પર ક્લિક કરશે જ્યારે તેઓ કોઈ પૃષ્ઠ પર એકને જોશે. તેથી તમારે તેમને ક્લિક કરી શકાય તેવું બનાવવાની આદત હોવી જોઈએ. આ વિકલ્પ તમને દર્શકને જ્યારે છબી પર ક્લિક કરે ત્યારે તે પૃષ્ઠ અથવા URL નો ઉલ્લેખ કરવાની મંજૂરી આપે છે પરંતુ રોલઓવર બનાવવા માટે આ વિકલ્પ જરૂરી નથી.
જ્યારે તમે બધા ફીલ્ડ્સ પૂર્ણ કરી લો, ત્યારે ડ્રોપ ક્લિક કરો, તમારી રોલઓવર ઇમેજને ડ્રીમવેવર બનાવશે.
આગળનું પાનું ડ્રીમ વીવર લખે છે કે સ્ક્રિપ્ટ બતાવે છે.
06 થી 04
ડ્રીમવેવર તમારા માટે જાવાસ્ક્રિપ્ટ લખે છે
જો તમે પૃષ્ઠને કોડ-વ્યૂમાં ખોલો છો, તો તમે જોશો કે ડ્રીમવવેયર JavaScript ના બ્લોકને તમારા HTML દસ્તાવેજનાં
માં દાખલ કરે છે. આ બ્લોકમાં 3 ફંક્શન્સનો સમાવેશ થાય છે, જેમાં તમારે છબીઓ સ્વેપ હોવી જોઈએ જ્યારે માઉસ તેના પર રોલ કરશે અને પ્રીલોડ કાર્ય કરશે જો તમે તે માટે પસંદ કર્યું હોય.કાર્ય MM_swapImgRestore ()
કાર્ય MM_findObj (n, d)
કાર્ય MM_swapImage ()
કાર્ય MM_preloadImages ()
05 ના 06
ડ્રીમવેવર એ રોલઓવર માટે HTML ઉમેરે છે
જો તમે ડ્રીમવેઅરને રોલઓવર ઈમેજોથી પહેલાથી લોડ કરવા માટે પસંદ કર્યું હોય, તો તમે તમારી ડોક્યુમેન્ટના મુખ્ય ભાગમાં HTML કોડને પ્રીલોડ સ્ક્રિપ્ટને કૉલ કરવા માટે જોશો જેથી તમારી છબીઓ વધુ ઝડપથી લોડ થાય.
onload = "MM_preloadImages ('shasta2.jpg')"
ડ્રીમ વીવર તમારી છબી માટેનો તમામ કોડ ઉમેરે છે અને તેને લિંક કરે છે (જો તમે URL શામેલ કર્યું હોય તો) રોલઓવરનો ભાગ ઑનમાઉસવૉવર અને onmouseout એટ્રિબ્યુટ્સ તરીકે એન્કર ટેગમાં ઉમેરવામાં આવે છે.
onmouseout = "MM_swapImgRestore ()"
onmouseover = "MM_swapImage ('Image1', '', 'shasta1.jpg', 1)"
06 થી 06
રોલઓવર આઉટ ટેસ્ટ
સંપૂર્ણ વિધેયાત્મક રોલઓવર ઇમેજ જુઓ અને શાસ્તાના મનમાં શું છે તે જાણો.