show image of the link on mouse over

Question

sbhalla15 0 Newbie Poster

19 Years Ago

Hi there:
This specific to the messages posted by members for various sections on this forum.
when I read through the message text, and if the member has typed in some link of other site, on mouse over of this link i see small image of the link contents.
I wanted to know how to do that?
Are the images stored in the database and shown on mouse over or its something else.
Thanks
sbhalla15

graphics:image javascript

7 Contributors
9 Replies
294 Views
2 Years Discussion Span
Latest Post 17 Years Ago Latest Post by sowjanya.gutla

Dani AI

Generated 9 Months Ago

Short answer: there are two reliable patterns for "show a small preview when the user mouses over a link" — use a screenshot/thumbnail service that returns an image for a URL, or generate and cache screenshots on your own server and serve those images. Earlier replies by and pointed to ready-made projects and services; the practical gaps that often confuse people are (1) handling links inserted after page load (DHTML) and (2) avoiding performance and privacy problems when preloading many previews. Below are focused, actionable tips and a small example to fix the dynamic-link problem.

If you use a third‑party screenshot service

Lazy-load the preview image only on first hover to avoid dozens of extra HTTP requests.
Create a small absolutely-positioned popup <div> that contains an <img> whose src is the service URL + encoded target URL; show/hide that div on mouseenter/mouseleave.
Respect the service terms (API keys, rate limits) and disable previews on small/touch devices (hover is not reliable on phones).

If you generate thumbnails yourself

Use a headless browser (Puppeteer/Playwright) to render pages, capture screenshots, and store them (filesystem or CDN). Serve cached images and refresh on a schedule or when a page changes.
This gives control and avoids external rate limits but requires CPU and a job/queue system.

Making it work for dynamic links (DHTML)

The typical bug: many scripts scan anchors once on window.load and never see subsequently inserted links. Use event delegation or a MutationObserver so new anchors are handled automatically. Example delegation pattern:

// attach once; works for static and dynamically added <a> tags
document.addEventListener('mouseover', e => {
  const a = e.target.closest && e.target.closest('a');
  if (!a) return;
  // showPreview should lazy-load the thumbnail and position a popup near "a"
  showPreview(a.href, a);
});
document.addEventListener('mouseout', e => {
  const a = e.target.closest && e.target.closest('a');
  if (!a) return;
  hidePreview();
});

Practical troubleshooting: if previews never appear check the network tab (image requests), make sure the service allows hotlinking or you are serving cached images, verify CSS z-index/positioning, and disable previews for keyboard-only navigation. For : use delegation or re-run your init function after your script injects links; that will make the hover previews work for DHTML links.

All 9 Replies

~s.o.s~ 2,560 Failure as a human

19 Years Ago

Something like

raulrosa 0 Newbie Poster

18 Years Ago

Something like

I am looking to have the mouseover affect you showcased above. How can I accomplsih this?
Thanks in advance

rithon 0 Newbie Poster

18 Years Ago

can anybudy give me the javascript code for show image of the link on mouse over.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

sbhalla15 0 Newbie Poster · Answer 1 · 2007-06-08T11:15:07+00:00

sbhalla15 0 Newbie Poster

19 Years Ago

Yes. Thats what i am looking for.

Inny 1 Posting Whiz in Training · Answer 2 · 2008-04-15T16:11:06+00:00

There exist such a service, Very short code, easy to install and customisable

or You can Host And use This code

/*

Link Thumbnail v2.0.1
(c) Arc90, Inc.




Licensed under : Creative Commons Attribution 2.5 http://creativecommons.org/licenses/by/2.5/

*/

/* Globals */
var arc90_navigator = navigator.userAgent.toLowerCase();
var arc90_isOpera = arc90_navigator.indexOf('opera') >= 0? true: false;
var arc90_isIE = arc90_navigator.indexOf('msie') >= 0 && !arc90_isOpera? true: false;
var arc90_isSafari = arc90_navigator.indexOf('safari') >= 0 || arc90_navigator.indexOf('khtml') >= 0? true: false;
var arc90_linkThumbUseClassName = true;

var arc90_linksources = [['', 202, 152],
						  ['', 160, 120],
						  ['', 160, 120]];
var arc90_linksource = 0;

