NEXUS, спасибо! Вы всё правильно изложили. Я такими словами не пользуюсь поэтому мне трудно было сформулировать так как это сделали Вы. Я её сформулировал образно вот так:
Есть код, типа "Крестики - нолики". Как сохранить результат игры чтобы и поля были закрашены (чтобы знать кто куда ходил) и подсказки работали в сохранённом файле?
Пробовал кнопки (SAVE) не работают, увы. Лучший результат - это нажав правую кнопку и далее "сохранить как", правда в этом случае заливка ячеек сохраняется корректно, а вот подсказки работать перестают???? В процессе игры подсказки имеют тот же стиль как и ячейка и надписи "ЭТО НОЛИК", "ЭТО КРЕСТИК" а после сохранения подсказка теряет стиль и пишет цвет ячейки. Как исправить ситуацию не меняя общую концепцию? Кода нет, да это всё тот же код, написанный Вами:
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#myTBL td.DarkGreen, .ui-tooltip.DarkGreen
{
font:14px helvetica, arial, sans-serif;
color : White;
font-weight:800;
background-color:DarkGreen;
background: linear-gradient(180deg, DarkGreen 95%, Black 5%);
box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7); -webkit-box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7);
border-radius: 5px 5px; -webkit-border-radius: 5px;
z-index: 1;
opacity:0.99;
}
#myTBL td.Indigo, .ui-tooltip.Indigo
{
font:14px helvetica, arial, sans-serif; /* helvetica, arial, sans-serif*/
color : White; /*#ccc #666 #000 White*/
font-weight:800;
background-color:Indigo;
background: linear-gradient(180deg, Indigo 95%, Black 5%);
box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7); -webkit-box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7);
border-radius: 5px 5px; -webkit-border-radius: 5px;
z-index: 1;
opacity:0.99;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
$(function() {
var content = {
DarkGreen: "ЭТО КРЕСТИК",
Indigo: "ЭТО НОЛИК",
};
$("#myTBL").on("click", "td", function() {
var target = this,
rem = 0,
len = $('[name="COLOR"]').each(function(indx, el) {
el.checked && !target.classList.contains(el.value) ? $(target).addClass(el.value).attr("title", el.value).tooltip({
//track: true,
tooltipClass: el.value,
content: content[el.value] || ""
}).tooltip("open") : ($(target).removeClass(el.value), rem++)
}).length;
if (rem == len) $(target).tooltip("destroy").removeAttr("title")
})
});
</script>
</head>
<body>
<table width="100%" height="100%" id="myTBL" class="select">
<tr>
<td bgcolor="PaleGoldenrod">
</td>
<td bgcolor="PaleGoldenrod">
</td>
<td bgcolor="PaleGoldenrod">
</td>
</tr>
<tr>
<td bgcolor="PaleGoldenrod">
</td>
<td bgcolor="PaleGoldenrod">
</td>
<td bgcolor="PaleGoldenrod">
</td>
</tr>
<tr>
<td bgcolor="PaleGoldenrod">
</td>
<td bgcolor="PaleGoldenrod">
</td>
<td bgcolor="PaleGoldenrod">
</td>
</tr>
</table>
<input type="radio" name="COLOR" value="DarkGreen" checked="checked">
<label for="DarkGreen">DarkGreen</label>
<input type="radio" name="COLOR" value="Indigo" >
<label for="Indigo">Indigo</label>
<script type="text/javascript">
function doSaveAs(){
if (document.execCommand){
document.execCommand("SaveAs")
}
else {
alert("Save-feature available only in Internet Exlorer 5.x.")
}
}
</script>
<form>
<input type="button" value="save" onClick="doSaveAs()"
</form>
<a href="javascript:void(0);"
onclick="document.execCommand('SaveAs',true,'file.html');"
>Save this page</a>
</body>
</html>