JavaScript / DHTML / AJAX RSS JavaScript / DHTML / AJAX RSS

show image of the link on mouse over

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Thread Solved
Reply

•
•
Join Date: Jun 2007
Posts: 3
Reputation: sbhalla15 is an unknown quantity at this point 
Solved Threads: 0
sbhalla15 sbhalla15 is offline Offline
Newbie Poster

show image of the link on mouse over

 
0
  #1
Jun 7th, 2007
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
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2006
Posts: 7,581
Reputation: ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of 
Solved Threads: 461
Super Moderator
Featured Poster
~s.o.s~'s Avatar
~s.o.s~ ~s.o.s~ is offline Offline
Failure as a human

Re: show image of the link on mouse over

 
0
  #2
Jun 7th, 2007
Something like this?
I don't accept change; I don't deserve to live.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2007
Posts: 3
Reputation: sbhalla15 is an unknown quantity at this point 
Solved Threads: 0
sbhalla15 sbhalla15 is offline Offline
Newbie Poster

Re: show image of the link on mouse over

 
0
  #3
Jun 8th, 2007
Yes. Thats what i am looking for.
Reply With Quote Quick reply to this message  
•
•
Join Date: Feb 2008
Posts: 1
Reputation: raulrosa is an unknown quantity at this point 
Solved Threads: 1
raulrosa raulrosa is offline Offline
Newbie Poster

Re: show image of the link on mouse over

 
0
  #4
Feb 29th, 2008
•
•
•
•
Originally Posted by ~s.o.s~ View Post
Something like this?
I am looking to have the mouseover affect you showcased above. How can I accomplsih this?
Thanks in advance
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2008
Posts: 2
Reputation: rithon is an unknown quantity at this point 
Solved Threads: 1
rithon rithon is offline Offline
Newbie Poster

Re: show image of the link on mouse over

 
0
  #5
Apr 15th, 2008
can anybudy give me the javascript code for show image of the link on mouse over.
Reply With Quote Quick reply to this message  
•
•
Join Date: Oct 2005
Posts: 240
Reputation: Inny is an unknown quantity at this point 
Solved Threads: 6
Inny's Avatar
Inny Inny is offline Offline
Posting Whiz in Training

Re: show image of the link on mouse over

 
0
  #6