function arc90_linkpic() {
	var b = document.domain;
	var A = document.getElementsByTagName('A');

	for (var i = 0, l = A.length, c = 0; i < l; i++) {
		var a = A[i];
		var h = a.href;
		if ((b == '' || h.indexOf(b) < 0) && h.indexOf('://') > 0 && ((arc90_linkThumbUseClassName && a.className.indexOf('linkthumb') >= 0) || !arc90_linkThumbUseClassName)) {
			try {
				a.className += ' arc90_linkpicLNK';
				if (a.id == '')
					a.id = 'arc90_link'+ i;
				var d = arc90_newNode('div', 'arc90_linkpic'+ i, 'arc90_linkpic');
				var m = arc90_newNode('img', '', 'arc90_linkpicIMG');
				// var n = h.replace(/[^:]*:\/\/([^:\/]*)(:{0,1}\/{1}.*)/, '$1');
				var n = escape(h);
				m.src = arc90_linksources[arc90_linksource][0] + n;
				m.width = arc90_linksources[arc90_linksource][1];
				m.height = arc90_linksources[arc90_linksource][2];
				m.style.width = arc90_linksources[arc90_linksource][1] +'px';
				m.style.height = arc90_linksources[arc90_linksource][2] +'px';
				m.border = 0;
				m.alt = '[Picture of '+ n +']';
				m.title = a.title;
				d.style.zIndex = '9999';
				d.style.position = 'absolute';

				d.appendChild(m);
				document.body.appendChild(d);

				arc90_addEvent(a, 'mouseover',	function () { arc90_showThumb(arc90_isIE? event.srcElement.id: this.id); } );
				arc90_addEvent(a, 'mouseout',	function () { arc90_hideThumb(arc90_isIE? event.srcElement.id: this.id); } );
			} catch(err) {
				a = null;
			}
		}
	}
}

function arc90_showThumb(id) {
	try {
		var k = document.getElementById(id);
		var top = arc90_findDimension(k, 'Top');
		var lnh = arc90_getStyle(k, 'lineHeight', 'font-size');
		var default_height = 20;

		if (!lnh)
			lnh = default_height;
		else if (lnh.indexOf('pt') > 0)
			lnh = parseInt(lnh) * 1.3;
		else if (lnh.indexOf('em') > 0)
			lnh = parseInt(lnh) * 10;
		else if (lnh.indexOf('px') > 0)
			lnh = parseInt(lnh);
		else if (arc90_isNumeric(lnh))
			lnh = parseInt(arc90_isIE? lnh * 10: arc90_isOpera? lnh/100: lnh); // IE brings back em units
		else
			lnh = default_height;
		var lft = arc90_findDimension(k, 'Left');
		var nlf = arc90_findMatchingDimensionViaNodes(k, 'Left', lft, 0);
		var pid = id.replace(/arc90_link/, 'arc90_linkpic');
		var p = document.getElementById(pid);
		p.style.display = 'block';
		p.style.top = (top + (arc90_isIE && nlf? lnh + 8: 4) + lnh) + 'px';
		p.style.left = lft + 'px';
	} catch(err) { return; }
}

function arc90_hideThumb(id) {
	try {
		var k = document.getElementById(id);
		var pid = id.replace(/arc90_link/, 'arc90_linkpic');
		var p = document.getElementById(pid);
		p.style.display = 'none';
	} catch(err) { return; }
}

function arc90_getStyle(obj, styleIE, styleMoz) {
	if (arc90_isString(obj)) obj = document.getElementById(obj);
	if (obj.currentStyle)
		return obj.currentStyle[styleIE];
	else if (window.getComputedStyle)
		return document.defaultView.getComputedStyle(obj, null).getPropertyValue(styleMoz);
}

function arc90_findDimension(obj, pType) {
	if (arc90_isString(obj)) obj = document.getElementById(obj);
	var cur = 0;
	if(obj.offsetParent)
		while(obj.offsetParent) {
			switch(pType.toLowerCase()) {
			case "width":
				cur += obj.offsetWidth; break;
			case "height":
				cur += obj.offsetHeight; break;
			case "top":
				cur += obj.offsetTop; break;
			case "left":
				cur += obj.offsetLeft; break;
			}
			obj = obj.offsetParent;
		}
	return cur;
}

function arc90_findMatchingDimensionViaNodes(obj, pType, matching, notMatching) {
	var cur = 0, counter = 0;
	notMatching = notMatching == null? -1: notMatching;
	if(obj.parentNode)
		while(obj.parentNode) {
			cur = arc90_findDimension(obj, pType);
			if (cur == matching && cur != notMatching)
				counter++;
			if (counter >= 2) return true;
			obj = obj.parentNode;
		}
	return false;
}

