-2

I want to display an image when i rollover an text... like the "title" attribute in a small box at the mousepointer...

It should work without big extras or additional installations.

Thanks for the help!

VACmeister
  • 5
  • 2
  • Could you give more detailed explanation and add the code which you have tried!? – Ruthvik Nov 28 '21 at 12:28
  • Kindly don't expect the complete work from others. Show the code which you have tried and specify the issue which you are facing and looking help for. – Shyam Joshi Nov 28 '21 at 12:37
  • Unfortunatly i am not very expierienced.... i have tried it with "title" `Castrol EDGE 5W-30 LL` but it does not display the image but the path. i don't know how I should give further information because i don't know what else could be neccasary... – VACmeister Nov 28 '21 at 13:27
  • By 'rollover' do you mean 'hover' (ie the cursor 'resting' on the text at least for a little while, not rolling over it, in and out, at speed)? Have you looked at either CSS hover or Javascript mouse events? It looks as though you are wanting to implement a tooltip which has an image? Is that right? – A Haworth Nov 28 '21 at 14:17
  • I'll suggest to read some tutorials about how css and html woks. For example to see an image you have to use an tag – Sfili_81 Dec 02 '21 at 15:05
  • Yeah i ment "hover", but anyway i think you all know if you hover above a text, sometimes a box with content in it apears... (example if you hover above the flag symbol next to the comments, the box i mean appears)... i want to have a picture in it... and i know that you need to use tags for images, but it is not suitabel for my problem... – VACmeister Dec 05 '21 at 11:12

1 Answers1

1

The title attribute when hovered shows the text, not interpreted HTML.

One way you can show an image when the cell is hovered is to have the image sitting in the cell all the time but starting off with display: none.

With CSS you can set a different style when it is hovered, its child img element can be shown then and in this snippet it is shown with absolute positioning so it does not move adjacent elements.

This is just a start to give some ideas of how to get going on this. Obviously you will want to play with size and positioning of the tooltip to suit your use case. For example, is this text definitely within a table cell or just a div somewhere?

td img {
  display: none;
}

td:hover img {
  display: inline-block;
  position: absolute;
  z-index: 1;
}
<table>
  <tr>
    <td colspan="3">Castrol EDGE 5W-30 LL<img src="https://i.stack.imgur.com/63PQA.jpg"></td>
  </tr>
</table>
A Haworth
  • 30,908
  • 4
  • 11
  • 14