onClick CSS背景更改

編輯：將函數名稱更改爲交換，並將onClick函數作爲DIV元素的一部分，但不能繼續工作。onClick CSS背景更改

我已經閱讀了關於這個問題的幾個主題，嘗試了每個不同的代碼，去了W3Schools獲取最正確的代碼。當有人點擊它或其中包含的圖像時，我想更改父DIV的背景。

以下是我的HTML的HEAD部分

<script type="javascript/text"> 
    <!-- 
    function swap() { 
     document.getElementById("links").style.backgroundImage = "url('middle_background.png')"; 
    } 
    --> 
</script>

以下是正文：

<div class="nav" id="links" onClick="swap();"> 
    <img src="images/links.png" alt="Links" /> 
</div>

這是在一個單獨的文件中的CSS：

.nav { 
    position: relative; 
    float: right; 
    background: url(images/nav_buttons.jpg) no-repeat; 
    width: 111px; 
    height: 100px; 
    margin: 0px 0px 0px 0px; 
    padding: 0px 0px 0px 0px; 
}

我向你保證圖像：middle_backgrounds在根文件夾中。（副本也在圖像文件夾中。）

來源

2017-02-23 Brent Walker

你不應該命名函數'之開關。這是JavaScript中的保留字。 – bejado

請勿使用'switch'作爲其預定義關鍵字的函數名稱 – Sankar

檢查並查看您所得到的控制檯錯誤。 – bejado

在父div處使用onclick而不是img標記。身體會看看下面

<div class="nav" id="links" onClick="changeBackgroundImage();" > <img src="images/links.png" alt="Links" /> </div>

來源

2017-02-23 04:52:39 Bewilderment

'switch'不是有效的函數名稱。 – bejado

嘗試......

function switch1() { 
 
    document.getElementById("links").style.backgroundImage = "url('https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png')"; 
 
}

.nav { 
 
    position: relative; 
 
    float: right; 
 
    background-image: url(images/nav_buttons.jpg) no-repeat; 
 
    width: 111px; 
 
    height: 100px; 
 
    margin: 0px 0px 0px 0px; 
 
    padding: 0px 0px 0px 0px; 
 
}

<div class="nav" id="links" onClick="switch1();"> 
 
    <img src="https://images.google.com/images/branding/product/ico/googleg_lodp.ico" alt="Links" /> 
 
</div>

來源

2017-02-23 05:04:11 Sankar

那麼我怎樣才能重寫現有的CSS規則？ –

@BrentWalker號我與img標籤和背景圖像屬性混淆......它會爲你工作 – Sankar

啊，好的。是的，這曾經是需要更多代碼的問題。我只是拿出了.Nav的CSS背景屬性，而onClick函數並沒有加載背景。 –

我測試了它的工作...

不使用功能開關（），因爲這是預定義的，請更改函數名稱

<div class="nav" id="links"><img src="Images/progress.gif" alt="Links" onclick="change();" /></div> 

    function change() { 

$('#links').css('background-image', 'url(Images/progress.gif)'); 


      }

來源

2017-02-23 05:12:42

我不知道如何，但這設法解決了我的問題。只需通過更改網址來匹配我的圖片和位置即可。謝謝！

function switch1() { 
 
    document.getElementById("links").style.backgroundImage = "url('https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png')"; 
 
}

.nav { 
 
    position: relative; 
 
    float: right; 
 
    background-image: url(images/nav_buttons.jpg) no-repeat; 
 
    width: 111px; 
 
    height: 100px; 
 
    margin: 0px 0px 0px 0px; 
 
    padding: 0px 0px 0px 0px; 
 
}

<div class="nav" id="links" onClick="switch1();"> 
 
    <img src="https://images.google.com/images/branding/product/ico/googleg_lodp.ico" alt="Links" /> 
 
</div>

來源

2017-02-23 05:27:36

onClick CSS背景更改

回答

相關問題