圖像交換問題

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; 
}