Html OnClick背景画像を変更する

ページをクリックすると、htmlページの背景を変更することはできますか？Html OnClick背景画像を変更する

出典

2012-03-13 Toke Juhoklee Kejlow Nielsen

を編集します。 –

はい、クリックイベントのバックグラウンドを変更するCSSクラスを適用するだけです。コードスニペットを提供できる場合は、これを達成するのに役立ちます。

出典

2012-03-13 09:14:32

待って、クリックイベントでボディの背景を変更できますか？ –

このような何か：

<html> 
<head> 
    <title>Javascript Change Div Background Image</title> 

    <style type="text/css"> 

    #div1 { 
    width:100px; 
    height:30px; 
    background-image:url(images/blue.gif); 
    } 

    p { 
    font-family:Verdana; 
    font-weight:bold; 
    font-size:11px 
    } 

    </style> 

    <script language="javascript" type="text/javascript"> 
    function changeDivImage() 
    { 
     var imgPath = new String(); 
     imgPath = document.getElementById("div1").style.backgroundImage; 

     if(imgPath == "url(images/blue.gif)" || imgPath == "") 
     { 
      document.getElementById("div1").style.backgroundImage = "url(images/green.gif)"; 
     } 
     else 
     { 
      document.getElementById("div1").style.backgroundImage = "url(images/blue.gif)"; 
     } 
    } 
    </script> 

</head> 

<body> 

    <center> 
    <p> 
     This Javascript Example will change the background image of<br /> 
     HTML Div Tag onclick event. 
    </p> 
    <div id="div1"> 
    </div> 
    <br /> 
    <input type="button" value="Change Background Image" onclick="changeDivImage()" /> 
    </center> 

</body> 
</html>

しかし、あなたはjQueryのを使用している場合は、それを行うのは非常に簡単になります！あなたはjQueryのを使用している場合だけではJavaScriptを経由してあなたの質問

$(function(){ 
    $("input").click(function(){ 
     $("body").css("background","url('otherimg.jpg')"); 
    }); 
});

出典

2012-03-13 09:15:32

$(function(){ 
$("input").click(function(){ 
    $("body").css({background-image:"url('imageName.gif')"}); 
}); 
});

出典

2012-03-13 09:16:37 Th0rndike

Html OnClick背景画像を変更する

答えて

関連する問題