Display a link website's info in panel

Starr Duskk
Starr Duskk used Ask the Experts™
on
In Discord when you paste in a link it displays the site's info in your discord screen. On my web site, I want to put a bunch of links in a table on the left, and when I hover over a row, it will display the site's info as shown below, in a panel on the right. Is that possible in CSS or whatever? thanks!

link's info
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
View Solution Only
Multitechnician
Top Expert 2014
Commented:
test page : https://jsfiddle.net/xbtwj0f4/

<style>
#DIV-ID-IN-YOUR-PANEL {
    visible:hidden;
}
</style>
<script>
jQuery(function($) {

$(".COMMON-CLASS-FOR-ALL-THE-LINK").hover(function() {
       var href = $(this).attr("href");
       $("#DIV-ID-IN-YOUR-PANEL").html("<iframe src='" + href + "'></iframe>");
       $("#DIV-ID-IN-YOUR-PANEL").css("visible","visible");
}, function() {
       $("#DIV-ID-IN-YOUR-PANEL").css("visible","hidden");
});

});
</script>

Open in new window

Starr DuskkASP.NET VB.NET Developer

Author

Commented:
That's great!
However, the website I want to display refuses a connection. (ark.gamepedia.com refused to connect.)

And I wasn't looking for the page in an iframe. I was hoping to pull these values, with the image shrunk down to fill the panel, but not exceed it (Like in the Discord image):
<meta property="og:title" content="Mek"/>
<meta property="og:image" content="https://gamepedia.cursecdn.com/arksurvivalevolved_gamepedia/thumb/1/1e/Dossier_Mek.png/981px-Dossier_Mek.png"/>

I that possible?

Thanks!
leakim971Multitechnician
Top Expert 2014

Commented:
you put what you want in the link
a link to a screenshot picture
instead an iframe replace by what you want
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Find out now!
Starr DuskkASP.NET VB.NET Developer

Author

Commented:
ok, I guess the second part of my question, to display the site's info, wasn't very clear. I'll create a new ticket for that aspect. Thanks for the CSS part! You're great!!
Starr DuskkASP.NET VB.NET Developer

Author

Commented:
Thanks so much! You're the best!
leakim971Multitechnician
Top Expert 2014

Commented:
you welcome

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial