በድረ ገጾች ውስጥ የአዝራሮች የጀርባ ብርሃን አብዛኛውን ጊዜ ሁለት ምስሎችን በመጠቀም ይደራጃል። የመዳፊት ጠቋሚውን በሰነዱ ተጓዳኝ አካል (አገናኝ ወይም አዝራር) ላይ ሲያንዣብቡ አንድ ክስተት ይፈጠራል ፣ ይህም በሲኤስኤስ ቋንቋ በተፃፈው መመሪያ መሠረት አሳሹ አንድ ምስልን ወደ ሌላ ምስል እንዲቀይር ይገፋፋዋል። የመዳፊት ጠቋሚው ከአዝራሩ ሲርቅ ፣ የተገላቢጦሹ ምትክ ይከሰታል።
አስፈላጊ
ስለ HTML እና ለ CSS ቋንቋዎች መሠረታዊ እውቀት
መመሪያዎች
ደረጃ 1
እንዲህ ዓይነቱን የማድመቅ ዘዴን ለመተግበር ብዙ አማራጮች አሉ ፡፡ ለማንኛቸውም ተጓዳኝ የቅጥ መግለጫውን ብቻ በመለወጥ ተመሳሳይ የኤችቲኤምኤል ኮድ መጠቀም ይችላሉ። የአዝራሩ የኤች.ቲ.ኤም.ኤል ኮድ እንደዚህ ሊመስል ይችላል-በአዝራሩ ላይ ያለው ጽሑፍ የቅጡ መግለጫው የሚጣበቅበት የዚህ ገጽ አባል (id = "btnA") መለያ ነው።
ደረጃ 2
ከአማራጮቹ ውስጥ አንዱን ለመተግበር ሁለት ስዕሎችን ማዘጋጀት ያስፈልግዎታል ፣ አንደኛው በእንቅስቃሴ-አልባ ሁኔታ ውስጥ ቁልፉን ያሳያል ፣ ሁለተኛው ደግሞ ከጀርባ ብርሃን ጋር ፡፡ እነሱ እንደ አገናኙ የጀርባ ምስል ያገለግላሉ። ለዚህ አዝራር የ CSS መመሪያዎች እንደዚህ ሊመስሉ ይችላሉ-
a # btnA, a # btnA: ጎብኝቷል {
ማሳያ: አግድ;
ስፋት 50 ፒክስል;
ቁመት 20 ፒክስል;
ዳራ: ዩ.አር.ኤል. (btnA.gif)-አይደገምም;
ድንበር: 0;
}
አንድ # btnA: ማንዣበብ {
ዳራ: url (btnA_hover.gif) አይደገምም;
ድንበር: 0;
}
እዚህ በመጀመሪያው ማገጃ ውስጥ ቁልፉን የሚያሳየው የምስሉ ልኬቶች (ስፋት 50px ቁመት 20px;). እነሱን በስዕልዎ ልኬቶች መተካት ያስፈልግዎታል። የምስል ፋይሎቹ ስሞች በተመሳሳይ መንገድ መለወጥ አለባቸው-btnA.
ደረጃ 3
አንዱ አማራጭ ሁለቱንም ምስሎች ወደ አንድ ስዕል ማስገባት ነው ፡፡ ከሌላው በላይ አንዱ ሊሆን ይችላል ፣ ወይም ደግሞ እርስ በእርስ አጠገብ ሊሆን ይችላል ፡፡ እንዲሁም ለአገናኝ እንደ ዳራ ጥቅም ላይ ይውላል ፡፡ የአዝራር መጠኖቹ በአዝራር ዘይቤ መግለጫው ውስጥ የተገለጹ በመሆናቸው ከእነሱ ጋር የማይገጥም ማንኛውም ነገር አይታይም ፡፡ በዚህ ሁኔታ በሲ.ኤስ.ኤስ. መግለጫው ውስጥ የተቀመጡት መመሪያዎች የመዳፊት ጠቋሚውን ሲያንዣብቡ የደመቀው አዝራር ምስል ያለው ቦታ ወደ ክፈፉ ውስጥ እንዲገባ የጀርባውን ምስል ያሸብልሉ ፡፡ ለዚህ አማራጭ ከቀዳሚው እርከን የሚገኘው ኮድ እንደሚከተለው መለወጥ አለበት
a # btnA, a # btnA: ጎብኝቷል {
ማሳያ: አግድ;
ስፋት 50 ፒክስል;
ቁመት 20 ፒክስል;
ዳራ: - url (btnA.gif) አይደገምም;
ድንበር: 0;
}
አንድ # btnA: ማንዣበብ {
ዳራ: url (btnA.gif) no-repeat 21px;
ድንበር: 0;
}
ይህ ምስሎቹን አንዱን ከሌላው (ከታች አድምቆ) እንዳስቀመጡ እና btnA.gif"
