show image of the link on mouse over

Question

sbhalla15 0 Newbie Poster

17 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

javascript

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

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

17 Years Ago

Something like this?

raulrosa 0 Newbie Poster

16 Years Ago

Something like this?

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

rithon 0 Newbie Poster

16 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

17 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

http://www.snap.com/snapshots.php

or You can Host And use This code

/*

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

http://www.arc90.com
http://lab.arc90.com

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 = [['http://images.websnapr.com/?size=s&url=', 202, 152],
						  ['http://thumbnails.alexa.com/image_server.cgi?size=small&url=', 160, 120],
						  ['http://msnsearch.srv.girafa.com/srv/i?s=MSNSEARCH&r=', 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

16 Years Ago

thnx inny

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

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

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

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

http://www.snap.com/snapshots.php

or You can Host And use This code

/*

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

http://www.arc90.com
http://lab.arc90.com

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 = [['http://images.websnapr.com/?size=s&url=', 202, 152],
						  ['http://thumbnails.alexa.com/image_server.cgi?size=small&url=', 160, 120],
						  ['http://msnsearch.srv.girafa.com/srv/i?s=MSNSEARCH&r=', 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);