Apr 15th, 2008
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

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. /*
  2.  
  3. Link Thumbnail v2.0.1
  4. (c) Arc90, Inc.
  5.  
  6. http://www.arc90.com
  7. http://lab.arc90.com
  8.  
  9. Licensed under : Creative Commons Attribution 2.5 http://creativecommons.org/licenses/by/2.5/
  10.  
  11. */
  12.  
  13. /* Globals */
  14. var arc90_navigator = navigator.userAgent.toLowerCase();
  15. var arc90_isOpera = arc90_navigator.indexOf('opera') >= 0? true: false;
  16. var arc90_isIE = arc90_navigator.indexOf('msie') >= 0 && !arc90_isOpera? true: false;
  17. var arc90_isSafari = arc90_navigator.indexOf('safari') >= 0 || arc90_navigator.indexOf('khtml') >= 0? true: false;
  18. var arc90_linkThumbUseClassName = true;
  19.  
  20. var arc90_linksources = [['http://images.websnapr.com/?size=s&url=', 202, 152],
  21. 						  ['http://thumbnails.alexa.com/image_server.cgi?size=small&url=', 160, 120],
  22. 						  ['http://msnsearch.srv.girafa.com/srv/i?s=MSNSEARCH&r=', 160, 120]];
  23. var arc90_linksource = 0;
  24.  
  25. function arc90_linkpic() {
  26. 	var b = document.domain;
  27. 	var A = document.getElementsByTagName('A');
  28.  
  29. 	for (var i = 0, l = A.length, c = 0; i < l; i++) {
  30. 		var a = A[i];
  31. 		var h = a.href;
  32. 		if ((b == '' || h.indexOf(b) < 0) && h.indexOf('://') > 0 && ((arc90_linkThumbUseClassName && a.className.indexOf('linkthumb') >= 0) || !arc90_linkThumbUseClassName)) {
  33. 			try {
  34. 				a.className += ' arc90_linkpicLNK';
  35. 				if (a.id == '')
  36. 					a.id = 'arc90_link'+ i;
  37. 				var d = arc90_newNode('div', 'arc90_linkpic'+ i, 'arc90_linkpic');
  38. 				var m = arc90_newNode('img', '', 'arc90_linkpicIMG');
  39. 				// var n = h.replace(/[^:]*:\/\/([^:\/]*)(:{0,1}\/{1}.*)/, '$1');
  40. 				var n = escape(h);
  41. 				m.src = arc90_linksources[arc90_linksource][0] + n;
  42. 				m.width = arc90_linksources[arc90_linksource][1];
  43. 				m.height = arc90_linksources[arc90_linksource][2];
  44. 				m.style.width = arc90_linksources[arc90_linksource][1] +'px';
  45. 				m.style.height = arc90_linksources[arc90_linksource][2] +'px';
  46. 				m.border = 0;
  47. 				m.alt = '[Picture of '+ n +']';
  48. 				m.title = a.title;
  49. 				d.style.zIndex = '9999';
  50. 				d.style.position = 'absolute';
  51.  
  52. 				d.appendChild(m);
  53. 				document.body.appendChild(d);
  54.  
  55. 				arc90_addEvent(a, 'mouseover',	function () { arc90_showThumb(arc90_isIE? event.srcElement.id: this.id); } );
  56. 				arc90_addEvent(a, 'mouseout',	function () { arc90_hideThumb(arc90_isIE? event.srcElement.id: this.id); } );
  57. 			} catch(err) {
  58. 				a = null;
  59. 			}
  60. 		}
  61. 	}
  62. }
  63.  
  64. function arc90_showThumb(id) {
  65. 	try {
  66. 		var k = document.getElementById(id);
  67. 		var top = arc90_findDimension(k, 'Top');
  68. 		var lnh = arc90_getStyle(k, 'lineHeight', 'font-size');
  69. 		var default_height = 20;
  70.  
  71. 		if (!lnh)
  72. 			lnh = default_height;
  73. 		else if (lnh.indexOf('pt') > 0)
  74. 			lnh = parseInt(lnh) * 1.3;
  75. 		else if (lnh.indexOf('em') > 0)
  76. 			lnh = parseInt(lnh) * 10;
  77. 		else if (lnh.indexOf('px') > 0)
  78. 			lnh = parseInt(lnh);
  79. 		else if (arc90_isNumeric(lnh))
  80. 			lnh = parseInt(arc90_isIE? lnh * 10: arc90_isOpera? lnh/100: lnh); // IE brings back em units
  81. 		else
  82. 			lnh = default_height;
  83. 		var lft = arc90_findDimension(k, 'Left');
  84. 		var nlf = arc90_findMatchingDimensionViaNodes(k, 'Left', lft, 0);
  85. 		var pid = id.replace(/arc90_link/, 'arc90_linkpic');
  86. 		var p = document.getElementById(pid);
  87. 		p.style.display = 'block';
  88. 		p.style.top = (top + (arc90_isIE && nlf? lnh + 8: 4) + lnh) + 'px';
  89. 		p.style.left = lft + 'px';
  90. 	} catch(err) { return; }
  91. }
  92.  
  93. function arc90_hideThumb(id) {
  94. 	try {
  95. 		var k = document.getElementById(id);
  96. 		var pid = id.replace(/arc90_link/, 'arc90_linkpic');
  97. 		var p = document.getElementById(pid);
  98. 		p.style.display = 'none';
  99. 	} catch(err) { return; }
  100. }
  101.  
  102. function arc90_getStyle(obj, styleIE, styleMoz) {
  103. 	if (arc90_isString(obj)) obj = document.getElementById(obj);
  104. 	if (obj.currentStyle)
  105. 		return obj.currentStyle[styleIE];
  106. 	else if (window.getComputedStyle)
  107. 		return document.defaultView.getComputedStyle(obj, null).getPropertyValue(styleMoz);
  108. }
  109.  
  110. function arc90_findDimension(obj, pType) {
  111. 	if (arc90_isString(obj)) obj = document.getElementById(obj);
  112. 	var cur = 0;
  113. 	if(obj.offsetParent)
  114. 		while(obj.offsetParent) {
  115. 			switch(pType.toLowerCase()) {
  116. 			case "width":
  117. 				cur += obj.offsetWidth; break;
  118. 			case "height":
  119. 				cur += obj.offsetHeight; break;
  120. 			case "top":
  121. 				cur += obj.offsetTop; break;
  122. 			case "left":
  123. 				cur += obj.offsetLeft; break;
  124. 			}
  125. 			obj = obj.offsetParent;
  126. 		}
  127. 	return cur;
  128. }
  129.  
  130. function arc90_findMatchingDimensionViaNodes(obj, pType, matching, notMatching) {
  131. 	var cur = 0, counter = 0;
  132. 	notMatching = notMatching == null? -1: notMatching;
  133. 	if(obj.parentNode)
  134. 		while(obj.parentNode) {
  135. 			cur = arc90_findDimension(obj, pType);
  136. 			if (cur == matching && cur != notMatching)
  137. 				counter++;
  138. 			if (counter >= 2) return true;
  139. 			obj = obj.parentNode;
  140. 		}
  141. 	return false;
  142. }
  143.  
  144. /* Events */
  145. function arc90_isString(o) { return (typeof(o) == "string"); }
  146.  
  147. function arc90_isNumeric(o) { return (typeof(parseFloat(o).toString() == 'NaN'? 'xxx': parseFloat(o)) == "number" && parseFloat(o) != ''); }
  148.  
  149. function arc90_addEvent(e, meth, func, cap) {
  150. 	if (arc90_isString(e))	e = document.getElementById(e);
  151.  
  152. 	if (e.addEventListener){
  153. 		e.addEventListener(meth, func, cap);
  154.     	return true;
  155. 	}	else if (e.attachEvent)
  156. 		return e.attachEvent("on"+ meth, func);
  157. 	return false;
  158. }
  159.  
  160. /* Nodes */
  161. function arc90_newNode(t, i, s, x, c) {
  162. 	var node = document.createElement(t);
  163. 	if (x != null && x != '') {
  164. 		var n = document.createTextNode(x);
  165. 		node.appendChild(n);
  166. 	}
  167. 	if (i != null && i != '')
  168. 		node.id = i;
  169. 	if (s != null && s != '')
  170. 		node.className = s;
  171. 	if (c != null && c != '')
  172. 		node.appendChild(c);
  173. 	return node;
  174. }
  175.  
  176. /* Onload */
  177. arc90_addEvent(window, 'load', arc90_linkpic);
