Re: [Gimp-user] Adding Hotspots

[Steve Kinney <admin pilobilus net>]

> > I want to add hotspots to my drawing where I can hover the mouse over an
> item and while it is there some additional information will pop up nearby
>
> This is different than an image rollover, which is more of what is being
> described in your link.  Technically you _could_ create a text area near an
> image that could show different text varying based on context of mouse
> position (possibly triggered through :hover, :focus, or :blur events).  But
> that's outside the scope of what OP was asking for I think.  At least in
> the context of an image editing program.
>
> tldr; sure you can do this - pick a programming language or
> html/css/possibly-js combination and augment your image in that way.
> Images themselves don't do this normally.

I have never done this exact thing, but if I had to I would start by
trying this:

Make a CSS div the size of your image, and set that image as its
background; position this div wherever you want on the page.  Inside
this, position one or more CSS divs, containing your desired text as the
visible part of a hyperlink.  Style and position the hyperlink text in
the css code.  Now hide the hyperlink, by adding visibility: none to the
css .  Make a copy of the CSS code for the (now hidden) overlay text,
replace the "a" selector in your rule set's ID with a:hover (a so-called
pseudo class), and delete the line that says visibility: none.  This
brings back the formatting you did earlier, but only when the mouse
pointer is over the div where the text is displayed.

You can remove the underline or other "link styling", get the color,
font weight & etc. you want, /and/ make your text a real hyperlink to
other content if so desired.

The bit that makes the text appear and disappear would look like this,
in the example the text is big, bold, white, and centered in its div:

xhtml (replacing angle brackets with square ones to avoid rendering in
HTML aware mail clients}:

[div class="hovertext"][a href="#"]Hello World[/a][/div]

css:

.hovertext a {
        text-decoration: none;
        font-family: Arial, Helvetica, Sans;
        text-align: center;
        font-size: 1.25;
        font-weight: 700;
        color: #fff;
        display: none;
}

.hovertext a:hover {
        text-decoration: none;
        font-family: Arial, Helvetica, Sans;
        text-align: center;
        font-size: 1.25;
        font-weight: 700;
        color: #fff;
}

The CSS giveth, the CSS taketh away.  Positioning, border if any, etc.
not included.

This code is Void where prohibited.  Your mileage may vary.  I just
pulled this out of [ahem!] so it may include stupid, obvious mistakes.

:o)