ಒಂದು ರೋಲ್ಓವರ್ ಚಿತ್ರವು ನೀವು ಅಥವಾ ನಿಮ್ಮ ಗ್ರಾಹಕರು ಅದರ ಮೇಲೆ ಮೌಸ್ ಅನ್ನು ಉರುಳಿಸಿದಾಗ ಬೇರೆ ಇಮೇಜ್ಗೆ ಬದಲಾಗುವ ಇಮೇಜ್. ಇವುಗಳು ಗುಂಡಿಗಳು ಅಥವಾ ಟ್ಯಾಬ್ಗಳಂತಹ ಸಂವಾದಾತ್ಮಕ ಭಾವನೆಯನ್ನು ಸೃಷ್ಟಿಸಲು ಸಾಮಾನ್ಯವಾಗಿ ಬಳಸಲಾಗುತ್ತದೆ. ಆದರೆ ನೀವು ರೋಲ್ಓವರ್ ಇಮೇಜ್ಗಳನ್ನು ಕೇವಲ ಯಾವುದನ್ನಾದರೂ ಹೊರಗೆ ಬಿಡಬಹುದು.
ಡ್ರೀಮ್ವೇವರ್ನಲ್ಲಿ ರೋಲ್ಓವರ್ ಚಿತ್ರವನ್ನು ರಚಿಸಲು ಈ ಟ್ಯುಟೋರಿಯಲ್ ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ. ಡ್ರೀಮ್ವೇವರ್ನ ಕೆಳಗಿನ ಆವೃತ್ತಿಗಳನ್ನು ಬಳಸುವ ಜನರಿಂದ ಇದು ಬಳಕೆಗೆ ಉದ್ದೇಶಿಸಲಾಗಿದೆ:
- ಡ್ರೀಮ್ವೇವರ್ MX
- ಡ್ರೀಮ್ವೇವರ್ MX 2004
- ಡ್ರೀಮ್ವೇವರ್ 8
- ಡ್ರೀಮ್ವೇವರ್ CS3
- ಡ್ರೀಮ್ವೇವರ್ CS4
- ಡ್ರೀಮ್ವೇವರ್ CS5
- ಡ್ರೀಮ್ವೇವರ್ CS6
ಈ ಟ್ಯುಟೋರಿಯಲ್ಗೆ ಅಗತ್ಯತೆಗಳು
- ಡ್ರೀಮ್ವೇವರ್
ಮೇಲೆ ಪಟ್ಟಿ ಮಾಡಲಾದ ಆವೃತ್ತಿಗಳಲ್ಲಿ ಒಂದಾಗಿದೆ. - ಮೂಲ ಚಿತ್ರ
ಈ ಚಿತ್ರವನ್ನು ಅತ್ಯುತ್ತಮವಾಗಿಸಲು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ಇದು ನಿಮ್ಮ ಪುಟಗಳನ್ನು ಹೆಚ್ಚು ವೇಗವಾಗಿ ಲೋಡ್ ಮಾಡಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ. - ರೋಲ್ಓವರ್ ಚಿತ್ರ
ಈ ಚಿತ್ರವು ಮೂಲ ಚಿತ್ರದಂತೆಯೇ ಒಂದೇ ಆಯಾಮಗಳಾಗಿರಬೇಕು. ಮತ್ತು, ಮೂಲ ಇಮೇಜ್ನಂತೆ, ಪುಟ ಲೋಡ್ ಬಾರಿ ಸಹಾಯ ಮಾಡಲು ಹೊಂದುವಂತೆ ಮಾಡಬೇಕು. - ಒಂದು ವೆಬ್ ಪುಟ
ನಿಮ್ಮ ರೋಲ್ಓವರ್ ಇಮೇಜ್ ಅನ್ನು ನೀವು ಹಾಕುವ HTML ಪುಟ ಇದಾಗಿದೆ.
01 ರ 01
ಪ್ರಾರಂಭಿಸಿ
- ಡ್ರೀಮ್ವೇವರ್ ಪ್ರಾರಂಭಿಸಿ
- ನಿಮ್ಮ ರೋಲ್ಓವರ್ ಎಲ್ಲಿ ಬೇಕಾದಿರೋ ಅಲ್ಲಿ ವೆಬ್ ಪುಟವನ್ನು ತೆರೆಯಿರಿ
02 ರ 06
ರೋಲ್ಓವರ್ ಇಮೇಜ್ ಇಮೇಜ್ ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ಸೇರಿಸಿ
ಡ್ರೀಮ್ವೇವರ್ ರೋಲ್ಓವರ್ ಚಿತ್ರವನ್ನು ರಚಿಸಲು ಸುಲಭವಾಗಿಸುತ್ತದೆ.
- ಸೇರಿಸಿ ಮೆನು ಮತ್ತು "ಇಮೇಜ್ ಆಬ್ಜೆಕ್ಟ್ಸ್" ಉಪ-ಮೆನುಗೆ ಹೋಗಿ.
- "ಇಮೇಜ್ ರೋಲ್ಓವರ್" ಅಥವಾ "ರೋಲ್ ಓವರ್ ಇಮೇಜ್" ಆಯ್ಕೆಮಾಡಿ
ಡ್ರೀಮ್ವೇವರ್ನ ಕೆಲವು ಹಳೆಯ ಆವೃತ್ತಿಗಳು ಇಮೇಜ್ ಆಬ್ಜೆಕ್ಟ್ಸ್ ಅನ್ನು "ಇಂಟರ್ಯಾಕ್ಟಿವ್ ಇಮೇಜ್ಸ್" ಎಂದು ಕರೆಯುತ್ತವೆ.
03 ರ 06
ಡ್ರೀಮ್ವೇವರ್ ವಾಟ್ ಇಮೇಜಸ್ ಟು ಯೂಸ್ ಅನ್ನು ಹೇಳಿ
ಡ್ರೀಮ್ವೇವರ್ ನಿಮ್ಮ ರೋಲ್ಓವರ್ ಚಿತ್ರವನ್ನು ರಚಿಸಲು ತುಂಬಲು ಅಗತ್ಯವಿರುವ ಕ್ಷೇತ್ರಗಳೊಂದಿಗೆ ಸಂವಾದ ಪೆಟ್ಟಿಗೆಯನ್ನು ತಲುಪುತ್ತದೆ.
ಚಿತ್ರದ ಹೆಸರು
ಪುಟಕ್ಕೆ ಅನನ್ಯವಾಗಿರುವ ಇಮೇಜ್ ಹೆಸರನ್ನು ಆಯ್ಕೆ ಮಾಡಿ. ಇದು ಒಂದೇ ಒಂದು ಪದವಾಗಿರಬೇಕು, ಆದರೆ ನೀವು ಸಂಖ್ಯೆಗಳನ್ನು, ಅಂಡರ್ಸ್ಕೋರ್ಗಳನ್ನು (_) ಮತ್ತು ಹೈಫನ್ಗಳನ್ನು (-) ಬಳಸಬಹುದು. ಬದಲಾಯಿಸಲು ಇಮೇಜ್ ಗುರುತಿಸಲು ಇದನ್ನು ಬಳಸಲಾಗುತ್ತದೆ.
ಮೂಲ ಚಿತ್ರ
ಇದು ಪುಟದಲ್ಲಿ ಪ್ರಾರಂಭವಾಗುವ ಚಿತ್ರದ URL ಅಥವಾ ಸ್ಥಳವಾಗಿದೆ. ನೀವು ಈ ಕ್ಷೇತ್ರದಲ್ಲಿ ಸಂಬಂಧಿತ ಅಥವಾ ಪರಿಪೂರ್ಣ ಮಾರ್ಗ URL ಗಳನ್ನು ಬಳಸಬಹುದು. ಇದು ನಿಮ್ಮ ವೆಬ್ ಸರ್ವರ್ನಲ್ಲಿ ಅಸ್ತಿತ್ವದಲ್ಲಿದೆ ಅಥವಾ ನೀವು ಪುಟದೊಂದಿಗೆ ಅಪ್ಲೋಡ್ ಮಾಡುವ ಚಿತ್ರವಾಗಿರಬೇಕು.
ರೋಲ್ ಓವರ್ ಚಿತ್ರ
ಚಿತ್ರದ ಮೇಲೆ ನೀವು ಮೌಸ್ ಇರುವಾಗ ಅದು ಕಾಣಿಸಿಕೊಳ್ಳುವ ಚಿತ್ರ. ಮೂಲ ಇಮೇಜ್ನಂತೆಯೇ, ಇದು ಇಮೇಜ್ಗೆ ಸಂಪೂರ್ಣ ಅಥವಾ ಸಂಬಂಧಿತ ಮಾರ್ಗವಾಗಿದೆ, ಮತ್ತು ನೀವು ಪುಟವನ್ನು ಅಪ್ಲೋಡ್ ಮಾಡುವಾಗ ಅದು ಅಸ್ತಿತ್ವದಲ್ಲಿರಬೇಕು ಅಥವಾ ಅಪ್ಲೋಡ್ ಮಾಡಬೇಕು.
ಪೂರ್ವ ಲೋಡ್ ಆಗಿರುವ ರೋಲ್ಓವರ್ ಇಮೇಜ್
ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ ಈ ಆಯ್ಕೆಯನ್ನು ಆರಿಸಲಾಗುತ್ತದೆ ಏಕೆಂದರೆ ಇದು ರೋಲ್ಓವರ್ ಅನ್ನು ಶೀಘ್ರವಾಗಿ ಕಾಣಿಸಿಕೊಳ್ಳುತ್ತದೆ. ರೋಲ್ಓವರ್ ಇಮೇಜ್ ಅನ್ನು ಮೊದಲೇ ಲೋಡ್ ಮಾಡಲು ಆಯ್ಕೆ ಮಾಡಿಕೊಳ್ಳುವ ಮೂಲಕ, ಮೌಸ್ ಬ್ರೌಸರ್ ಅದನ್ನು ಸಂಗ್ರಹಿಸುವವರೆಗೆ ಸಂಗ್ರಹದಲ್ಲಿ ಸಂಗ್ರಹಿಸುತ್ತದೆ.
ಪರ್ಯಾಯ ಪಠ್ಯ
ಉತ್ತಮ ಪರ್ಯಾಯ ಪಠ್ಯ ನಿಮ್ಮ ಚಿತ್ರಗಳನ್ನು ಹೆಚ್ಚು ಸುಲಭವಾಗಿ ಮಾಡುತ್ತದೆ. ಯಾವುದೇ ಚಿತ್ರಗಳನ್ನು ಸೇರಿಸುವಾಗ ನೀವು ಯಾವಾಗಲೂ ಕೆಲವು ರೀತಿಯ ಪರ್ಯಾಯ ಪಠ್ಯವನ್ನು ಬಳಸಬೇಕು.
ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ, URL ಗೆ ಹೋಗಿ
ಒಂದು ಪುಟದಲ್ಲಿ ಒಂದನ್ನು ನೋಡಿದಾಗ ಹೆಚ್ಚಿನ ಜನರು ಚಿತ್ರದ ಮೇಲೆ ಕ್ಲಿಕ್ ಮಾಡುತ್ತಾರೆ. ಆದ್ದರಿಂದ ನೀವು ಅವುಗಳನ್ನು ಕ್ಲಿಕ್ ಮಾಡಬಹುದಾದ ಅಭ್ಯಾಸದಲ್ಲಿರಬೇಕು. ಈ ಆಯ್ಕೆಯು ವೀಕ್ಷಕನನ್ನು ಅವರು ಚಿತ್ರದ ಮೇಲೆ ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ ತೆಗೆದುಕೊಳ್ಳಲು ಪುಟ ಅಥವಾ URL ಅನ್ನು ಸೂಚಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಆದರೆ ರೋಲ್ಓವರ್ ರಚಿಸಲು ಈ ಆಯ್ಕೆಯು ಅಗತ್ಯವಿಲ್ಲ.
ನೀವು ಎಲ್ಲಾ ಕ್ಷೇತ್ರಗಳನ್ನು ಪೂರ್ಣಗೊಳಿಸಿದಾಗ, ಡ್ರೀಮ್ವೇವರ್ ನಿಮ್ಮ ರೋಲ್ಓವರ್ ಚಿತ್ರವನ್ನು ರಚಿಸಲು ಸರಿ ಕ್ಲಿಕ್ ಮಾಡಿ.
ಡ್ರೀಮ್ವೇವರ್ ಬರೆಯುವ ಸ್ಕ್ರಿಪ್ಟ್ ಮುಂದಿನ ಪುಟವನ್ನು ತೋರಿಸುತ್ತದೆ.
04 ರ 04
ಡ್ರೀಮ್ವೇವರ್ ನೀವು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬರೆಯುತ್ತಾರೆ
ನೀವು ಕೋಡ್-ವೀಕ್ಷಣೆಯಲ್ಲಿ ಪುಟವನ್ನು ತೆರೆದರೆ ಡ್ರೀಮ್ವೇವರ್ ನಿಮ್ಮ HTML ಡಾಕ್ಯುಮೆಂಟ್ನ
ನಲ್ಲಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ನ ಬ್ಲಾಕ್ ಅನ್ನು ಒಳಗೊಳ್ಳುತ್ತದೆ ಎಂದು ನೀವು ನೋಡುತ್ತೀರಿ. ಈ ಬ್ಲಾಕ್ನಲ್ಲಿ 3 ಕಾರ್ಯಗಳು ಮೌಸ್ ಅನ್ನು ಆವರಿಸಿದಾಗ ನೀವು ಚಿತ್ರಗಳನ್ನು ಸ್ವಾಪ್ ಮಾಡಬೇಕಾದ ಅಗತ್ಯವಿರುತ್ತದೆ ಮತ್ತು ನೀವು ಅದನ್ನು ಆಯ್ಕೆ ಮಾಡಿದರೆ ಪೂರ್ವ ಲೋಡ್ ಆಗಿರುವ ಕ್ರಿಯೆಯನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ.ಕಾರ್ಯ MM_swapImgRestore ()
ಕಾರ್ಯ MM_findObj (n, d)
ಕಾರ್ಯ MM_swapImage ()
ಕಾರ್ಯ MM_preloadImages ()
05 ರ 06
ಡ್ರೀಮ್ವೇವರ್ ರೋಲ್ಓವರ್ಗಾಗಿ ಎಚ್ಟಿಎಮ್ಎಲ್ ಅನ್ನು ಸೇರಿಸುತ್ತದೆ
ಡ್ರೀಮ್ವೇವರ್ ರೋಲ್ಓವರ್ ಇಮೇಜ್ಗಳನ್ನು ಮೊದಲೇ ಲೋಡ್ ಮಾಡಲು ನೀವು ಆಯ್ಕೆ ಮಾಡಿದರೆ, ನಿಮ್ಮ ಡಾಕ್ಯುಮೆಂಟ್ನ ದೇಹದಲ್ಲಿ ನೀವು ಎಚ್ಡಿ ಕೋಡ್ ಅನ್ನು ಪೂರ್ವ ಲೋಡ್ ಆಗಿರುವ ಸ್ಕ್ರಿಪ್ಟ್ಗೆ ಕರೆಯುವಂತೆ ನೋಡುತ್ತೀರಿ.
onload = "MM_preloadImages ('shasta2.jpg')"
ಡ್ರೀಮ್ವೇವರ್ ನಿಮ್ಮ ಇಮೇಜ್ಗಾಗಿ ಎಲ್ಲಾ ಕೋಡ್ ಅನ್ನು ಸೇರಿಸುತ್ತದೆ ಮತ್ತು ಅದನ್ನು ಲಿಂಕ್ ಮಾಡುತ್ತದೆ (ನೀವು URL ಅನ್ನು ಸೇರಿಸಿದ್ದರೆ). ರೋಲ್ಓವರ್ ಭಾಗವನ್ನು ಆನ್ಮೌಸ್ ಓವರ್ ಮತ್ತು ಆನ್ಮೌಸ್ಔಟ್ ಲಕ್ಷಣಗಳು ಎಂದು ಆಧಾರ ಟ್ಯಾಗ್ಗೆ ಸೇರಿಸಲಾಗುತ್ತದೆ.
onmouseout = "MM_swapImgRestore ()"
onmouseover = "MM_swapImage ('Image1', '', 'shasta1.jpg', 1)"
06 ರ 06
ರೋಲ್ ಓವರ್ ಪರೀಕ್ಷಿಸಿ
ಸಂಪೂರ್ಣ ಕ್ರಿಯಾತ್ಮಕ ರೋಲ್ಓವರ್ ಚಿತ್ರವನ್ನು ನೋಡಿ ಮತ್ತು ಶಾಸ್ತಾ ಅವರ ಮನಸ್ಸಿನಲ್ಲಿ ಏನೆಂದು ತಿಳಿದುಕೊಳ್ಳಿ.