/* Events */
function arc90_isString(o) { return (typeof(o) == "string"); }

function arc90_isNumeric(o) { return (typeof(parseFloat(o).toString() == 'NaN'? 'xxx': parseFloat(o)) == "number" && parseFloat(o) != ''); }

function arc90_addEvent(e, meth, func, cap) {
	if (arc90_isString(e))	e = document.getElementById(e);

	if (e.addEventListener){
		e.addEventListener(meth, func, cap);
    	return true;
	}	else if (e.attachEvent)
		return e.attachEvent("on"+ meth, func);
	return false;
}

/* Nodes */
function arc90_newNode(t, i, s, x, c) {
	var node = document.createElement(t);
	if (x != null && x != '') {
		var n = document.createTextNode(x);
		node.appendChild(n);
	}
	if (i != null && i != '')
		node.id = i;
	if (s != null && s != '')
		node.className = s;
	if (c != null && c != '')
		node.appendChild(c);
	return node;
}

/* Onload */
arc90_addEvent(window, 'load', arc90_linkpic);

rithon 0 Newbie Poster · Answer 3 · 2008-04-15T16:17:05+00:00

rithon 0 Newbie Poster

18 Years Ago

thnx inny

Inny 1 Posting Whiz in Training · Answer 4 · 2008-04-15T16:18:48+00:00

Inny 1 Posting Whiz in Training

18 Years Ago

Your Most welcome, Quick easy help Is always Nice! :)

iamsam 0 Newbie Poster · Answer 5 · 2008-07-10T20:13:57+00:00

iamsam 0 Newbie Poster

18 Years Ago

very informative posts for me. thanks to all.

sowjanya.gutla 0 Newbie Poster · Answer 6 · 2009-07-21T13:47:59+00:00

Hi Inny ,

I tried ur examples given for thumbnail showing on links. These are working for links which are static but not working for dynamic links (links which are given in DHTML)

Please help me out.

There exist such a service, Very short code, easy to install and customisable

or You can Host And use This code

/*

Link Thumbnail v2.0.1
(c) Arc90, Inc.




Licensed under : Creative Commons Attribution 2.5 http://creativecommons.org/licenses/by/2.5/

*/

/* Globals */
var arc90_navigator = navigator.userAgent.toLowerCase();
var arc90_isOpera = arc90_navigator.indexOf('opera') >= 0? true: false;
var arc90_isIE = arc90_navigator.indexOf('msie') >= 0 && !arc90_isOpera? true: false;
var arc90_isSafari = arc90_navigator.indexOf('safari') >= 0 || arc90_navigator.indexOf('khtml') >= 0? true: false;
var arc90_linkThumbUseClassName = true;

var arc90_linksources = [['', 202, 152],
						  ['', 160, 120],
						  ['', 160, 120]];
var arc90_linksource = 0;

function arc90_linkpic() {
	var b = document.domain;
	var A = document.getElementsByTagName('A');

	for (var i = 0, l = A.length, c = 0; i < l; i++) {
		var a = A[i];
		var h = a.href;
		if ((b == '' || h.indexOf(b) < 0) && h.indexOf('://') > 0 && ((arc90_linkThumbUseClassName && a.className.indexOf('linkthumb') >= 0) || !arc90_linkThumbUseClassName)) {
			try {
				a.className += ' arc90_linkpicLNK';
				if (a.id == '')
					a.id = 'arc90_link'+ i;
				var d = arc90_newNode('div', 'arc90_linkpic'+ i, 'arc90_linkpic');
				var m = arc90_newNode('img', '', 'arc90_linkpicIMG');
				// var n = h.replace(/[^:]*:\/\/([^:\/]*)(:{0,1}\/{1}.*)/, '$1');
				var n = escape(h);
				m.src = arc90_linksources[arc90_linksource][0] + n;
				m.width = arc90_linksources[arc90_linksource][1];
				m.height = arc90_linksources[arc90_linksource][2];
				m.style.width = arc90_linksources[arc90_linksource][1] +'px';
				m.style.height = arc90_linksources[arc90_linksource][2] +'px';
				m.border = 0;
				m.alt = '[Picture of '+ n +']';
				m.title = a.title;
				d.style.zIndex = '9999';
				d.style.position = 'absolute';

				d.appendChild(m);
				document.body.appendChild(d);

				arc90_addEvent(a, 'mouseover',	function () { arc90_showThumb(arc90_isIE? event.srcElement.id: this.id); } );
				arc90_addEvent(a, 'mouseout',	function () { arc90_hideThumb(arc90_isIE? event.srcElement.id: this.id); } );
			} catch(err) {
				a = null;
			}
		}
	}
}

