Page MenuHomePhabricator

Page Preview should also work when hovering links of an image map (timeline, map, organigram)
Open, MediumPublicFeature

Description

Reproduction

  1. User Preferences > Appearance > Enable page previews (get quick previews of a topic while reading a page) is activated.
  2. Go to an article with an image map, i.e. https://en.wikipedia.org/wiki/History_of_video_game_consoles#Console_generations
  3. Hover over a text link on the image map, i.e. SNES

Actual

  • It only shows a normal web browser tooltip "Super Nintendo Entertainment System" (alt attribute of area tag inside map tag)

MediaWiki image map link 2 with tooltip with full name.png (800×1 px, 224 KB)
MediaWiki image map link 1 with tooltip.png (800×1 px, 221 KB)

Proposed

  • It shows a page preview like when hovering links elsewhere in the article.

MediaWiki inline link 2 with page preview .png (800×1 px, 310 KB)
MediaWiki inline link 1 with page preview .png (800×1 px, 298 KB)

UX Design Rationale

  • That way you get the preview while stying in the dense context of an image map (timeline, map, organigram)
  • You get the best of both worlds: Dense information in the image map, and a quick lookup info, often helpful to distinguish the many elements on an image map.

Event Timeline

The example link above does not use an <imagemap> but a <timeline>; updating project tags accordingly.

Jdlrobson added subscribers: ovasileva, Jdlrobson.

@ovasileva I think this would be a simple change inside Popups extension as area's do have the href attribute, so Popups could be updated to watch for hovers on them [1]
However, I should note imagemap's are not (and cannot be made) mobile friendly, so I wouldn't recommend giving editors more reasons to use them, personally.

[1]

$('area').on('mouseover',(ev)=> console.log('hovering', ev.target.getAttribute('href')))
ovasileva triaged this task as Medium priority.Feb 8 2022, 3:22 PM
ovasileva moved this task from Not ready to estimate to Groomed on the Web-Team-Backlog board.
ovasileva added a subscriber: alexhollender_WMF.

@ovasileva I think this would be a simple change inside Popups extension as area's do have the href attribute, so Popups could be updated to watch for hovers on them [1]
However, I should note imagemap's are not (and cannot be made) mobile friendly, so I wouldn't recommend giving editors more reasons to use them, personally.

[1]

$('area').on('mouseover',(ev)=> console.log('hovering', ev.target.getAttribute('href')))

Discussed this with @alexhollender_WMF and we decided to go forward with the change for reasons of consistency. That said, not high priority for right now

Glad that you decided for consistency and a richer experience for users!

  1. I think that there is enough existing imagemap content that will benefit greatly from this.
    • So even though that you say there's no mobile friendly future for this imagemap implementation the benefit will be noticeable!
  2. Is there a mobile friendly way to create timelines, maps, organigrams for editors? Which one?
    • When you roll out the improvement of this issue, please ensure that change notes and related editing guidlines mention which content-type is recommended with what compatibility/pro/cons.