How can I display rendered HTML content when I hover over an image. For instance
<img src="test.jpg" onmouseover="show('<b>This is bold text</b>')" onmouseout="hidetext()" />
I would like the content to follow my mouse as it hovers as well. With the code I have for some reason the hover over html tends to blink as I move the mouse over. Any ideas why this is happening? Seems to be smoother in some browsers like Chrome and FF but IE is way choppy.
Example: torhead/items put your mouse over any of the items
How can I display rendered HTML content when I hover over an image. For instance
<img src="test.jpg" onmouseover="show('<b>This is bold text</b>')" onmouseout="hidetext()" />
I would like the content to follow my mouse as it hovers as well. With the code I have for some reason the hover over html tends to blink as I move the mouse over. Any ideas why this is happening? Seems to be smoother in some browsers like Chrome and FF but IE is way choppy.
Example: torhead./items put your mouse over any of the items
Share Improve this question edited May 4, 2012 at 6:07 user1130861 asked Jan 8, 2012 at 8:43 user1130861user1130861 454 silver badges12 bronze badges 1- 3 Do you have any more idea of what you want? Can you describe what you mean a little better? Do you mean you want some HTML element hovering and covering the image? Or just something arbitrarily appearing on the page? – Andrew Jackman Commented Jan 8, 2012 at 8:47
4 Answers
Reset to default 6Any number of ways. Here's one off the top of my sleep-deprived head:
<img src="test.jpg" class="hastooltip" />
<div>
This is the HTML content to show when the image is moused over.
It will appear just to the bottom-right of the image (though this can be changed)
</div>
Then in your stylesheet:
.hastooltip + div {
display: none;
position: absolute;
/* margin-left: -100px; margin-top: -50px;
Adjust and un-ment these margins to move the tooltip */
border: 1px solid black;
background-color: white;
}
.hastooltip:hover + div, .hastooltip + div:hover { display: block; }
Bingo. No JavaScript required ;)
Are you looking to just display a tooltip? In that case, a "title" attribute would be sufficient:
<img src="test.jpg" title="<html></html" />
You can use a jQuery plugin like these here: http://sixrevisions./resources/14-jquery-plugins-for-working-with-images/
This should give you what you want, with the tooltip moving with the mouse cursor:
<script type="text/javascript">
function showTooltip(e, tooltip)
{
e = window.event ? window.event : e;
tooltip = document.getElementById(tooltip);
if(tooltip.style.display != "block")
tooltip.style.display = "block";
tooltip.style.left = event.clientX + "px";
tooltip.style.top = event.clientY + "px";
}
function hideTooltip(e, tooltip)
{
e = window.event ? window.event : e;
tooltip = document.getElementById(tooltip);
if(e.toElement == tooltip)
{
showTooltip(e, tooltip);
return;
}
tooltip.style.display = "none";
}
</script>
<div>
<img alt="" src="https://www.google./intl/en_/images/srpr/logo3w.png" class="hastooltip" onmousemove="showTooltip(event, 'dvTooltip');" onmouseout="hideTooltip(event, 'dvTooltip');" />
<div id="dvTooltip" style="display:none;position:absolute;background-color:#fff;" onmousemove="showTooltip(event, 'dvTooltip');">
This <b>is</b> <i>HTML</i>.
</div>
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744190553a4562414.html
评论列表（0条）