RSS/Atom feed Twitter
Site is read-only, email is disabled

Adding Hotspots

This discussion is connected to the gimp-user-list.gnome.org mailing list which is provided by the GIMP developers and not related to gimpusers.com.

This is a read-only list on gimpusers.com so this discussion thread is read-only, too.

9 of 9 messages available
Toggle history

Please log in to manage your subscriptions.

Adding Hotspots DavidWW 20 Jun 04:56
  Adding Hotspots Pat David 20 Jun 16:55
   Adding Hotspots Joao S. O. Bueno 20 Jun 18:15
    Adding Hotspots Elle Stone 20 Jun 18:32
     Adding Hotspots Pat David 20 Jun 20:18
      Adding Hotspots Elle Stone 20 Jun 20:31
       Adding Hotspots Christian Mandel 21 Jun 06:59
      Adding Hotspots Steve Kinney 20 Jun 20:56
  Adding Hotspots Liam R. E. Quin 20 Jun 20:47
2016-06-20 04:56:08 UTC (almost 8 years ago)
postings
1

Adding Hotspots

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. I have found information about creating image maps with Gimp but it has all been about creating hyperlinks that jump to a website when one clicks on part of the picture. There has been nothing about how to just get information to pop up on the screen when a mapped portion of the picture is clicked.

Is there any way to info (text box) to display on the image when I hold or click the mouse on a relevant portion of the picture??

Pat David
2016-06-20 16:55:05 UTC (almost 8 years ago)

Adding Hotspots

No - this is not a function of any image formats usually without the intervention of some further software. Images don't normally do this (and probably shouldn't on their own, imo).

On Mon, Jun 20, 2016 at 11:50 AM DavidWW wrote:

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. I have
found information about creating image maps with Gimp but it has all been about
creating hyperlinks that jump to a website when one clicks on part of the picture. There has been nothing about how to just get information to pop up on
the screen when a mapped portion of the picture is clicked.

Is there any way to info (text box) to display on the image when I hold or click
the mouse on a relevant portion of the picture??

-- DavidWW (via www.gimpusers.com/forums) _______________________________________________ gimp-user-list mailing list
List address: gimp-user-list@gnome.org List membership: https://mail.gnome.org/mailman/listinfo/gimp-user-list List archives: https://mail.gnome.org/archives/gimp-user-list

Pat David
https://pixls.us
http://blog.patdavid.net
Joao S. O. Bueno
2016-06-20 18:15:15 UTC (almost 8 years ago)

Adding Hotspots

actually, if you as much as create image maps, and replcae the relevant URLs by javascript URLs you should get as close as waht you wanta s possible.

Of course, images on themselves do not perform any action - actions are all performed by the viewer program. Few programas will be more feature-rich than a browser anyway.

Just beware the "image map" thing is an arcane html constrcut from the 90's - I am not sure it even works in a modern html5 borwser, but if it does, replacing the link targets with javascript actions should work just fine.

On 20 June 2016 at 13:55, Pat David wrote:

No - this is not a function of any image formats usually without the intervention of some further software. Images don't normally do this (and probably shouldn't on their own, imo).

On Mon, Jun 20, 2016 at 11:50 AM DavidWW wrote:

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. I have
found information about creating image maps with Gimp but it has all been about
creating hyperlinks that jump to a website when one clicks on part of the picture. There has been nothing about how to just get information to pop up on
the screen when a mapped portion of the picture is clicked.

Is there any way to info (text box) to display on the image when I hold or click
the mouse on a relevant portion of the picture??

-- DavidWW (via www.gimpusers.com/forums) _______________________________________________ gimp-user-list mailing list
List address: gimp-user-list@gnome.org List membership: https://mail.gnome.org/mailman/listinfo/gimp-user-list List archives: https://mail.gnome.org/archives/gimp-user-list

--
Pat David
https://pixls.us
http://blog.patdavid.net
_______________________________________________ gimp-user-list mailing list
List address: gimp-user-list@gnome.org List membership: https://mail.gnome.org/mailman/listinfo/gimp-user-list List archives: https://mail.gnome.org/archives/gimp-user-list

