悬停在图像上的文本

Question

        <a href="xxx.php" ><img src="<?php echo $_SESSION['picture'] ?>" id="ppicture"></img></a>

我希望它能在其上播放一个文本，例如编辑此图片。 我想到了css上的背景图像，但这是不可能的，因为我从mysql调用图像并将位置存储在$ _SESSION中，如您所见。 我很感激任何帮助。

EG。 http://tympanus.net/crop1.1/如果您将鼠标悬停在图像上，则会出现一支铅笔。我想要文字出现

而不是铅笔

Answer 1

在title="The text you want"上放置<img/>属性。

<a href="xxx.php" ><img src="<?php echo $_SESSION['picture'] ?>" id="ppicture" title="Your text" /></a>

或者，您可以使用JavaScript来显示样式化工具提示。如果您更喜欢这条路线，我建议使用jQuery和qTip插件。

Answer 2

这可以使用css定位轻松完成：

（1）创建一个div标签，作为图像和文本的容器。在文本周围添加一个p标记。

（2）添加位置：相对于刚创建的div：

#div-name {
    position: relative;
}

（3）为相对于div定位它的文本添加新样式：

#div-name p {
    position: absolute;
    width: 168px;
    left: 10px;
    bottom: 10px;
    background-color: #AAA;
}

你现在应该在你的照片上有一个标题。我将样式留给您，您可能需要考虑使用JQuery使您的编辑标签显示在悬停状态。

Answer 3

你能不能只使用title属性？

<img ... title="Edit This Picture" />

Answer 4

我不确定我是否完全理解你的问题，但也许这就是你要找的东西。

使用img标签的title属性，您可以使用悬停文本

<a href="xxx.php" ><img src="<?php echo $_SESSION['picture'] ?>" id="ppicture" title="Edit this picture"></img></a>