Creating tooltips on mouse hover

  • Advertisement ( why? )
     

    Marcelx, 4th Jul 2013 10:59 am

    Hi,

    I am looking for the right tool to create HTML pages on my personal desktop. Navigating between the pages is done outside the tool. Only after everything works on my own desktop, I want to publish it on a website.

    What I want with these HTML pages is to provide information on products. This starts with a photograph that will be included in the HTML page as a picture.

    So let's say I take a photo that shows 3 flowers: a red one, a blue one and a pink one. I want extra information popping up if the mouse hovers above a certain part of the picture. If the mouse hovers over the red flower, a pop up / tooltip must come with the text 'This is a red flower'. If the mouse hovers over the blue flower, a pop up / tooltip must come with the text 'This is a blue flower'. If the mouse hovers over the pink flower, a pop up / tooltip must come with the text 'This is a pink flower'.
    This can be done by adding the title attribute in HTML. For example: 'title = "This is a red flower" '

    The only thing is: I must create invisible images on top of specific areas of the picture showing the three flowers. In this example: three invisible images must be put over the area's showing the red flower, the blue flower and the pink flower.
    Once these invisible images are created, the title attribute can be added to these invisible images in the HTML code. No problem.

    So I need a tool that helps me create WYSIWYG these invisible images on top of the visible image over a specific area of the picture. Can I do this in HTML kit or is there a tool that I can use next to HTML kit to do this. Or is there another approach that works better for creating tooltips.

    I can create these invisible images in MS Publisher and in MS Word. But there are other reasons why these tools are not usefull.

    Thanks, Marcel

    • Dave P, 4th Jul 2013 12:02 pm

      This post has been deleted by the author.

    • HTML-Kit Support, 5th Jul 2013 6:33 pm

      On 7/4/2013 11:59 AM, Marcelx wrote:

      Hi,

      I am looking for the right tool to create HTML pages on my personal desktop. Navigating between the pages is done outside the tool. Only after everything works on my own desktop, I want to publish it on a website.

      What I want with these HTML pages is to provide information on products. This starts with a photograph that will be included in the HTML page as a picture.

      So let's say I take a photo that shows 3 flowers: a red one, a blue one and a pink one. I want extra information popping up if the mouse hovers above a certain part of the picture. If the mouse hovers over the red flower, a pop up / tooltip must come with the text 'This is a red flower'. If the mouse hovers over the blue flower, a pop up / tooltip must come with the text 'This is a blue flower'. If the mouse hovers over the pink flower, a pop up / tooltip must come with the text 'This is a pink flower'.
      This can be done by adding the title attribute in HTML. For example: 'title = "This is a red flower" '

      The only thing is: I must create invisible images on top of specific areas of the picture showing the three flowers. In this example: three invisible images must be put over the area's showing the red flower, the blue flower and the pink flower.
      Once these invisible images are created, the title attribute can be added to these invisible images in the HTML code. No problem.

      So I need a tool that helps me create WYSIWYG these invisible images on top of the visible image over a specific area of the picture. Can I do this in HTML kit or is there a tool that I can use next to HTML kit to do this. Or is there another approach that works better for creating tooltips.

      I can create these invisible images in MS Publisher and in MS Word. But there are other reasons why these tools are not usefull.

      Thanks, Marcel
      .

      I would use image mapping for this, instead f trying to use separate
      invisible images. Google "image mapping". There are a lot of tutorials
      for mapped images. Also, there are a lot of free dedicated image
      mapping programs.
      Dave Pyles

      • Marcelx, 8th Jul 2013 4:08 pm

        On 7/4/2013 10:59 AM, Marcelx wrote:

        Hi,

        I am looking for the right tool to create HTML pages on my personal
        desktop. Navigating between the pages is done outside the tool. Only
        after everything works on my own desktop, I want to publish it on a
        website.

        What I want with these HTML pages is to provide information on
        products. This starts with a photograph that will be included in the
        HTML page as a picture.

        So let's say I take a photo that shows 3 flowers: a red one, a blue
        one and a pink one. I want extra information popping up if the mouse
        hovers above a certain part of the picture. If the mouse hovers over
        the red flower, a pop up / tooltip must come with the text 'This is a
        red flower'. If the mouse hovers over the blue flower, a pop up /
        tooltip must come with the text 'This is a blue flower'. If the
        mouse hovers over the pink flower, a pop up / tooltip must come with
        the text 'This is a pink flower'. This can be done by adding the
        title attribute in HTML. For example: 'title = "This is a red flower"
        '

        The only thing is: I must create invisible images on top of specific
        areas of the picture showing the three flowers. In this example:
        three invisible images must be put over the area's showing the red
        flower, the blue flower and the pink flower. Once these invisible
        images are created, the title attribute can be added to these
        invisible images in the HTML code. No problem.

        So I need a tool that helps me create WYSIWYG these invisible images
        on top of the visible image over a specific area of the picture. Can
        I do this in HTML kit or is there a tool that I can use next to HTML
        kit to do this. Or is there another approach that works better for
        creating tooltips.

        I can create these invisible images in MS Publisher and in MS Word.
        But there are other reasons why these tools are not usefull.

        Thanks, Marcel .

        Hi Marcel,

        I agree with Dave's suggestion of using image maps. Those text hints may
        not work the same way in every browser though so you may have to add
        some JavaScript to the mix.

        Chami

        • Dave P, 8th Jul 2013 5:17 pm

          Many thanks. I did not know about image mapping. But now, I got myself an image mapping tool and that does the trick. Thanks Dave!