Jump to content
231234

Page Preview for link-hover

Recommended Posts

Hello,

I am currently building a website. I would like to have a page preview for the internal links. But I have no idea how that works.

I imagine that as the page preview of Wikipedia. If you move the mouse over a link, the image and the first words of the site are displayed in a tooltip.

Here is a link https://www.mediawiki.org/wiki/Page_Previews

Does anyone have an idea how to realize this? Have googled a lot and found nothing.

Many Thanks

Share this post


Link to post
Share on other sites

It doesn't seem that difficult, but if you're expecting a ready-made thing that you just drop in and it works, you're probably not going to find that.

The major pieces are a short blob of text, and an optional image, with a popup element to show them.  That's the basics of it.  How you get that text and that image is something that you can probably think about.  Maybe one option is to send an ajax request for that other page (which will only work for pages on the same domain, as in Wikipedia), and find the preview text and optional image somewhere in the HTML, like the metadata in the head.  Another option would be to build those anchor tags so that they use data attributes to include the text and image right in the link itself.  There are probably other options you could come up with too.  Maybe you have a database that has the text and image for every page on your site, for example.

I haven't looked in-depth into how Wikipedia does it to know which solution they decided on.  Since sometimes there is a delay, it sounds like they probably send an ajax request to the URL.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...