Always carry a flagon of whiskey in case of snakebite and furthermore always carry a small snake.
W. C. Fields
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2008
Posts: 2
Reputation: rithon is an unknown quantity at this point 
Solved Threads: 1
rithon rithon is offline Offline
Newbie Poster

Re: show image of the link on mouse over

 
0
  #7
Apr 15th, 2008
thnx inny
Reply With Quote Quick reply to this message  
•
•
Join Date: Oct 2005
Posts: 240
Reputation: Inny is an unknown quantity at this point 
Solved Threads: 6
Inny's Avatar
Inny Inny is offline Offline
Posting Whiz in Training

Re: show image of the link on mouse over

 
0
  #8
Apr 15th, 2008
Your Most welcome, Quick easy help Is always Nice!
Always carry a flagon of whiskey in case of snakebite and furthermore always carry a small snake.
W. C. Fields
Reply With Quote Quick reply to this message  
•
•
Join Date: Jul 2008
Posts: 1
Reputation: iamsam is an unknown quantity at this point 
Solved Threads: 1
iamsam iamsam is offline Offline
Newbie Poster

Re: show image of the link on mouse over

 
0
  #9
Jul 10th, 2008
very informative posts for me. thanks to all.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jul 2009
Posts: 1
Reputation: sowjanya.gutla is an unknown quantity at this point 
Solved Threads: 0
sowjanya.gutla sowjanya.gutla is offline Offline
Newbie Poster

Re: show image of the link on mouse over

 
0
  #10
Jul 21st, 2009
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.

