0

如果我的问题太简单，请原谅我。我对此很陌生！

我正在尝试创建一个用于在我的网站上下载文件的按钮。

我希望按钮在用户将鼠标悬停在其上时更改，然后当他们单击它时，我希望它更改为第三张图像并开始下载文件。

这是我到目前为止所拥有的（我有 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 悬停在图像 2 上时将其淡化为图像 2。

我需要添加什么才能使此按钮在单击时更改为第三张图像并开始下载文件？

4

2 回答 2

0

@George Watson我不知道您为什么将.zip文件作为标签的来源..无论如何让我们移动

下面我有适用于背景颜色的代码。只需查看代码的输出，如果这是您想要的模式，那么您只需在三个 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');
...
}

对其他两个 div 做同样的事情，这都是关于客户端的；之后，您必须对服务器端进行编码以进行文件下载。

于 2013-06-22T07:31:03.440 回答
0

只需添加 javascript 代码即可将图像的来源更改为第三张图像

function onButtonClick(){
  document.getElementById('yourElementId').src = 'third.png';
}
于 2013-06-20T05:24:06.077 回答