色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

相互沖突的重疊PNG圖像

CSS

我已經(jīng)創(chuàng)建了一個(gè)美國地圖，所有的50個(gè)州都絕對(duì)定位。目標(biāo)是有一個(gè)可交互的地圖，你可以點(diǎn)擊一個(gè)州，標(biāo)記你是否去過那個(gè)州。我遇到的問題是，雖然PNG文件本身不重疊，但圖像的邊界框會(huì)重疊。如果我單擊與另一個(gè)狀態(tài)的邊界框重疊的狀態(tài)，它將拾取重疊的圖像(取決于z索引)。見圖片

我試圖找到一種方法來剪輯邊界框的png文件，但沒有任何運(yùn)氣。在華盛頓內(nèi)部單擊，但俄勒岡州被選中，因?yàn)檫吙蛑丿B

我所有的州都被絕對(duì)定位了(使用Figma)。

以下是我的代碼:

<div id='statepictures'>
                <img onClick={() => onVisitedChange('WA')} style={states['WA'] ? {filter:'brightness(0)'} : {}} className='cursor-pointer w-[147px] h-[114px] absolute left-[226.88px]' src={StateImages.WA} alt='washington'></img>
                <img onClick={() => onVisitedChange('ID')} style={states['ID'] ? {filter:'brightness(0)'} : {}} className='cursor-pointer w-[126px] h-[215px] absolute left-[330px] top-[32px]' src={StateImages.ID} alt='idaho'></img>
                <img onClick={() => onVisitedChange('MT')} style={states['MT'] ? {filter:'brightness(0)'} : {}} className='cursor-pointer w-[217px] h-[146px] absolute left-[386px] top-[37px]' src={StateImages.MT} alt='montana'></img>
                <img onClick={() => onVisitedChange('ND')} style={states['ND'] ? {filter:'brightness(0)'} : {}} className='cursor-pointer w-[139px] h-[91px] absolute left-[597px] top-[77px]' src={StateImages.ND} alt='north dakota'></img>
                <img onClick={() => onVisitedChange('MN')} style={states['MN'] ? {filter:'brightness(0)'} : {}} className='cursor-pointer w-[141px] h-[155px] absolute left-[725px] top-[75px]' src={StateImages.MN} alt='minnesota'></img>
                <img onClick={() => onVisitedChange('OR')} style={states['OR'] ? {filter:'brightness(0)'} : {}} className='cursor-pointer w-[174px] h-[152px] absolute left-[187px] top-[72px]' src={StateImages.OR} alt='oregon'></img>
                <img onClick={() => onVisitedChange('CA')} style={states['CA'] ? {filter:'brightness(0)'} : {}} className='cursor-pointer w-[172px] h-[298px] absolute left-[172px] top-[187px]' src={StateImages.CA} alt='california'></img>
                <img onClick={() => onVisitedChange('NV')} style={states['NV'] ? {filter:'brightness(0)'} : {}} className='cursor-pointer w-[134px] h-[208px] absolute left-[251px] top-[209px]' src={StateImages.NV} alt='nevada'></img>
                <img onClick={() => onVisitedChange('UT')} style={states['UT'] ? {filter:'brightness(0)'} : {}} className='cursor-pointer w-[121px] h-[149px] absolute left-[361px] top-[239px]' src={StateImages.UT} alt='utah'></img>
                <img onClick={() => onVisitedChange('WY')} style={states['WY'] ? {filter:'brightness(0)'} : {}} className='cursor-pointer w-[147px] h-[122px] absolute left-[446px] top-[168px]' src={StateImages.WY} alt='wyoming'></img>
                <img onClick={() => onVisitedChange('AZ')} style={states['AZ'] ? {filter:'brightness(0)'} : {}} className='cursor-pointer w-[143px] h-[168px] absolute left-[325px] top-[372px]' src={StateImages.AZ} alt='arizona'></img>
                <img onClick={() => onVisitedChange('CO')} style={states['CO'] ? {filter:'brightness(0)'} : {}} className='cursor-pointer w-[156px] h-[121px] absolute left-[469px] top-[281px]' src={StateImages.CO} alt='colorado'></img>
                <img onClick={() => onVisitedChange('SD')} style={states['SD'] ? {filter:'brightness(0)'} : {}} className='cursor-pointer w-[154px] h-[101px] absolute left-[591px] top-[159px]' src={StateImages.SD} alt='south dakota'></img>
                <img onClick={() => onVisitedChange('NE')} style={states['NE'] ? {filter:'brightness(0)'} : {}} className='cursor-pointer w-[178px] h-[92px] absolute left-[587px] top-[236px]' src={StateImages.NE} alt='nebraska'></img>
                <img onClick={() => onVisitedChange('KS')} style={states['KS'] ? {filter:'brightness(0)'} : {}} className='cursor-pointer w-[163px] h-[82px] absolute left-[621px] top-[324px]' src={StateImages.KS} alt='kansas'></img>
                <img onClick={() => onVisitedChange('NM')} style={states['NM'] ? {filter:'brightness(0)'} : {}} className='cursor-pointer w-[147px] h-[152px] absolute left-[450px] top-[389px]' src={StateImages.NM} alt='new mexico'></img>
                <img onClick={() => onVisitedChange('OK')} style={states['OK'] ? {filter:'brightness(0)'} : {}} className='cursor-pointer w-[190px] h-[90px] absolute left-[599px] top-[401px]' src={StateImages.OK} alt='oklahoma'></img>
                <img onClick={() => onVisitedChange('TX')} style={states['TX'] ? {filter:'brightness(0)'} : {}} className='cursor-pointer w-[304px] h-[288px] absolute left-[509px] top-[417px]' src={StateImages.TX} alt='texas'></img>
                <img onClick={() => onVisitedChange('IA')} style={states['IA'] ? {filter:'brightness(0)'} : {}} className='cursor-pointer w-[124px] h-[84px] absolute left-[740px] top-[227px]' src={StateImages.IA} alt='iowa'></img>
                <img onClick={() => onVisitedChange('MO')} style={states['MO'] ? {filter:'brightness(0)'} : {}} className='cursor-pointer w-[144px] h-[118px] absolute left-[759px] top-[307px]' src={StateImages.MO} alt='missouri'></img>
                <img onClick={() => onVisitedChange('AR')} style={states['AR'] ? {filter:'brightness(0)'} : {}} className='cursor-pointer w-[103px] h-[94px] absolute left-[786px] top-[415px]' src={StateImages.AR} alt='arkansas'></img>
                <img onClick={() => onVisitedChange('LA')} style={states['LA'] ? {filter:'brightness(0)'} : {}} className='cursor-pointer w-[121px] h-[106px] absolute left-[801px] top-[508px]' src={StateImages.LA} alt='louisianna'></img>
                <img onClick={() => onVisitedChange('WI')} style={states['WI'] ? {filter:'brightness(0)'} : {}} className='cursor-pointer w-[111px] h-[116px] absolute left-[810px] top-[137px]' src={StateImages.WI} alt='wisconsin'></img>
                <img onClick={() => onVisitedChange('IL')} style={states['IL'] ? {filter:'brightness(0)'} : {}} className='cursor-pointer w-[83px] h-[149px] absolute left-[847px] top-[250px]' src={StateImages.IL} alt='illinois'></img>
                <img onClick={() => onVisitedChange('MI')} style={states['MI'] ? {filter:'brightness(0)'} : {}} className='cursor-pointer w-[162px] h-[151px] absolute left-[857px] top-[115px]' src={StateImages.MI} alt='michigan'></img>
                <img onClick={() => onVisitedChange('IN')} style={states['IN'] ? {filter:'brightness(0)'} : {}} className='cursor-pointer w-[65px] h-[115px] absolute left-[921px] top-[264px]' src={StateImages.IN} alt='indiana'></img>
                <img onClick={() => onVisitedChange('OH')} style={states['OH'] ? {filter:'brightness(0)'} : {}} className='cursor-pointer w-[90px] h-[103px] absolute left-[979px] top-[241px]' src={StateImages.OH} alt='ohio'></img>
                <img onClick={() => onVisitedChange('KY')} style={states['KY'] ? {filter:'brightness(0)'} : {}} className='cursor-pointer w-[151px] h-[77px] absolute left-[900px] top-[335px]' src={StateImages.KY} alt='kentucky'></img>
                <img onClick={() => onVisitedChange('TN')} style={states['TN'] ? {filter:'brightness(0)'} : {}} className='cursor-pointer w-[183px] h-[64px] absolute left-[881px] top-[390px]' src={StateImages.TN} alt='tennessee'></img>
                <img onClick={() => onVisitedChange('MS')} style={states['MS'] ? {filter:'brightness(0)'} : {}} className='cursor-pointer w-[71px] h-[131px] absolute left-[858px] top-[452px]' src={StateImages.MS} alt='mississippi'></img>
                <img onClick={() => onVisitedChange('AL')} style={states['AL'] ? {filter:'brightness(0)'} : {}} className='cursor-pointer w-[77px] h-[135px] absolute left-[928px] top-[445px]' src={StateImages.AL} alt='alabama'></img>
                <img onClick={() => onVisitedChange('FL')} style={states['FL'] ? {filter:'brightness(0)'} : {}} className='cursor-pointer w-[194px] h-[154px] absolute left-[947px] top-[548px]' src={StateImages.FL} alt='florida'></img>
                <img onClick={() => onVisitedChange('GA')} style={states['GA'] ? {filter:'brightness(0)'} : {}} className='cursor-pointer w-[116px] h-[120px] absolute left-[985px] top-[439px]' src={StateImages.GA} alt='georgia'></img>
                <img onClick={() => onVisitedChange('SC')} style={states['SC'] ? {filter:'brightness(0)'} : {}} className='cursor-pointer w-[110px] h-[80px] absolute left-[1033px] top-[430px]' src={StateImages.SC} alt='south carolina'></img>
                <img onClick={() => onVisitedChange('NC')} style={states['NC'] ? {filter:'brightness(0)'} : {}} className='cursor-pointer w-[186px] h-[84px] absolute left-[1012px] top-[368px]' src={StateImages.NC} alt='north carolina'></img>
                <img onClick={() => onVisitedChange('VA')} style={states['VA'] ? {filter:'brightness(0)'} : {}} className='cursor-pointer w-[170px] h-[94px] absolute left-[1020px] top-[302px]' src={StateImages.VA} alt='virginia'></img>
                <img onClick={() => onVisitedChange('WV')} style={states['WV'] ? {filter:'brightness(0)'} : {}} className='cursor-pointer w-[101px] h-[103px] absolute left-[1038px] top-[276px]' src={StateImages.WV} alt='west virginia'></img>
                <img onClick={() => onVisitedChange('PA')} style={states['PA'] ? {filter:'brightness(0)'} : {}} className='cursor-pointer w-[121px] h-[82px] absolute left-[1066px] top-[217px]' src={StateImages.PA} alt='pennsylvania'></img>
                <img onClick={() => onVisitedChange('MD')} style={states['MD'] ? {filter:'brightness(0)'} : {}} className='cursor-pointer w-[96px] h-[59px] absolute left-[1099px] top-[284px]' src={StateImages.MD} alt='maryland'></img>
                <img onClick={() => onVisitedChange('DE')} style={states['DE'] ? {filter:'brightness(0)'} : {}} className='cursor-pointer w-[23px] h-[35px] absolute left-[1171px] top-[278px]' src={StateImages.DE} alt='delaware'></img>
                <img onClick={() => onVisitedChange('NJ')} style={states['NJ'] ? {filter:'brightness(0)'} : {}} className='cursor-pointer w-[30px] h-[64px] absolute left-[1176px] top-[232px]' src={StateImages.NJ} alt='new jersey'></img>
                <img onClick={() => onVisitedChange('NY')} style={states['NY'] ? {filter:'brightness(0)'} : {}} className='cursor-pointer w-[163px] h-[121px] absolute left-[1076px] top-[124px]' src={StateImages.NY} alt='new york'></img>
                <img onClick={() => onVisitedChange('VT')} style={states['VT'] ? {filter:'brightness(0)'} : {}} className='cursor-pointer w-[32px] h-[70px] absolute left-[1181px] top-[115px]' src={StateImages.VT} alt='vermont'></img>
                <img onClick={() => onVisitedChange('NH')} style={states['NH'] ? {filter:'brightness(0)'} : {}} className='cursor-pointer w-[33px] h-[76px] absolute left-[1209px] top-[103px]' src={StateImages.NH} alt='new hampshire'></img>
                <img onClick={() => onVisitedChange('ME')} style={states['ME'] ? {filter:'brightness(0)'} : {}} className='cursor-pointer w-[80px] h-[126px] absolute left-[1217px] top-[31px]' src={StateImages.ME} alt='maine'></img>
                <img onClick={() => onVisitedChange('MA')} style={states['MA'] ? {filter:'brightness(0)'} : {}} className='cursor-pointer w-[76px] h-[38px] absolute left-[1196px] top-[167px]' src={StateImages.MA} alt='massachusetts'></img>
                <img onClick={() => onVisitedChange('CT')} style={states['CT'] ? {filter:'brightness(0)'} : {}} className='cursor-pointer w-[34px] h-[37px] absolute left-[1202px] top-[198px]' src={StateImages.CT} alt='connecticut'></img>
                <img onClick={() => onVisitedChange('RI')} style={states['RI'] ? {filter:'brightness(0)'} : {}} className='cursor-pointer w-[18px] h-[19px] absolute left-[1233px] top-[195px]' src={StateImages.RI} alt='rhode island'></img>
                <img onClick={() => onVisitedChange('AK')} style={states['AK'] ? {filter:'brightness(0)'} : {}} className='cursor-pointer w-[258px] h-[191px] absolute left-[0px] top-[416px]' src={StateImages.AK} alt='alaska'></img>
                <img onClick={() => onVisitedChange('HI')} style={states['HI'] ? {filter:'brightness(0)'} : {}} className='cursor-pointer w-[160px] h-[96px] absolute left-[301px] top-[566px]' src={StateImages.HI} alt='hawaii'></img>
            </div>

我嘗試過裁剪邊界框，但沒有成功，我嘗試過調(diào)整z索引，但有些狀態(tài)仍然會(huì)重疊，并有這個(gè)問題。

任何關(guān)于如何解決這個(gè)問題的想法或我應(yīng)該嘗試的不同方法都會(huì)非常有幫助

是的，圖像都是正方形，即使png看起來不像

對(duì)于這種方法，您必須使用帶有javascript的svg

看看這篇文章，它正是你所需要的:

https://www . freecodecamp . org/news/how-to-make-clickable-SVG-map-html-CSS/

祝你好運(yùn)！