Question

这是代码，有点乱，在得到答案之后要修复它。

<table>
    <tr>
        <td>
            <a href="" onmouseover="document.getElementById('place-holder-1').src='graphics/websites/labyrinth/labyrintharrow1.png';" onmouseout="document.getElementById('place-holder-1').src='';"> 
                website screenshot service 
                <img src="" id="place-holder-1" style="zindex: 100; position: absolute;" />
            </a>
        </td>
    </tr>
</table>

这是一个现场演示：http://jsfiddle.net/Lrnvrdub/

感谢您的帮助，非常感谢。

编辑：所有的回复都非常有效，但是当我尝试调整图像的大小时，我尝试使用css和html，当链接没有悬停时，空白的正方形位于图像的位置。

以下是一个示例：http://jsfiddle.net/csewukgs/

Answer 1

删除内联样式并添加此

a img{float:left}

你可能也希望增加一些余量，但你会明白这个想法

注意：为这个img提供一个类是个好主意，所以你不必是这个通用的。喜欢

.bullet{float:left}

HTML

<img class="bullet" src="uyourimage" id="place-holder-1"  />

Answer 2

Fabio坚定答案的另一个选择是使用背景图像。

<a class="bullet" href="">Answer1</a>
<a class="bullet" href="">Answer2</a>

.bullet {
    background: url("path/to/image.png") no-repeat 0 50%;
    padding-left: 18px;  //width of image, plus some extra spacing
}

好处是，如果您有链接列表，则无需为每个链接添加img元素。

有一点需要注意，如果图片是非装饰性的并且实际上传达了一些重要内容，请使用具有相应img属性的title元素，这对屏幕阅读器用户很有帮助。

<a class="bullet" href="">Answer1 <img src="..." title="The correct answer"></a>

// use Fabio's float:left solution

Answer 3

这是我的解决方案：http://jsfiddle.net/1Latpnzn/2/

它假定您要将文本向右移动以为图像腾出空间。通过将占位符设置为如下：

#place-holder-1 {
    display: inline-block;
    vertical-align: middle;
}

重新排序html：

<a href="" id="hover-link">
    <img id="place-holder-1" />
    <span>Answer1</span>
</a>

并删除position: absolute;图片可以放在文字的左侧。

Answer 4

如果您可以将位置从绝对块更改为内联块并在“answer 1”文本之前移动图像，并使其与文本对齐，则可以添加vertial-align：bottom style < / p>

<a href=""
  onmouseover="document.getElementById('place-holder-1').src='graphics/websites/labyrinth/labyrintharrow1.png';"
  onmouseout="document.getElementById('place-holder-1').src='';">
  <img src="" id="place-holder-1" style="zindex: 100; position: inline-block; vertical-align:bottom" />
      Answer1
</a>

我怎么能把箭头图像放在＆＃34; answer1＆＃34;的左边？

4 个答案: