ఈ పోస్ట్ మీకు నేర్పుతుంది:
- HTML ఇమేజ్ మ్యాప్స్ అంటే ఏమిటి?
- HTML డాక్యుమెంట్‌లో ఇమేజ్ మ్యాప్‌లను ఎలా సృష్టించాలి?
- ఇతర పేజీకి లింక్ చేయబడిన చిత్ర పటాన్ని ఎలా సృష్టించాలి?
HTML ఇమేజ్ మ్యాప్స్ అంటే ఏమిటి?
ఇమేజ్ మ్యాప్ అనేది క్లిక్ చేయగల ప్రాంతాలతో కూడిన చిత్రం. HTMLలో చిత్ర పటాన్ని రూపొందించడానికి, ' <మ్యాప్> ” మూలకం ఉపయోగించబడుతుంది. అదనంగా, ఒకటి లేదా అంతకంటే ఎక్కువ ' <ప్రాంతం> ప్రాంతాలను పేర్కొనడానికి '
వాక్యనిర్మాణం
HTML డాక్యుమెంట్‌లో ఇమేజ్ మ్యాప్‌లను పేర్కొనడానికి సింటాక్స్ క్రింద పేర్కొనబడింది:
< img src = 'images/img1.jpg' ప్రతిదీ = 'ల్యాప్టాప్' ఉపయోగించండి మ్యాప్ = '#క్లిక్‌స్పేస్' >
< పటం పేరు = 'క్లిక్‌స్పేస్' >
< ప్రాంతం ఆకారం = 'రెక్ట్' అక్షాంశాలు = '224,37,422,312' href = 'laptop.html' >
< / పటం >
ది ' 'మూలకం క్రింది లక్షణాలతో నిర్వచించబడింది:
- ' src ” చిత్రం మార్గాన్ని నిర్దేశిస్తుంది.
- ' ప్రతిదీ ” చిత్రం లోడ్ కానప్పుడు ప్రత్యామ్నాయ వచనాన్ని చూపుతుంది.
- ' ఉపయోగించండి మ్యాప్ ” చిత్రం ప్రాంతాలను క్లిక్ చేయగలిగేలా చేయడానికి పేర్కొనబడింది. లింక్ చేయడానికి, దాని విలువ తప్పనిసరిగా “
ది ' <మ్యాప్> 'మూలకం క్రింది లక్షణాలతో జోడించబడింది:
- ' ఆకారం 'HTML యొక్క ప్రాంత పరిమాణాన్ని నిర్దేశిస్తుంది' <మ్యాప్> ' మూలకం.
- ' అక్షాంశాలు ” లక్షణం క్లిక్ చేయదగిన ప్రాంతం యొక్క కోఆర్డినేట్‌లను నిర్వచిస్తుంది.
- ' href ” లక్షణం మూలం యొక్క URLని సెట్ చేస్తుంది.
HTML డాక్యుమెంట్‌లో ఇమేజ్ మ్యాప్‌లను ఎలా సృష్టించాలి?
HTML డాక్యుమెంట్‌లో చిత్ర పటాన్ని సృష్టించడానికి, ఇచ్చిన సూచనలను చూడండి:
- HTMLలో, ఒక “ని జోడించండి 'మూలకం, మరియు ఒక తరగతిని కేటాయించండి' చిత్రం-మ్యాప్ ”.
- ఈ divలో, ఒక “ని జోడించండి
”పైన చర్చించబడిన లక్షణాలతో అనుబంధించబడిన చిత్రాన్ని జోడించడానికి మూలకం.
- ఆపై, ఒక HTML జోడించండి <మ్యాప్> 'మూలకం మరియు దానిని కేటాయించండి' క్లిక్‌స్పేస్ 'పేరు.
- గమనించండి ' ఉపయోగం మ్యాప్ 'లక్షణానికి పేరు కేటాయించబడింది' #క్లిక్‌స్పేస్ 'ని సూచిస్తూ' పేరు ”
- దాని లోపల, 'ని జోడించండి <ప్రాంతం> పైన పేర్కొన్న లక్షణాలతో ” ట్యాగ్:
< div తరగతి = 'చిత్ర పటం' >
< img src = 'images/img1.jpg' ప్రతిదీ = 'ల్యాప్టాప్' ఉపయోగించండి మ్యాప్ = '#క్లిక్‌స్పేస్' >
< పటం పేరు = 'క్లిక్‌స్పేస్' >
< ప్రాంతం ఆకారం = 'రెక్ట్' అక్షాంశాలు = '224,37,422,312' href = 'laptop.html' >
< / పటం >
< / div >చిత్రం యొక్క పరిమాణాన్ని సర్దుబాటు చేయడానికి CSS విభాగం వైపు వెళ్దాం.
CSSలో “
” శైలి'ని ఉపయోగించండి .image-map 'క్లాస్ యాక్సెస్ చేయడానికి'
మూలకం మరియు క్రింది CSS లక్షణాలను వర్తింపజేయండి: .image-map {
వెడల్పు : 700px;
మార్జిన్: కారు;
}పేర్కొన్న CSS లక్షణాల వివరణ ఇక్కడ ఉంది:
- ది ' వెడల్పు ”ప్రాపర్టీ div ఎలిమెంట్ వెడల్పును సెట్ చేస్తుంది.
- ది ' మార్జిన్ ”ప్రాపర్టీ మూలకం చుట్టూ మరింత స్థలాన్ని జోడిస్తుంది.
శైలి 'img' మూలకం
.image-map img {
వెడల్పు : 100 %;
}చూడండి, 'లో పేర్కొన్న ఏరియా కోఆర్డినేట్‌లు అక్షాంశాలు ” లక్షణం ఇప్పుడు క్లిక్ చేయదగినవి:
తదుపరి విభాగంలో, చిత్ర పటాన్ని మరొక మూలానికి ఎలా లింక్ చేయాలో నేర్చుకుంటాము.
ఇతర పేజీకి లింక్ చేయబడిన చిత్ర పటాన్ని ఎలా సృష్టించాలి?
పొడిగింపుతో మరొక HTML పేజీని సృష్టించండి ' .html ” క్రింద పేర్కొన్న దశలను అనుసరించడం ద్వారా:
- మా విషయంలో, మేము దానికి పేరు పెట్టాము ' laptop.html ”.
- డివి ఎలిమెంట్‌ని జోడించి, దానికి క్లాస్‌ని కేటాయించండి “ laptop-img ”.
- ఆపై, “ని ఉపయోగించి చిత్రాన్ని ఉంచండి
'మూలకం మరియు అనుబంధం' src 'మరియు' వెడల్పు ' గుణాలు.
- తరువాత, 'ని ఉపయోగించి ఒక పేరాను పేర్కొనండి ' మూలకం:
< img src = '/images/laptop.jpg' వెడల్పు = '400px' >
< p > ల్యాప్టాప్ అనేది పోర్టబుల్ కంప్యూటర్, దీనిని వివిధ సెట్టింగ్‌లలో తరలించవచ్చు మరియు ఉపయోగించవచ్చు.< / p >
< / div >CSSలో, క్రింది CSS లక్షణాలను ''కి పేర్కొనండి ల్యాప్టాప్-img 'తరగతి:
.laptop-img {
వెడల్పు : 500px;
మార్జిన్: కారు;
}అవుట్‌పుట్
ఇప్పుడు, మేము 'ని లింక్ చేస్తాము laptop.html 'పేజీకి ఒక చిత్రం' <ప్రాంతం> ”మొదటి పేజీ మూలకం. అలా చేయడానికి, పేజీ యొక్క URLని “కి పేర్కొనండి href క్రింద చూపిన విధంగా ' ' మూలకం యొక్క లక్షణం:
< ప్రాంతం ఆకారం = 'రెక్ట్' అక్షాంశాలు = '310,57,590,470' href = 'laptop.html' >అవుట్‌పుట్
చిత్ర పటాలు అంటే ఏమిటి మరియు అవి ఇతర మూలాధారాలతో ఎలా అనుసంధానించబడి ఉన్నాయి అనే విషయాలను మేము విజయవంతంగా తెలుసుకున్నాము.
ముగింపు
HTML ' <మ్యాప్> చిత్రం మ్యాప్ లేదా క్లిక్ చేయగల ప్రాంతాలతో చిత్రాన్ని రూపొందించడానికి మూలకం ఉపయోగించబడుతుంది. చిత్రం యొక్క క్లిక్ చేయగల ప్రాంతాలను నిర్వచించడానికి, ఒకటి లేదా అంతకంటే ఎక్కువ ' <ప్రాంతం> '
- ఈ divలో, ఒక “ని జోడించండి