问题：

如何将模式图像的标题转换为链接？

戎泰

2023-03-14

我正在一个图片库网站上工作，我认为拥有模态图片将是一个很好的补充。在w3schools指南和其他一些资源的帮助下，我成功地为我的规范创建了工作模式图像。然而，我也希望在模式中的标题的后半部分在单击时作为指向另一个页面的链接，但我无法让它工作。

w3schools的JavaScript根据所讨论图像的alt属性中的文本添加标题。但是，由于它已经是一个属性，因此我无法将标题的后半部分用

以下是一个示例，说明到目前为止，模态图像及其标题的代码如何在我的网站上工作：

<!DOCTYPE html>
<html lang="en-US">
<html>
<head>
<meta charset="utf-8">
<title>Modal Testing</title>
<link rel="stylesheet" type="text/css" href="">
<style>
body{font-family: Arial, Helvetica, sans-serif;}
.gallery img{
    opacity: 1;
    -webkit-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}
.gallery img:hover{
    opacity: .5;
    cursor: pointer;
}
.modal{
    display: none;
    position: fixed; 
    z-index: 1; 
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; 
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.8);
}
.modal-content{
    margin: auto;
    display: block;
    max-width: 700px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
#caption{
    margin: auto;
    display: block;
    width: 80%;
    max-width: 60%;
    text-align: center;
    position: absolute;
    left: 20%;
    bottom: 10%;
    color: #ffffff;
    /*background-color:#ffffff;*/
}
.close{
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  transition: 0.3s;
}
.close:hover,
.close:focus{
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}
</style>
</head>
<body>
    <!-- The Modal -->
    <div id="myModal" class="modal">
        <span class="close">&times;</span>
        <img class="modal-content" id="modalImg">
        <div id="caption"></div>
    </div>
    <!-- The Gallery -->
    <div class="gallery">
        <img class="myImg" src="https://via.placeholder.com/500x500" alt="Test Caption - Image 1">
        <img class="myImg" src="https://via.placeholder.com/400x500" alt="Test Caption - Image 2">
        <img class="myImg" src="https://via.placeholder.com/500x400" alt="Test Caption - Image 3">
    </div>  
<script>
var modal = document.getElementById("myModal");

var img = document.getElementsByClassName("myImg");
var modalImg = document.getElementById("modalImg");
var captionText = document.getElementById("caption");

    for(i=0;i<img.length;i++){    
        img[i].onclick = function(){
        modal.style.display = "block";
        modalImg.src = this.src;
        captionText.innerHTML = this.alt;
        }
    }
var span = document.getElementsByClassName("close")[0];
span.onclick = function(){ 
    modal.style.display = "none";
}
</script>   
</body>
</html>

虽然我涉猎过HTML和CSS，但我必须承认我对JavaScript还是非常熟悉，我根本无法理解这一点。我想知道我所寻找的是否可以使用w3的字幕方法，或者我是否应该寻找另一种方法将字幕添加到我的模态图像中。

共有1个答案

龙焱

2023-03-14

一种方法是使用caption div作为标题，而不是使用图像的alt。这样，您就可以使标题与通常的a标签链接。（这很可能不是唯一的方法，但我认为这是最简单的方法）

<!DOCTYPE html>
<html lang="en-US">
<html>
<head>
<meta charset="utf-8">
<title>Modal Testing</title>
<link rel="stylesheet" type="text/css" href="">
<style>
body{font-family: Arial, Helvetica, sans-serif;}
.gallery img{
    opacity: 1;
    -webkit-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}
.gallery img:hover{
    opacity: .5;
    cursor: pointer;
}
.modal{
    display: none;
    position: fixed; 
    z-index: 1; 
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; 
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.8);
}
.modal-content{
    margin: auto;
    display: block;
    max-width: 700px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
#caption{
    margin: auto;
    display: block;
    width: 80%;
    max-width: 60%;
    text-align: center;
    position: absolute;
    left: 20%;
    bottom: 10%;
    color: #ffffff;
    /*background-color:#ffffff;*/
}
.close{
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  transition: 0.3s;
}
.close:hover,
.close:focus{
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}
</style>
</head>
<body>
    <!-- The Modal -->
    <div id="myModal" class="modal">
        <span class="close">&times;</span>
        <img class="modal-content" id="modalImg">
        <div id="caption">Your Caption <a href="#">Link</a></div>
    </div>
    <!-- The Gallery -->
    <div class="gallery">
        <img class="myImg" src="https://via.placeholder.com/500x500" alt="Test Caption - Image 1">
        <img class="myImg" src="https://via.placeholder.com/400x500" alt="Test Caption - Image 2">
        <img class="myImg" src="https://via.placeholder.com/500x400" alt="Test Caption - Image 3">
    </div>  
<script>
var modal = document.getElementById("myModal");

var img = document.getElementsByClassName("myImg");
var modalImg = document.getElementById("modalImg");
var captionText = document.getElementById("caption");

    for(i=0;i<img.length;i++){    
        img[i].onclick = function(){
        modal.style.display = "block";
        modalImg.src = this.src;
        }
    }
var span = document.getElementsByClassName("close")[0];
span.onclick = function(){ 
    modal.style.display = "none";
}
</script>   
</body>
</html>

类似资料：

如何将图标转换为图像

问题内容：我正在尝试使用以下代码将Icon（）转换为Image（）：问题是，函数在上抛出。对于记录，该值为默认图标（通过获取）以下是引发异常的详细信息：如果您需要更多详细信息，请告诉我，我将编辑我的信息以添加它们。谢谢！问题答案：刚刚找到了一个代码段，如果您想更频繁地包装那些表现不佳的LAF提供的图标，可能会有所帮助：要在您的代码段中使用，只需传递任意组件：
如何将UIView转换为图像

问题内容：我想将UIView转换为图像并将其保存在我的应用程序中。有人可以告诉我如何拍摄视图的屏幕截图或将其转换为图像，以及将其保存在应用程序（而不是相机胶卷）中的最佳方法是什么？这是该视图的代码：问题答案：例如，如果我有一个尺寸视图：100 100时50 50。我可以使用以下屏幕截图：
如何将JSON模式转换为mongoose模式

对我来说，这似乎是如此基本和简单，但我在网上没有找到任何东西。有许多关于如何获得JSON模式的示例，也有许多如何从以下对象创建mongoose模式的示例: 如果我试图直接放置JSON模式，我会得到一个错误但是我在网上找不到从一种类型到另一种类型的转移。以前有人有这个问题吗？
如何将图像转换为base64编码？

问题内容：您能否指导我如何将图像从URL转换为base64编码？问题答案：我认为应该是：
如何将字符串转换为图像？

问题内容：一周前，我开始学习python，并希望编写一个小程序将电子邮件转换为图像（.png），以便可以在论坛上共享它，而不必冒大量垃圾邮件的风险。似乎python标准库不包含可以执行此操作的模块，但我发现有一个适用于此的模块（）。我的问题是我似乎无法正常工作。所以基本上我的问题是：如何在图像上绘制文本。如何创建空白（白色）图像有没有一种方法可以在不实际创建文件的情况下执行此操作，以
将JPanel转换为图像

问题内容：有没有一种方法可以将JPanel（尚未显示）转换为BufferedImage？谢谢，杰夫问题答案：在BufferedImage中，您可以创建一个图形对象，可用于在JPanel上调用画图，如下所示：您可能需要确保首先设置面板的尺寸。

如何将模式图像的标题转换为链接？

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档