ਇੱਕ ਰੋਲਓਵਰ ਚਿੱਤਰ ਉਹ ਚਿੱਤਰ ਹੈ ਜੋ ਕਿਸੇ ਹੋਰ ਤਸਵੀਰ ਵਿੱਚ ਬਦਲ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਤੁਸੀਂ ਜਾਂ ਤੁਹਾਡਾ ਗਾਹਕ ਇਸਦੇ ਉੱਤੇ ਮਾਉਸ ਨੂੰ ਰੋਲ ਕਰਦਾ ਹੈ. ਇਹ ਆਮ ਤੌਰ ਤੇ ਇੱਕ ਇੰਟਰੈਕਟਿਵ ਪ੍ਰਭਾਵ ਬਣਾਉਣ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ ਜਿਵੇਂ ਬਟਨਾਂ ਜਾਂ ਟੈਬਸ ਪਰ ਤੁਸੀਂ ਰੋਲਓਵਰ ਪ੍ਰਤੀਬਿੰਬ ਨੂੰ ਸਿਰਫ਼ ਕੁਝ ਵੀ ਨਹੀਂ ਕਰ ਸਕਦੇ.
ਇਹ ਟਿਊਟੋਰਿਅਲ Dreamweaver ਵਿੱਚ ਇੱਕ ਰੋਲਓਵਰ ਚਿੱਤਰ ਬਣਾਉਣ ਵਿੱਚ ਤੁਹਾਡੀ ਮਦਦ ਕਰਨ ਲਈ ਤਿਆਰ ਕੀਤਾ ਗਿਆ ਹੈ. ਇਹ Dreamweaver ਦੇ ਹੇਠਲੇ ਵਰਜਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਵਾਲੇ ਲੋਕਾਂ ਦੁਆਰਾ ਵਰਤੋਂ ਲਈ ਤਿਆਰ ਕੀਤਾ ਗਿਆ ਹੈ:
- Dreamweaver ਐਮਐਕਸ
- Dreamweaver MX 2004
- Dreamweaver 8
- Dreamweaver CS3
- Dreamweaver CS4
- Dreamweaver CS5
- Dreamweaver CS6
ਇਸ ਟਯੂਟੋਰਿਯਲ ਲਈ ਲੋੜਾਂ
- Dreamweaver
ਉੱਪਰ ਸੂਚੀਬੱਧ ਵਰਗਾਂ ਵਿੱਚੋਂ ਇੱਕ - ਇੱਕ ਅਸਲੀ ਚਿੱਤਰ
ਇਸ ਤਸਵੀਰ ਨੂੰ ਅਨੁਕੂਲ ਬਣਾਉਣ ਲਈ ਯਕੀਨੀ ਬਣਾਓ. ਇਹ ਤੁਹਾਡੇ ਪੰਨਿਆਂ ਨੂੰ ਵੱਧ ਤੇਜ਼ੀ ਨਾਲ ਲੋਡ ਕਰਨ ਵਿੱਚ ਸਹਾਇਤਾ ਕਰੇਗਾ. - ਰੋਲਓਵਰ ਚਿੱਤਰ
ਇਹ ਚਿੱਤਰ ਅਸਲੀ ਚਿੱਤਰ ਦੇ ਰੂਪ ਵਿੱਚ ਇਕੋ ਮਾਪਦੰਡ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ. ਅਤੇ, ਅਸਲੀ ਚਿੱਤਰ ਵਾਂਗ, ਸਫ਼ਾ ਲੋਡ ਸਮੇਂ ਦੀ ਮਦਦ ਲਈ ਅਨੁਕੂਲ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ - ਇੱਕ ਵੈਬ ਪੰਨਾ
ਇਹ ਉਹ HTML ਪੰਨਾ ਹੈ ਜਿੱਥੇ ਤੁਸੀਂ ਆਪਣਾ ਰੋਲਓਵਰ ਚਿੱਤਰ ਪਾਓਗੇ.
06 ਦਾ 01
ਸ਼ੁਰੂਆਤ ਕਰੋ
- ਸ਼ੁਰੂ ਕਰੋ Dreamweaver
- ਉਹ ਵੈਬ ਪੇਜ ਖੋਲ੍ਹੋ ਜਿੱਥੇ ਤੁਸੀਂ ਆਪਣੇ ਰੋਲਓਵਰ ਚਾਹੁੰਦੇ ਹੋ
06 ਦਾ 02
ਇੱਕ ਰੋਲਓਵਰ ਚਿੱਤਰ ਚਿੱਤਰ ਆਬਜੈਕਟ ਸੰਮਿਲਿਤ ਕਰੋ
Dreamweaver ਇੱਕ ਰੋਲਓਵਰ ਚਿੱਤਰ ਬਣਾਉਣਾ ਸੌਖਾ ਬਣਾਉਂਦਾ ਹੈ.
- ਸੰਮਿਲਿਤ ਮੀਨੂ ਤੇ ਜਾਓ ਅਤੇ "ਚਿੱਤਰ ਔਬਜੈਕਟਾਂ" ਉਪਮੇਨੂ ਤੇ ਜਾਓ.
- "ਚਿੱਤਰ ਰੋਲਓਵਰ" ਜਾਂ "ਰੋਲਓਵਰ ਚਿੱਤਰ" ਚੁਣੋ
Dreamweaver ਦੇ ਕੁਝ ਪੁਰਾਣੇ ਰੁਪਾਂਤਰ ਦੀ ਬਜਾਏ ਚਿੱਤਰ ਵਸਤੂਆਂ "ਇੰਟਰਐਕਟਿਵ ਚਿੱਤਰ" ਨੂੰ ਕਾਲ ਕਰਦੇ ਹਨ.
03 06 ਦਾ
Dreamweaver ਨੂੰ ਦੱਸੋ ਕਿ ਕਿਹੜੀਆਂ ਤਸਵੀਰਾਂ ਵਰਤਣੀਆਂ ਹਨ
Dreamweaver ਤੁਹਾਡੇ ਰੋਲਓਵਰ ਚਿੱਤਰ ਨੂੰ ਬਣਾਉਣ ਲਈ ਲੋੜੀਂਦੇ ਖੇਤਰਾਂ ਦੇ ਨਾਲ ਇੱਕ ਡਾਇਲੌਗ ਬੌਕਸ ਸੁਰੂ ਕਰਦਾ ਹੈ
ਚਿੱਤਰ ਦਾ ਨਾਂ
ਇੱਕ ਚਿੱਤਰ ਨਾਮ ਚੁਣੋ ਜਿਹੜਾ ਪੰਨਾ ਲਈ ਅਨੋਖਾ ਹੈ. ਇਹ ਸਭ ਇਕ ਸ਼ਬਦ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ, ਪਰ ਤੁਸੀਂ ਨੰਬਰ, ਅੰਡਰਸਕੋਰ (_) ਅਤੇ ਹਾਈਫਨ (-) ਵਰਤ ਸਕਦੇ ਹੋ. ਇਸ ਨੂੰ ਬਦਲਣ ਲਈ ਚਿੱਤਰ ਨੂੰ ਪਛਾਣਨ ਲਈ ਵਰਤਿਆ ਜਾਵੇਗਾ.
ਮੂਲ ਚਿੱਤਰ
ਇਹ ਉਹ URL ਜਾਂ URL ਦਾ ਸਥਾਨ ਹੈ ਜੋ ਪੰਨਾ ਤੇ ਸ਼ੁਰੂ ਹੋਵੇਗਾ ਤੁਸੀਂ ਇਸ ਖੇਤਰ ਵਿੱਚ ਸੰਬੰਧਿਤ ਜਾਂ ਸੰਪੂਰਨ ਪਾਥ URLs ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ. ਇਹ ਇੱਕ ਅਜਿਹੀ ਤਸਵੀਰ ਹੋਣੀ ਚਾਹੀਦੀ ਹੈ ਜੋ ਤੁਹਾਡੇ ਵੈਬ ਸਰਵਰ ਤੇ ਮੌਜੂਦ ਹੈ ਜਾਂ ਤੁਸੀਂ ਇਸ ਸਫ਼ੇ ਨਾਲ ਅਪਲੋਡ ਕਰ ਸਕੋਗੇ.
ਰੋਲਓਵਰ ਚਿੱਤਰ
ਇਹ ਉਹ ਚਿੱਤਰ ਹੈ ਜੋ ਚਿੱਤਰ ਉੱਤੇ ਤੁਹਾਡੇ ਮਾਊਸ ਉੱਤੇ ਪ੍ਰਗਟ ਹੋਵੇਗਾ. ਅਸਲ ਚਿੱਤਰ ਦੀ ਤਰ੍ਹਾਂ, ਇਹ ਚਿੱਤਰ ਲਈ ਇੱਕ ਅਸਲੀ ਜਾਂ ਅਨੁਸਾਰੀ ਮਾਰਗ ਹੋ ਸਕਦਾ ਹੈ, ਅਤੇ ਇਸ ਨੂੰ ਉਦੋਂ ਮੌਜੂਦ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ ਜਾਂ ਅਪਲੋਡ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ ਜਦੋਂ ਤੁਸੀਂ ਪੰਨਾ ਅੱਪਲੋਡ ਕਰਦੇ ਹੋ.
ਰੋਲਓਵਰ ਚਿੱਤਰ ਨੂੰ ਲੋਡ ਕਰੋ
ਇਹ ਚੋਣ ਨੂੰ ਡਿਫੌਲਟ ਚੁਣਿਆ ਗਿਆ ਹੈ ਕਿਉਂਕਿ ਇਹ ਰੋਲਓਵਰ ਨੂੰ ਤੇਜ਼ੀ ਨਾਲ ਵਿਖਾਈ ਦਿੰਦਾ ਹੈ ਰੋਲਓਵਰ ਚਿੱਤਰ ਨੂੰ ਪਹਿਲਾਂ ਲੋਡ ਕਰਨ ਦੀ ਚੋਣ ਕਰਕੇ, ਵੈਬ ਬ੍ਰਾਉਜ਼ਰ ਇਸਨੂੰ ਕੈਚ ਵਿੱਚ ਸਟੋਰ ਕਰੇਗਾ ਜਦੋਂ ਤੱਕ ਕਿ ਇਸਦੇ ਉੱਤੇ ਮਾਉਸ ਰੋਲ ਨਹੀਂ ਕਰਦਾ.
ਵਿਕਲਪਿਕ ਟੈਕਸਟ
ਚੰਗਾ ਵਿਕਲਪਿਕ ਪਾਠ ਤੁਹਾਡੇ ਚਿੱਤਰਾਂ ਨੂੰ ਹੋਰ ਪਹੁੰਚਯੋਗ ਬਣਾਉਂਦਾ ਹੈ ਤੁਹਾਨੂੰ ਕਿਸੇ ਵੀ ਚਿੱਤਰ ਨੂੰ ਜੋੜਦੇ ਸਮੇਂ ਕਿਸੇ ਕਿਸਮ ਦੇ ਵਿਕਲਪਿਕ ਪਾਠ ਦਾ ਹਮੇਸ਼ਾ ਉਪਯੋਗ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ.
ਦਬਾਉਣ ਤੇ, URL ਤੇ ਜਾਉ
ਬਹੁਤੇ ਲੋਕ ਇੱਕ ਚਿੱਤਰ ਉੱਤੇ ਕਲਿੱਕ ਕਰਨਗੇ ਜਦੋਂ ਉਹ ਕਿਸੇ ਪੰਨੇ ਤੇ ਵੇਖਣਗੇ ਇਸ ਲਈ ਤੁਹਾਨੂੰ ਉਸਨੂੰ ਬਣਾਉਣਯੋਗ ਬਣਾਉਣ ਦੀ ਆਦਤ ਵਿੱਚ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ. ਇਹ ਚੋਣ ਤੁਹਾਨੂੰ ਦਰਸ਼ਕ ਨੂੰ ਚਿੱਤਰ ਉੱਤੇ ਕਲਿਕ ਕਰਨ ਸਮੇਂ ਪੇਜ ਜਾਂ ਯੂਆਰਐਲ ਨੂੰ ਦਰਸਾਉਣ ਦੀ ਆਗਿਆ ਦਿੰਦੀ ਹੈ ਪਰ ਇੱਕ ਰੋਲਓਵਰ ਬਣਾਉਣ ਲਈ ਇਸ ਵਿਕਲਪ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ.
ਜਦੋਂ ਤੁਸੀਂ ਸਾਰੇ ਖੇਤਰ ਪੂਰੇ ਕਰ ਲਓ, ਤਾਂ ਕਲਿਕ ਕਰੋ ਠੀਕ ਹੈ ਕਿ ਤੁਹਾਡੇ ਰੋਲਓਵਰ ਚਿੱਤਰ ਨੂੰ ਬਣਾਉਣ ਲਈ Dreamweaver ਹੋਵੇ
ਅਗਲਾ ਪੰਨਾ ਉਹ ਸਕ੍ਰਿਪਟ ਦਿਖਾਉਂਦਾ ਹੈ ਜੋ Dreamweaver ਲਿਖਦਾ ਹੈ.
04 06 ਦਾ
Dreamweaver ਤੁਹਾਡੇ ਲਈ ਜਾਵਾ-ਸਕ੍ਰਿਪਟ ਲਿਖਦਾ ਹੈ
ਜੇ ਤੁਸੀਂ ਸਫ਼ੇ ਨੂੰ ਕੋਡ-ਵਿਊ ਵਿੱਚ ਖੋਲ੍ਹਦੇ ਹੋ ਤਾਂ ਤੁਸੀਂ ਦੇਖੋਗੇ ਕਿ Dreamweaver ਤੁਹਾਡੇ HTML ਦਸਤਾਵੇਜ਼ ਦੇ
ਵਿੱਚ JavaScript ਦੇ ਇੱਕ ਬਲਾਕ ਨੂੰ ਸੰਮਿਲਿਤ ਕਰਦਾ ਹੈ. ਇਸ ਬਲਾਕ ਵਿੱਚ 3 ਫੰਕਸ਼ਨਸ ਸ਼ਾਮਲ ਹਨ ਜਿਨ੍ਹਾਂ ਵਿੱਚ ਤੁਹਾਨੂੰ ਚਿੱਤਰਾਂ ਦੀ ਸਵੈਪ ਹੋਣ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ ਜਦੋਂ ਮਾਊਂਸ ਉਹਨਾਂ ਉੱਤੇ ਰੋਲ ਕਰਦਾ ਹੈ ਅਤੇ ਜੇਕਰ ਤੁਸੀਂ ਇਸਦੀ ਚੋਣ ਕੀਤੀ ਹੈ ਤਾਂ preload function.ਫੰਕਸ਼ਨ MM_swapImgRestore ()
ਫੰਕਸ਼ਨ MM_findObj (n, d)
ਫੰਕਸ਼ਨ MM_swapImage ()
ਫੰਕਸ਼ਨ MM_preloadImages ()
06 ਦਾ 05
Dreamweaver ਰੋਲਓਵਰ ਲਈ HTML ਜੋੜਦਾ ਹੈ
ਜੇ ਤੁਸੀਂ ਸੁਪਨਾਵਾਇਅਰ ਨੂੰ ਰੋਲਓਵਰ ਪ੍ਰਤੀਬਿੰਬਾਂ ਤੋਂ ਪਹਿਲਾਂ ਲੋਡ ਕਰਨ ਲਈ ਚੁਣਿਆ ਹੈ, ਤਾਂ ਤੁਸੀਂ ਪ੍ਰਲੋਡ ਸੂਚੀ ਨੂੰ ਕਾਲ ਕਰਨ ਲਈ ਆਪਣੇ ਦਸਤਾਵੇਜ਼ ਦੇ ਮੁੱਖ ਭਾਗ ਵਿੱਚ HTML ਕੋਡ ਵੇਖੋਗੇ ਤਾਂ ਕਿ ਤੁਹਾਡੀਆਂ ਤਸਵੀਰਾਂ ਨੂੰ ਤੇਜ਼ੀ ਨਾਲ ਲੋਡ ਕਰੋ.
onload = "MM_preloadImages ('shasta2.jpg')"
Dreamweaver ਤੁਹਾਡੀ ਚਿੱਤਰ ਲਈ ਸਾਰੇ ਕੋਡ ਜੋੜਦਾ ਹੈ ਅਤੇ ਇਸ ਨੂੰ ਲਿੰਕ ਕਰਦਾ ਹੈ (ਜੇ ਤੁਸੀਂ ਇੱਕ URL ਸ਼ਾਮਲ ਕੀਤਾ ਹੈ). ਰੋਲਓਵਰ ਵਾਲਾ ਹਿੱਸਾ ਐਂਰਿਜ਼ਓਵਰਓਵਰ ਅਤੇ ਆਨ-ਮੇਗਾਊਟ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੇ ਤੌਰ ਤੇ ਐਂਕਰ ਟੈਗ ਵਿੱਚ ਜੋੜਿਆ ਜਾਂਦਾ ਹੈ.
onmouseout = "MM_swapImgRestore ()"
onmouseover = "MM_swapImage ('image1', '', 'shasta1.jpg', 1)"
06 06 ਦਾ
ਰੋਲਓਵਰ ਟੈਸਟ ਕਰੋ
ਪੂਰੀ ਕਿਰਿਆਸ਼ੀਲ ਰੋਲਓਵਰ ਚਿੱਤਰ ਵੇਖੋ ਅਤੇ ਸਿੱਖੋ ਕਿ ਸ਼ਾਸਤਰ ਦੇ ਮਨ ਤੇ ਕੀ ਹੈ.