•
•
•
•
Originally Posted by Inny View Post
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

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. /*
  2.  
  3. Link Thumbnail v2.0.1
  4. (c) Arc90, Inc.
  5.  
  6. http://www.arc90.com
  7. http://lab.arc90.com
  8.  
  9. Licensed under : Creative Commons Attribution 2.5 http://creativecommons.org/licenses/by/2.5/
  10.  
  11. */
  12.  
  13. /* Globals */
  14. var arc90_navigator = navigator.userAgent.toLowerCase();
  15. var arc90_isOpera = arc90_navigator.indexOf('opera') >= 0? true: false;
  16. var arc90_isIE = arc90_navigator.indexOf('msie') >= 0 && !arc90_isOpera? true: false;
  17. var arc90_isSafari = arc90_navigator.indexOf('safari') >= 0 || arc90_navigator.indexOf('khtml') >= 0? true: false;
  18. var arc90_linkThumbUseClassName = true;
  19.  
  20. var arc90_linksources = [['http://images.websnapr.com/?size=s&url=', 202, 152],
  21. 						  ['http://thumbnails.alexa.com/image_server.cgi?size=small&url=', 160, 120],
  22. 						  ['http://msnsearch.srv.girafa.com/srv/i?s=MSNSEARCH&r=', 160, 120]];
  23. var arc90_linksource = 0;
  24.  
  25. function arc90_linkpic() {
  26. 	var b = document.domain;
  27. 	var A = document.getElementsByTagName('A');
  28.  
  29. 	for (var i = 0, l = A.length, c = 0; i < l; i++) {
  30. 		var a = A[i];
  31. 		var h = a.href;
  32. 		if ((b == '' || h.indexOf(b) < 0) && h.indexOf('://') > 0 && ((arc90_linkThumbUseClassName && a.className.indexOf('linkthumb') >= 0) || !arc90_linkThumbUseClassName)) {
  33. 			try {
  34. 				a.className += ' arc90_linkpicLNK';
  35. 				if (a.id == '')
  36. 					a.id = 'arc90_link'+ i;
  37. 				var d = arc90_newNode('div', 'arc90_linkpic'+ i, 'arc90_linkpic');
  38. 				var m = arc90_newNode('img', '', 'arc90_linkpicIMG');
  39. 				// var n = h.replace(/[^:]*:\/\/([^:\/]*)(:{0,1}\/{1}.*)/, '$1');
  40. 				var n = escape(h);
  41. 				m.src = arc90_linksources[arc90_linksource][0] + n;
  42. 				m.width = arc90_linksources[arc90_linksource][1];
  43. 				m.height = arc90_linksources[arc90_linksource][2];
  44. 				m.style.width = arc90_linksources[arc90_linksource][1] +'px';
  45. 				m.style.height = arc90_linksources[arc90_linksource][2] +'px';
  46. 				m.border = 0;
  47. 				m.alt = '[Picture of '+ n +']';
  48. 				m.title = a.title;
  49. 				d.style.zIndex = '9999';
  50. 				d.style.position = 'absolute';
  51.  
  52. 				d.appendChild(m);
  53. 				document.body.appendChild(d);
  54.  
  55. 				arc90_addEvent(a, 'mouseover',	function () { arc90_showThumb(arc90_isIE? event.srcElement.id: this.id); } );
  56. 				arc90_addEvent(a, 'mouseout',	function () { arc90_hideThumb(arc90_isIE? event.srcElement.id: this.id); } );
  57. 			} catch(err) {
  58. 				a = null;
  59. 			}
  60. 		}
  61. 	}
  62. }
  63.  
  64. function arc90_showThumb(id) {
  65. 	try {
  66. 		var k = document.getElementById(id);
  67. 		var top = arc90_findDimension(k, 'Top');
  68. 		var lnh = arc90_getStyle(k, 'lineHeight', 'font-size');
  69. 		var default_height = 20;
  70.  
  71. 		if (!lnh)
  72. 			lnh = default_height;
  73. 		else if (lnh.indexOf('pt') > 0)
  74. 			lnh = parseInt(lnh) * 1.3;
  75. 		else if (lnh.indexOf('em') > 0)
  76. 			lnh = parseInt(lnh) * 10;
  77. 		else if (lnh.indexOf('px') > 0)
  78. 			lnh = parseInt(lnh);
  79. 		else if (arc90_isNumeric(lnh))
  80. 			lnh = parseInt(arc90_isIE? lnh * 10: arc90_isOpera? lnh/100: lnh); // IE brings back em units
  81. 		else
  82. 			lnh = default_height;
  83. 		var lft = arc90_findDimension(k, 'Left');
  84. 		var nlf = arc90_findMatchingDimensionViaNodes(k, 'Left', lft, 0);
  85. 		var pid = id.replace(/arc90_link/, 'arc90_linkpic');
  86. 		var p = document.getElementById(pid);
  87. 		p.style.display = 'block';
  88. 		p.style.top = (top + (arc90_isIE && nlf? lnh + 8: 4) + lnh) + 'px';
  89. 		p.style.left = lft + 'px';
  90. 	} catch(err) { return; }
  91. }
  92.  
  93. function arc90_hideThumb(id) {
  94. 	try {
  95. 		var k = document.getElementById(id);
  96. 		var pid = id.replace(/arc90_link/, 'arc90_linkpic');
  97. 		var p = document.getElementById(pid);
  98. 		p.style.display = 'none';
  99. 	} catch(err) { return; }
  100. }
  101.  
  102. function arc90_getStyle(obj, styleIE, styleMoz) {
  103. 	if (arc90_isString(obj)) obj = document.getElementById(obj);
  104. 	if (obj.currentStyle)
  105. 		return obj.currentStyle[styleIE];
  106. 	else if (window.getComputedStyle)
  107. 		return document.defaultView.getComputedStyle(obj, null).getPropertyValue(styleMoz);
  108. }
  109.  
  110. function arc90_findDimension(obj, pType) {
  111. 	if (arc90_isString(obj)) obj = document.getElementById(obj);
  112. 	var cur = 0;
  113. 	if(obj.offsetParent)
  114. 		while(obj.offsetParent) {
  115. 			switch(pType.toLowerCase()) {
  116. 			case "width":
  117. 				cur += obj.offsetWidth; break;
  118. 			case "height":
  119. 				cur += obj.offsetHeight; break;
  120. 			case "top":
  121. 				cur += obj.offsetTop; break;
  122. 			case "left":
  123. 				cur += obj.offsetLeft; break;
  124. 			}
  125. 			obj = obj.offsetParent;
  126. 		}
  127. 	return cur;
  128. }
  129.  
  130. function arc90_findMatchingDimensionViaNodes(obj, pType, matching, notMatching) {
  131. 	var cur = 0, counter = 0;
  132. 	notMatching = notMatching == null? -1: notMatching;
  133. 	if(obj.parentNode)
  134. 		while(obj.parentNode) {
  135. 			cur = arc90_findDimension(obj, pType);
  136. 			if (cur == matching && cur != notMatching)
  137. 				counter++;
  138. 			if (counter >= 2) return true;
  139. 			obj = obj.parentNode;
  140. 		}
  141. 	return false;
  142. }
  143.  
  144. /* Events */
  145. function arc90_isString(o) { return (typeof(o) == "string"); }
  146.  
  147. function arc90_isNumeric(o) { return (typeof(parseFloat(o).toString() == 'NaN'? 'xxx': parseFloat(o)) == "number" && parseFloat(o) != ''); }
  148.  
  149. function arc90_addEvent(e, meth, func, cap) {
  150. 	if (arc90_isString(e))	e = document.getElementById(e);
  151.  
  152. 	if (e.addEventListener){
  153. 		e.addEventListener(meth, func, cap);
  154.     	return true;
  155. 	}	else if (e.attachEvent)
  156. 		return e.attachEvent("on"+ meth, func);
  157. 	return false;
  158. }
  159.  
  160. /* Nodes */
  161. function arc90_newNode(t, i, s, x, c) {
  162. 	var node = document.createElement(t);
  163. 	if (x != null && x != '') {
  164. 		var n = document.createTextNode(x);
  165. 		node.appendChild(n);
  166. 	}
  167. 	if (i != null && i != '')
  168. 		node.id = i;
  169. 	if (s != null && s != '')
  170. 		node.className = s;
  171. 	if (c != null && c != '')
  172. 		node.appendChild(c);
  173. 	return node;
  174. }
  175.  
  176. /* Onload */
  177. arc90_addEvent(window, 'load', arc90_linkpic);
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread has been marked solved.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum
Thread Tools Search this Thread



acid2 ajax ajaxcode ajaxexample ajaxhelp ajaxjspservlets animate automatically beta box browser bug captchaformproblem checkbox close codes createrange() css cursor debugger decimal dependent disablefirebug dom download dropdown editor element engine enter error events explorer ext firefox form forms frameworks getselection google gwt gxt hiddenvalue highlightedword hint html htmlform ie7 ie8 iframe index internet java javascript javascripthelp2020 jawascriptruntimeerror jquery jsf jsfile jsp jump listbox maps masterpage math media menu microsoft mp4 object onmouseoutdivproblem onreadystatechange paypal pdf php player position problem programming progressbar prototype redirect regex runtime safari scale scriptlets search security size software sql text textarea unicode window windowofwords windowsxp wysiwyg \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC