图像交换问题

Question

我正在使用内联onclick将在页面上使用的两个图像切换为制表符。交换很好，但是当页面重新加载图像还原为家庭图像时。我希望图像保持为“选定”图像，直到单击另一个选项卡。

<img id="image3" src="images/charts1.png" style="display:inline;" onclick="document.getElementById('image3').style.display='none'; document.getElementById('image4').style.display='inline';" "/> 

    <img id="image4" src="images/charts2.png" style="display:none;" onclick="document.getElementById('image4').style.display='none'; document.getElementById('image3').style.display='inline';"/> 

我的脚本

<script> 
    if (document.images) { 
     img1on = new Image(); 
     img1on.src = "images/over1.jpg"; 
     img1off = new Image(); 
     img1off.src = "images/notover.jpg"; 
     img2on = new Image(); 
     img2on.src = "images/over2.jpg"; 
     img2off = new Image(); 
     img2off.src = "images/notover.jpg"; 
    } 
    function imgOn(imgName) { 
     if (document.images) { 
      document[imgName].src = eval(imgName + "on.src");} 
    } 
    function imgOff(imgName) { 
     if (document.images) { 
      document[imgName].src = eval(imgName + "off.src");} 
     } 
</script> 

Answer 1

从它的声音，你想从JavaScript的信息，即使后刷新页面，以保持状态，所以你需要使用一个Cookie或的localStorage存储活动选项卡或图像ID或一些其他有意义的信息与之关联。

这是一个解决方案，如果它可用并使用cookie，它将使用localStorage。

function imgOn(imgName) { 
     if (document.images) { 
      document[imgName].src = eval(imgName + "on.src");} 
storeUpdate(imgName, imgName + "on.src"); 
    } 
    function imgOff(imgName) { 
     if (document.images) { 
      document[imgName].src = eval(imgName + "off.src");} 
storeUpdate(imgName, imgName + "on.src"); 
     } 

function storeUpdate(key, value){ 
if(typeof(Storage)!=="undefined") 
    { 
    // Yes! localStorage and sessionStorage support 
localStorage.setItem(key, value); 
    } 
else 
    { 
    // Sorry! No web storage support.. 
var exdays = 10; // Number of days before cookie will expire 
setCookie(key, value, exdays); 
    } 
} 

function setCookie(c_name,value,exdays) 
{ 
var exdate=new Date(); 
exdate.setDate(exdate.getDate() + exdays); 
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString()); 
document.cookie=c_name + "=" + c_value; 
} 

然后在页面加载，你可以检查是否有这些cookie的存在：

function getImages(imgName){ 
if(typeof(Storage)!=="undefined") 
    { 
    // Yes! localStorage and sessionStorage support 
return localStorage.getItem(imgName); 
    } 
else 
    { 
    // Sorry! No web storage support.. 
return getCookie(imgName); 
    } 
} 
function getCookie(c_name) 
{ 
var c_value = document.cookie; 
var c_start = c_value.indexOf(" " + c_name + "="); 
if (c_start == -1) 
    { 
    c_start = c_value.indexOf(c_name + "="); 
    } 
if (c_start == -1) 
    { 
    c_value = null; 
    } 
else 
    { 
    c_start = c_value.indexOf("=", c_start) + 1; 
    var c_end = c_value.indexOf(";", c_start); 
    if (c_end == -1) 
    { 
c_end = c_value.length; 
} 
c_value = unescape(c_value.substring(c_start,c_end)); 
} 
return c_value; 
}