想要创建一个下载按钮，在悬停时淡出另一个图像，然后点击第三个图像

Want to create a download button that fades to another image on hover and then to a third image on click

本文关键字：图像 三个 另一个 然后 淡出 创建 一个 下载 悬停 按钮      更新时间：2023-09-26

如果我的问题太简单，请原谅。在这方面我是新手!

我想在我的网站上创建一个下载文件的按钮。

我希望按钮改变时，用户悬停在它，然后当他们点击它，我希望它改变到第三个图像，并开始下载文件。

这是我到目前为止所做的(我有两个图像在悬停时褪色)…

<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。

我需要添加什么才能使这个按钮在点击到第三个图像时改变并开始下载文件?

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

function onButtonClick(){
  document.getElementById('yourElementId').src = 'third.png';
}

@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也做同样的处理这都是关于客户端;之后，您必须编写用于文件下载的服务器端代码。

相关文章：