<html>
<head>
<style>
td {
border: 2px solid;
height: 50px;
width: 50px;
}
#div11{
width:50px;
height:50px;
}
#div12{
width:50px;
height:50px;
}
#div13{
width:50px;
height:50px;
}
#div21{
width:50px;
height:50px;
}
#div22{
width:50px;
height:50px;
}
#div23{
width:50px;
height:50px;
}
#div31{
width:50px;
height:50px;
}
#div32{
width:50px;
height:50px;
}
#div33{
width:50px;
height:50px;
}
</style>
</head>
<h1 align="center">Tic Tac Game</h1>
<body>
<table align="center">
<tr>
<td><div id="div11" onclick="cross()"><img id="myImage" src="https://wallpaperplay.com/walls/full/e/0/1/102440.jpg"style="width:50px;
height:50px;"></div></td>
<td><div id="div12" onclick="cross1()"><img id="myImage1" src="https://wallpaperplay.com/walls/full/e/0/1/102440.jpg"style="width:50px;
height:50px;"></div></td>
<td><div id="div13" onclick="cross2()"><img id="myImage2" src="https://wallpaperplay.com/walls/full/e/0/1/102440.jpg"style="width:50px;
height:50px;"></div></td>
</tr>
<tr>
<td><div id="div21" onclick="cross3()"><img id="myImage3" src="https://wallpaperplay.com/walls/full/e/0/1/102440.jpg"style="width:50px;
height:50px;"></div></td>
<td><div id="div22" onclick="cross4()"><img id="myImage4" src="https://wallpaperplay.com/walls/full/e/0/1/102440.jpg"style="width:50px;
height:50px;"></div></td>
<td><div id="div23" onclick="cross5()"><img id="myImage5" src="https://wallpaperplay.com/walls/full/e/0/1/102440.jpg"style="width:50px;
height:50px;"></div></td>
</tr>
<tr>
<td><div id="div31" onclick="cross6()"><img id="myImage6" src="https://wallpaperplay.com/walls/full/e/0/1/102440.jpg"style="width:50px;
height:50px;"></div></td>
<td><div id="div32" onclick="cross7()"><img id="myImage7" src="https://wallpaperplay.com/walls/full/e/0/1/102440.jpg"style="width:50px;
height:50px;"></div></td>
<td><div id="div33" onclick="cross8()"><img id="myImage8" src="https://wallpaperplay.com/walls/full/e/0/1/102440.jpg"style="width:50px;
height:50px;"></div></td>
</tr>
</table>
<script>
var aa=false;
function cross(){
if(aa==true)
{
document.getElementById('myImage').src='https://www.shareicon.net/data/512x512/2016/03/02/727494_multiple_512x512.png';
aa=false;
}
else{
document.getElementById('myImage').src='https://upload.wikimedia.org/wikipedia/commons/thumb/4/40/Cercle_noir_100%25.svg/600px-Cercle_noir_100%25.svg.png';
aa=true;
}
}
var bb=false;
function cross1(){
if(bb==true)
{
document.getElementById('myImage1').src='https://www.shareicon.net/data/512x512/2016/03/02/727494_multiple_512x512.png';
bb=false;
}
else{
document.getElementById('myImage1').src='https://upload.wikimedia.org/wikipedia/commons/thumb/4/40/Cercle_noir_100%25.svg/600px-Cercle_noir_100%25.svg.png';
bb=true;
}
}
var cc=false;
function cross2(){
if(cc==true)
{
document.getElementById('myImage2').src='https://www.shareicon.net/data/512x512/2016/03/02/727494_multiple_512x512.png';
cc=false;
}
else{
document.getElementById('myImage2').src='https://upload.wikimedia.org/wikipedia/commons/thumb/4/40/Cercle_noir_100%25.svg/600px-Cercle_noir_100%25.svg.png';
cc=true;
}
}
var dd=false;
function cross3(){
if(dd==true)
{
document.getElementById('myImage3').src='https://www.shareicon.net/data/512x512/2016/03/02/727494_multiple_512x512.png';
dd=false;
}
else{
document.getElementById('myImage3').src='https://upload.wikimedia.org/wikipedia/commons/thumb/4/40/Cercle_noir_100%25.svg/600px-Cercle_noir_100%25.svg.png';
dd=true;
}
}
var ee=false;
function cross4(){
if(ee==true)
{
document.getElementById('myImage4').src='https://www.shareicon.net/data/512x512/2016/03/02/727494_multiple_512x512.png';
ee=false;
}
else{
document.getElementById('myImage4').src='https://upload.wikimedia.org/wikipedia/commons/thumb/4/40/Cercle_noir_100%25.svg/600px-Cercle_noir_100%25.svg.png';
ee=true;
}
}
var ff=false;
function cross5(){
if(ff==true)
{
document.getElementById('myImage5').src='https://www.shareicon.net/data/512x512/2016/03/02/727494_multiple_512x512.png';
ff=false;
}
else{
document.getElementById('myImage5').src='https://upload.wikimedia.org/wikipedia/commons/thumb/4/40/Cercle_noir_100%25.svg/600px-Cercle_noir_100%25.svg.png';
ff=true;
}
}
var gg=false;
function cross6(){
if(gg==true)
{
document.getElementById('myImage6').src='https://www.shareicon.net/data/512x512/2016/03/02/727494_multiple_512x512.png';
gg=false;
}
else{
document.getElementById('myImage6').src='https://upload.wikimedia.org/wikipedia/commons/thumb/4/40/Cercle_noir_100%25.svg/600px-Cercle_noir_100%25.svg.png';
gg=true;
}
}
var hh=false;
function cross7(){
if(hh==true)
{
document.getElementById('myImage7').src='https://www.shareicon.net/data/512x512/2016/03/02/727494_multiple_512x512.png';
hh=false;
}
else{
document.getElementById('myImage7').src='https://upload.wikimedia.org/wikipedia/commons/thumb/4/40/Cercle_noir_100%25.svg/600px-Cercle_noir_100%25.svg.png';
hh=true;
}
}
var ii=false;
function cross8(){
if(ii==true)
{
document.getElementById('myImage8').src='https://www.shareicon.net/data/512x512/2016/03/02/727494_multiple_512x512.png';
ii=false;
}
else{
document.getElementById('myImage8').src='https://upload.wikimedia.org/wikipedia/commons/thumb/4/40/Cercle_noir_100%25.svg/600px-Cercle_noir_100%25.svg.png';
ii=true;
}
}
</script>
</body>
</html>
No comments:
Post a Comment