how do i hover over an image and add text?

  • 1
  • Question
  • Updated 5 years ago
  • Answered
If i have images of products and people hover oveer them I want them to be able to read some text about the image, how do I do this? I have Yola Silver, Thanks in advance for your help

Lauren
Photo of lauren scott

lauren scott

  • 9 Posts
  • 0 Reply Likes

Posted 7 years ago

  • 1
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi Lauren,

There are a few options to do this but basically they manipulate the Title tag.

Here's an example in a very straight forward form: <img src="cafeteria.jpg" height="200" width="200" title="The ultra efficient cafeteria design at a new railway station"> which will render the jpg image named cafeteria.jpg. It will have the dimensions of 200 x 200 pixels and when hovered over will display the text title .

There are other variations of this which allow for styling of the display and repositioning of the displayed title text. These are generically called tooltips and are easily found by web-search
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello Lauren

Adding to Gop's reply: You cannot add a title attribute to a Picture Widget, but you can do it in an HTML widget (then you would use Gop's solution).

And you can add it to the HTML source code of a Text Widget. Here are the steps:
  1. Click into the Text Widget where you have added a picture.

  2. Above you will see the Text Editing Toolbar. Click on the blue HTML icon.

  3. The HTML editor of the Text Widget opens. Search for the code snippet that contains your image. This will start with <img ... as in Gop's code. Add the title attribute into that img tag as you can see it in Gop's code.

  4. Save your changes by clicking on "OK".

  5. Check in Preview if it works.
Photo of Tobiasimage

Tobiasimage

  • 2 Posts
  • 0 Reply Likes
Hi, did you mena that you wanna add some text to a target image like a annotation or highlight thing? If so, I suggest you add an image annotating control on your VS application and send your target to the image annotator to add a text mark.

http://www.rasteredge.com/dotnet-imag...