0

私の質問が単純すぎる場合はご容赦ください。私はこれで非常に新しいです！

サイトにファイルをダウンロードするためのボタンを作成しようとしています。

ユーザーがカーソルを合わせたときにボタンを変更し、クリックすると3番目の画像に変更してファイルのダウンロードを開始したい.

これが私がこれまでに持っているものです（これでホバーすると2つの画像がフェードします）...

<div id="cf">
<img class="download" src="/Images/downloading.png" alt="download3" />
  <img class="bottom" src="/Images/PDownloadAllFiles2.png" alt="download2" />
  <img class="top" src="http:///Images/PDownloadAllFiles1.png" alt="download1" />
</div>

<head>
<style type="text/css">

#cf {
  position:relative;
  height:281px;
  width:450px;
  margin:0 auto;
}

#cf img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

#cf img.top:hover {
  opacity:0;
}

#cf img.download:transparent {
opacity:0;
}
#cf_onclick {
cursor:pointer;
}

<script type="text/javascript">
$(document).ready(function() {
  $("#cf_onclick").click(function() {
  $("#cf2 img.download").toggleClass("transparent");
});
});
</script>

</head>

このコードは、画像 1 の上にカーソルを置いたときに、画像 1 を画像 2 にフェードするだけです。

このボタンをクリックすると 3 番目の画像に変わり、ファイルのダウンロードを開始するには、何を追加する必要がありますか?

4

2 に答える 2

0

@George Watsonタグのソースとして.zipファイルを指定した理由がわかりません..とにかく移動しましょう

以下に、背景色で機能するコードを示します。コードの出力を確認し、これが希望するパターンである場合は、3 つの div の背景に画像を提供するだけで完了です。

<html>
<head>
<title>sumitb.mdi</title>
<style>
    #container{
        display: block;
        position: relative;
        height:100px;
        width: 300px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 100px;
    }
    .customButton{
        display: block;
        position: absolute;
        height: 100%;
        width: 100%;
    }
    #myButton1{
        background-color: red;  
    }
    #myButton2{
        background-color: blue; 
        opacity:0; 
        -webkit-transition:opacity 1s linear;
    }
    #myButton2:hover{
        opacity: 1;
    }
    #myButton3{
        visibility: hidden;
        background-color: silver;
    }


</style>

<script>
function onContainerClick(){
    document.getElementById('myButton3').style.visibility='visible';
}
</script>
</head>
<body>
<div id='container' onclick='onContainerClick();'>
    <div id='myButton1' class='customButton'></div>
    <div id='myButton2' class='customButton'></div>
    <div id='myButton3' class='customButton'></div>
</div>
</body>
</html>

div で背景画像を提供するには、次のようにします。

#myButton1{
....
background-image:url('one.png');
...
}

他の 2 つの div についても同様に行います。これはすべてクライアント側に関するものでした。その後、ファイルをダウンロードするためにサーバー側をコーディングする必要があります。

于 2013-06-22T07:31:03.440 に答える