CODEWITHSUNDEEP
javascriptjqueryhtmlimage
new_newB1e
new_newB1e

Reputation: 155

Mouse hover on image parts show hints

I have an html page with simple, static image like this : Image

I need a way that putting mouse (hover) on any object, for example - "BED" to get a tooltip that - "There is bed".

I know how hover works at pure html, with blocks or any teg, but I need a way of doing/tracking the user cursor, and when it enters in specific zone, to show the hint. Probably some JS required. How can I setup this unknown geometric forms with their coordinates to achieve my goal?

Upvotes: 0

Views: 311

Answers (2)

Nicky Kouffeld
Nicky Kouffeld

Reputation: 381

In addition of the prev answer you can also add this jQuery to your page. It makes the tooltip show more prominent and also quicker:

$( function() {
  $( document ).tooltip();
} );

This native jQuery function uses the 'title' attribute! Don't forget to add these like this:

<img title='This is a test!!' src='test.png'>

Upvotes: 1

Kresimir Pendic
Kresimir Pendic

Reputation: 3614

No JS script needed :)

You can use image maps .. they are old but should work as you expected.. you can run it and see title when you hover over kitchen and bad

I used this webpage to 'generate' rectangles and area over the image or hotsports..

<img src="https://www.edrawsoft.com/symbols/simple-home-floorplan.png" usemap="#image-map">

<map name="image-map">
    <area target="" alt="This is bad" title="This is bad" href="" coords="520,132,451,48" shape="rect">
    <area target="" alt="This is kitchen" title="This is kitchen" href="" coords="343,204,254,55" shape="rect">
</map>

Upvotes: 2

Related Questions