Page MenuHomePhabricator
Create Task
Maniphest T298833

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

Assigned To
None
Authored By
PutzfetzenORG
Jan 8 2022, 3:51 PM
Project Tags
Referenced Files
F34911435: MediaWiki inline link 1 with page preview .png
Jan 8 2022, 3:51 PM
F34911433: MediaWiki image map link 2 with tooltip with full name.png
Jan 8 2022, 3:51 PM
F34911436: MediaWiki inline link 2 with page preview .png
Jan 8 2022, 3:51 PM
F34911434: MediaWiki image map link 1 with tooltip.png
Jan 8 2022, 3:51 PM
Subscribers
Aklapper
• alexhollender_WMF
Jdlrobson
ovasileva
PutzfetzenORG

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 (1,024×800 px, 224 KB)
MediaWiki image map link 1 with tooltip.png (1,024×800 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 (1,024×800 px, 310 KB)
MediaWiki inline link 1 with page preview .png (1,024×800 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

PutzfetzenORG created this task.Jan 8 2022, 3:51 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJan 8 2022, 3:51 PM
PutzfetzenORG updated the task description. (Show Details)Jan 8 2022, 3:52 PM
PutzfetzenORG updated the task description. (Show Details)
Aklapper edited projects, added: EasyTimeline; removed: ImageMap.Jan 8 2022, 5:46 PM

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

Jdlrobson edited projects, added: Web-Team-Backlog-Archived; removed: EasyTimeline.Jan 10 2022, 4:42 PM
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')))
Jdlrobson moved this task from Incoming to Not ready to estimate on the Web-Team-Backlog-Archived board.Jan 10 2022, 6:39 PM
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-Archived board.
ovasileva added a subscriber: • alexhollender_WMF.
In T298833#7609672, @Jdlrobson wrote:

@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

PutzfetzenORG added a comment.Feb 8 2022, 4:02 PM

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.
Jdlrobson edited projects, added: Web-Team; removed: Web-Team-Backlog-Archived.Nov 13 2024, 11:39 PM
Jdlrobson moved this task from Incoming to Freezer on the Web-Team board.Nov 13 2024, 11:56 PM
Jdlrobson changed the task status from Open to Stalled.Dec 6 2024, 11:02 PM

The referenced example no longer exists meaning this task is not ready to be worked on.

Jdlrobson removed a project: Web-Team.Jan 23 2025, 6:15 AM

Per the web team's quarterly grooming, these tasks are being removed from the team's backlog.

Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL · Credits