Elle Stone
2016-06-20 18:32:34 UTC (almost 8 years ago)

Adding Hotspots

You can do "on hover text" without using javascript. Do an internet search on keywords such as: css image on hover text

For example using css3: http://geekgirllife.com/place-text-over-images-on-hover-without-javascript/

There are also quite a few tutorials on the internet using css2.

On 06/20/2016 02:15 PM, Joao S. O. Bueno wrote:

actually, if you as much as create image maps, and replcae the relevant URLs by javascript URLs you should get as close as waht you wanta s possible.

Of course, images on themselves do not perform any action - actions are all performed by the viewer program. Few programas will be more feature-rich than a browser anyway.

Just beware the "image map" thing is an arcane html constrcut from the 90's - I am not sure it even works in a modern html5 borwser, but if it does, replacing the link targets with javascript actions should work just fine.

On hover text isn't necessarily arcane or outdated. It can be a nice way to preset text information.

Best, Elle

http://ninedegreesbelow.com
Color management and free/libre photography
Pat David
2016-06-20 20:18:03 UTC (almost 8 years ago)

Adding Hotspots

On Mon, Jun 20, 2016 at 1:28 PM Elle Stone wrote:

You can do "on hover text" without using javascript. Do an internet search on keywords such as: css image on hover text

For example using css3: http://geekgirllife.com/place-text-over-images-on-hover-without-javascript/

Except I think the OP was asking about regional hover areas on an image overlaying information:

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.

Pat David
https://pixls.us
http://blog.patdavid.net
Elle Stone
2016-06-20 20:31:04 UTC (almost 8 years ago)

Adding Hotspots

On 06/20/2016 04:18 PM, Pat David wrote:

On Mon, Jun 20, 2016 at 1:28 PM Elle Stone >
wrote:

You can do "on hover text" without using javascript. Do an internet search on keywords such as: css image on hover text

For example using css3: http://geekgirllife.com/place-text-over-images-on-hover-without-javascript/

Except I think the OP was asking about regional hover areas on an image overlaying information:

> 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

I think this is closer to what the op is looking for (I remember this link from trying to do something similar awhile back):

http://green-beast.com/experiments/css_map_pop.php

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.

What the OP wants isn't part of any imaging program that I'm aware of.

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.

Best,
Elle

Liam R. E. Quin
2016-06-20 20:47:15 UTC (almost 8 years ago)

Adding Hotspots

On Mon, 2016-06-20 at 06:56 +0200, DavidWW wrote:

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.

I'm going to assume you mean you want this to happen in a Web browser rather than in GIMP.

One way is to use SVG for your image (you can include a bitmap); you can then either have text that appears only on a hover in a specific region (with :hover) or you can use "tooltips", although those can't easily contain complex formatting. To use SVG, when you're done with the bitmap image, load it into Inkscape.

Without knowing more about what you're doing it's hard to go further with suggestions.

Best,

Liam

Liam R. E. Quin 
World Wide Web Consortium - the organization responsible for the Web
Steve Kinney
2016-06-20 20:56:16 UTC (almost 8 years ago)

Adding Hotspots

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)

Christian Mandel
2016-06-21 06:59:37 UTC (almost 8 years ago)

Adding Hotspots

Am 20.06.2016 um 22:31 schrieb Elle Stone:

On 06/20/2016 04:18 PM, Pat David wrote:

[...]

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.

What the OP wants isn't part of any imaging program that I'm aware of.

The picture in
https://inkscape.org/de/~doctormo/%E2%98%85inkscape-hackfest-2016-group-photo is an SVG image embedded in a website. The SVG includes the photo as well, and in the embedding HTML there is a proper style defined (in the resource.css file), with the SVG elements tagged with this style information. Maybe this helps the OP.

Best regards

Chris

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.

Best,
Elle

_______________________________________________ gimp-user-list mailing list
List address: gimp-user-list@gnome.org List membership: https://mail.gnome.org/mailman/listinfo/gimp-user-list List archives: https://mail.gnome.org/archives/gimp-user-list