如何使用dotnetnuke在图像上叠加锚点 [英] How do I overlay an anchor on top of an image using dotnetnuke

问题描述

我试图编辑一个DotNetNuke网页，并且我有一张需要显示的图像。在图片的顶部，我想放置一个锚点。麻烦的是，我不希望整个图像可点击，只是锚点，我似乎无法让它工作。

另外，因为它是一个DNN网站，所以我不确定我是否可以编辑CSS，所以我希望找到一个纯html的解决方案。我尝试了各种各样的组合，但没有一个似乎起作用。谢谢

以下是我测试的html：

 < div class =c_head h2_title_container> 
  
< br>< / br> 
 
< p class =team_biostyle =text-align：justify;>< span style =font-size：16px;>这是我的测试文字。 ; /跨度> 
< / p> 
< / div> 
  

解决方案

您应该可以将父元素设置为 position：relative ，然后添加你的anchor的父元素：

 < ; div class =c_head h2_title_containerstyle =position：relative;> 
< img ...>< / img> 
 
< div style =... position：absolute; top：20px; left：30px;> 
< a href =...target =_ top> ...< / a> 
< / div> 
 
 ... 
< / div> 
  

I'm trying to edit a DotNetNuke webpage and I have an image that I need to display. On TOP of the image, I'd like to place an anchor. The trouble is that I don't want the entire image to be clickable, JUST the anchor, and I can't seem to get it to work.

Additionally, because it's a DNN site I'm not sure if I can edit the CSS, so I'm hoping for a solution that's pure html. I've tried all sorts of combinations but none of them seemed to work. Thanks

Below is my test html:

<div class="c_head h2_title_container">
    <img alt="" width="600" height="151" style="width: 356px; height: 101px;" src="/portals/224/img/blue-arrow-small.png"></img><span style="font-size:     18px;"><a href="mailto:[e-mail]?" target="_top"><strong>Name Goes Here</strong></a></span>

    <br></br>

    <p class="team_bio" style="text-align: justify;"><span style="font-size: 16px;">Here is my test text.</span>
    </p>
</div>

解决方案

You should be able to set the parent element to position: relative, then add your anchor's parent element positioned absolutely:

<div class="c_head h2_title_container" style="position: relative;">
    <img ...></img>

    <div style="... position: absolute; top: 20px; left: 30px;">
        <a href="..." target="_top">...</a>
    </div>

    ...
</div>

这篇关于如何使用dotnetnuke在图像上叠加锚点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！