? ????? JavaScript? ???? ???? ?? ??? ?? ?? ?? ? div ??? ?? ???? ???? ???? ??? ?????. 'mouseover' ???? ?? ?? ???? ?? ???? 'src' ??? ???? div? ?? ???? ?? ?????? ??? ??? ??? ?? ? ????.

????

?? ????? JavaScript? ??? ?? ????? ???? ?? ??? ?????(mouseover) ? ?????(mouseout) ???? ?????? ????. mouseover ???? ???? ?? ???? src ??? ???? ?? div ??? backgroundImage ???? ?????. mouseout ???? ???? div ??? ?? ??? ????? ?? ?? ???? ??? ? ????.

HTML ??

?? ?? ???? ???? ?? div ??? ?? img ??? ???? ???. ???? ??? ???? ???? ?? div? ??? ??? ? ????.

 <div id="???">
    ??? ????? ?? ??? ?? ???? ?????.
</div>

<img class="preview lazy" src="/static/imghw/default1.png" data-src="bacon.jpg" alt="" onmouseover="upDate(this)" onmouseout="unDo()">

<img class="preview lazy" src="/static/imghw/default1.png" data-src="bacon2.JPG" alt="" onmouseover="upDate(this)" onmouseout="unDo()">

<img class="preview lazy" src="/static/imghw/default1.png" data-src="bacon3.jpg" alt="" onmouseover="upDate(this)" onmouseout="unDo()">

? ????? ? img ??? onmouseover ? onmouseout ??? ???? ?? upDate(this) ? unDo() JavaScript ??? ???????. this ???? ?? img ??? upDate ??? ????? ?????.

?????? ??

???? ?? ???? ???? ?????? JavaScript ??? ???? ???.

 ?? upDate(previewPic){
    document.getElementById("image").style.BackgroundImage = `url('${previewPic.src}')`;
}

?? ??() {
    document.getElementById("image").style.BackgroundImage = "??"; // ?? ??? ?? document.getElementById("image").innerHTML = "??? ????? ?? ??? ?? ???? ?????."; // ?? ??? ??}

upDate ??? ???? ???? ?? ?? img ??? ???? PreviewPic ????? ????. ??? PreviewPic.src? ???? ???? URL? ?? ?? ID? "image"? div ??? backgroundImage ???? ?????. ??? ???? ???? URL ???? ? ?? ??? ? ????.

?? ?? ??? ???? ?? ??? ??? ?? ??? ???? ? ?????. ???? div? backgroundImage? "none"?? ???? ?? ???? ???? div ??? ???? ?? ??? ?????.

?? ?? ??

HTML? JavaScript ??? ?? ???? ??? ?? ??? ????.

 


<title>?? ?? ??</title>

#??? {
    ??: 300px;
    ??: 200px;
    ???: 1px ?? ??;
    ??? ??: ??;
    ? ??: 200px;
}

.???? {
    ??: 100px;
    ??: 80px;
    ??: 5px;
    ??: ???;
}




<div id="???">
    ??? ????? ?? ??? ?? ???? ?????.
</div>

<img class="preview lazy" src="/static/imghw/default1.png" data-src="bacon.jpg" alt="" onmouseover="upDate(this)" onmouseout="unDo()">

<img class="preview lazy" src="/static/imghw/default1.png" data-src="bacon2.JPG" alt="" onmouseover="upDate(this)" onmouseout="unDo()">

<img class="preview lazy" src="/static/imghw/default1.png" data-src="bacon3.jpg" alt="" onmouseover="upDate(this)" onmouseout="unDo()">


?? upDate(previewPic){
    document.getElementById("image").style.BackgroundImage = `url('${previewPic.src}')`;
    document.getElementById("image").innerHTML = ""; // ?? ??? ??}

?? ??() {
    document.getElementById("image").style.BackgroundImage = "??"; // ?? ??? ?? document.getElementById("image").innerHTML = "??? ????? ?? ??? ?? ???? ?????."; // ?? ??? ??}

? ??? ???? ??? ?? ??? ? JavaScript? ???? Div ??? ???? ?????.? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!