function arc90_showThumb(id) {
	try {
		var k = document.getElementById(id);
		var top = arc90_findDimension(k, 'Top');
		var lnh = arc90_getStyle(k, 'lineHeight', 'font-size');
		var default_height = 20;

		if (!lnh)
			lnh = default_height;
		else if (lnh.indexOf('pt') > 0)
			lnh = parseInt(lnh) * 1.3;
		else if (lnh.indexOf('em') > 0)
			lnh = parseInt(lnh) * 10;
		else if (lnh.indexOf('px') > 0)
			lnh = parseInt(lnh);
		else if (arc90_isNumeric(lnh))
			lnh = parseInt(arc90_isIE? lnh * 10: arc90_isOpera? lnh/100: lnh); // IE brings back em units
		else
			lnh = default_height;
		var lft = arc90_findDimension(k, 'Left');
		var nlf = arc90_findMatchingDimensionViaNodes(k, 'Left', lft, 0);
		var pid = id.replace(/arc90_link/, 'arc90_linkpic');
		var p = document.getElementById(pid);
		p.style.display = 'block';
		p.style.top = (top + (arc90_isIE && nlf? lnh + 8: 4) + lnh) + 'px';
		p.style.left = lft + 'px';
	} catch(err) { return; }
}

function arc90_hideThumb(id) {
	try {
		var k = document.getElementById(id);
		var pid = id.replace(/arc90_link/, 'arc90_linkpic');
		var p = document.getElementById(pid);
		p.style.display = 'none';
	} catch(err) { return; }
}

function arc90_getStyle(obj, styleIE, styleMoz) {
	if (arc90_isString(obj)) obj = document.getElementById(obj);
	if (obj.currentStyle)
		return obj.currentStyle[styleIE];
	else if (window.getComputedStyle)
		return document.defaultView.getComputedStyle(obj, null).getPropertyValue(styleMoz);
}

function arc90_findDimension(obj, pType) {
	if (arc90_isString(obj)) obj = document.getElementById(obj);
	var cur = 0;
	if(obj.offsetParent)
		while(obj.offsetParent) {
			switch(pType.toLowerCase()) {
			case "width":
				cur += obj.offsetWidth; break;
			case "height":
				cur += obj.offsetHeight; break;
			case "top":
				cur += obj.offsetTop; break;
			case "left":
				cur += obj.offsetLeft; break;
			}
			obj = obj.offsetParent;
		}
	return cur;
}

function arc90_findMatchingDimensionViaNodes(obj, pType, matching, notMatching) {
	var cur = 0, counter = 0;
	notMatching = notMatching == null? -1: notMatching;
	if(obj.parentNode)
		while(obj.parentNode) {
			cur = arc90_findDimension(obj, pType);
			if (cur == matching && cur != notMatching)
				counter++;
			if (counter >= 2) return true;
			obj = obj.parentNode;
		}
	return false;
}

/* Events */
function arc90_isString(o) { return (typeof(o) == "string"); }

function arc90_isNumeric(o) { return (typeof(parseFloat(o).toString() == 'NaN'? 'xxx': parseFloat(o)) == "number" && parseFloat(o) != ''); }

function arc90_addEvent(e, meth, func, cap) {
	if (arc90_isString(e))	e = document.getElementById(e);

	if (e.addEventListener){
		e.addEventListener(meth, func, cap);
    	return true;
	}	else if (e.attachEvent)
		return e.attachEvent("on"+ meth, func);
	return false;
}

/* Nodes */
function arc90_newNode(t, i, s, x, c) {
	var node = document.createElement(t);
	if (x != null && x != '') {
		var n = document.createTextNode(x);
		node.appendChild(n);
	}
	if (i != null && i != '')
		node.id = i;
	if (s != null && s != '')
		node.className = s;
	if (c != null && c != '')
		node.appendChild(c);
	return node;
}

/* Onload */
arc90_addEvent(window, 'load', arc90_linkpic);

show image of the link on mouse over

Dani AI

Recommended Answers Collapse Answers

All 9 Replies

Recommended Answers