943,771 Members | Top Members by Rank

Ad:
Jun 7th, 2007
0

show image of the link on mouse over

Expand Post »
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
Similar Threads
Reputation Points: 10
Solved Threads: 0
Newbie Poster
sbhalla15 is offline Offline
3 posts
since Jun 2007
Jun 7th, 2007
0

Re: show image of the link on mouse over

Something like this?
Super Moderator
Featured Poster
Reputation Points: 3233
Solved Threads: 719
Failure as a human
~s.o.s~ is offline Offline
8,871 posts
since Jun 2006
Jun 8th, 2007
0

Re: show image of the link on mouse over

Yes. Thats what i am looking for.
Reputation Points: 10
Solved Threads: 0
Newbie Poster
sbhalla15 is offline Offline
3 posts
since Jun 2007
Feb 29th, 2008
0

Re: show image of the link on mouse over

Click to Expand / Collapse  Quote originally posted by ~s.o.s~ ...
Something like this?
I am looking to have the mouseover affect you showcased above. How can I accomplsih this?
Thanks in advance
Reputation Points: 10
Solved Threads: 1
Newbie Poster
raulrosa is offline Offline
1 posts
since Feb 2008
Apr 15th, 2008
0

Re: show image of the link on mouse over

can anybudy give me the javascript code for show image of the link on mouse over.
Reputation Points: 10
Solved Threads: 1
Newbie Poster
rithon is offline Offline
2 posts
since Apr 2008
Apr 15th, 2008
0

Re: show image of the link on mouse over

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);
Reputation Points: 11
Solved Threads: 6
Posting Whiz in Training
Inny is offline Offline
293 posts
since Oct 2005
Apr 15th, 2008
0

Re: show image of the link on mouse over

thnx inny
Reputation Points: 10
Solved Threads: 1
Newbie Poster
rithon is offline Offline
2 posts
since Apr 2008
Apr 15th, 2008
0

Re: show image of the link on mouse over

Your Most welcome, Quick easy help Is always Nice!
Reputation Points: 11
Solved Threads: 6
Posting Whiz in Training
Inny is offline Offline
293 posts
since Oct 2005
Jul 10th, 2008
0

Re: show image of the link on mouse over

very informative posts for me. thanks to all.
Reputation Points: 10
Solved Threads: 1
Newbie Poster
iamsam is offline Offline
1 posts
since Jul 2008
Jul 21st, 2009
0

Re: show image of the link on mouse over

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.

Click to Expand / Collapse  Quote originally posted by Inny ...
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);
Reputation Points: 10
Solved Threads: 0
Newbie Poster
sowjanya.gutla is offline Offline
1 posts
since Jul 2009

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: AJAX Question
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: jquery and two or mor div





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC