Javascript - Rollover con preview immagine


/ Published in: JavaScript
Save to your folder(s)



Copy this code and paste it in your HTML
  1. var t_id = setInterval(animate,20);
  2. var pos=0;
  3. var dir=2;
  4. var len=0;
  5.  
  6. function animate()
  7. {
  8. var elem = document.getElementById('progress');
  9. if(elem != null) {
  10. if (pos==0) len += dir;
  11. if (len>32 || pos>79) pos += dir;
  12. if (pos>79) len -= dir;
  13. if (pos>79 && len==0) pos=0;
  14. elem.style.left = pos;
  15. elem.style.width = len;
  16. }
  17. }
  18.  
  19. function remove_loading() {
  20. this.clearInterval(t_id);
  21. var targelem = document.getElementById('loader_container');
  22. targelem.style.display='none';
  23. targelem.style.visibility='hidden';
  24. var t_id = setInterval(animate,60);
  25. }
  26.  
  27.  
  28. var offsetfrommouse=[15,25]; //image x,y offsets from cursor position in pixels. Enter 0,0 for no offset
  29. var displayduration=0; //duration in seconds image should remain visible. 0 for always.
  30.  
  31. var defaultimageheight = 40; // maximum image size.
  32. var defaultimagewidth = 40; // maximum image size.
  33.  
  34. var timer;
  35.  
  36. function gettrailobj(){
  37. if (document.getElementById)
  38. return document.getElementById("preview_div").style
  39. }
  40.  
  41. function gettrailobjnostyle(){
  42. if (document.getElementById)
  43. return document.getElementById("preview_div")
  44. }
  45.  
  46.  
  47. function truebody(){
  48. return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
  49. }
  50.  
  51.  
  52. function hidetrail(){
  53. gettrailobj().display= "none";
  54. document.onmousemove=""
  55. gettrailobj().left="-500px"
  56. clearTimeout(timer);
  57. }
  58.  
  59. function showtrail(imagename,title,width,height){
  60. i = imagename
  61. t = title
  62. w = width
  63. h = height
  64. timer = setTimeout("show('"+i+"',t,w,h);",200);
  65. }
  66. function show(imagename,title,width,height){
  67.  
  68. var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth - offsetfrommouse[0]
  69. var docheight=document.all? Math.min(truebody().scrollHeight, truebody().clientHeight) : Math.min(window.innerHeight)
  70.  
  71. if( (navigator.userAgent.indexOf("Konqueror")==-1 || navigator.userAgent.indexOf("Firefox")!=-1 || (navigator.userAgent.indexOf("Opera")==-1 && navigator.appVersion.indexOf("MSIE")!=-1)) && (docwidth>650 && docheight>500)) {
  72. ( width == 0 ) ? width = defaultimagewidth: '';
  73. ( height == 0 ) ? height = defaultimageheight: '';
  74.  
  75. width+=30
  76. height+=55
  77. defaultimageheight = height
  78. defaultimagewidth = width
  79.  
  80. document.onmousemove=followmouse;
  81.  
  82.  
  83. newHTML = '<div class="border_preview" style="width:'+ width +'px;height:'+ height +'px"><div id="loader_container"><div id="loader"><div align="center">Loading template preview...</div><div id="loader_bg"><div id="progress"> </div></div></div></div>';
  84. newHTML = newHTML + '<h2 class="title_h2">' + ' '+title + '</h2>'
  85.  
  86. newHTML = newHTML + '<div class="preview_temp_load"><img onload="javascript:remove_loading();" src="' + imagename + '" border="0"></div>';
  87. newHTML = newHTML + '</div>';
  88.  
  89. if(navigator.userAgent.indexOf("MSIE")!=-1 && navigator.userAgent.indexOf("Opera")==-1 ){
  90. newHTML = newHTML+'<iframe src="about:blank" scrolling="no" frameborder="0" width="'+width+'" height="'+height+'"></iframe>';
  91. }
  92.  
  93. gettrailobjnostyle().innerHTML = newHTML;
  94. gettrailobj().display="block";
  95. }
  96. }
  97.  
  98. function followmouse(e){
  99.  
  100. var xcoord=offsetfrommouse[0]
  101. var ycoord=offsetfrommouse[1]
  102.  
  103. var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15
  104. var docheight=document.all? Math.min(truebody().scrollHeight, truebody().clientHeight) : Math.min(window.innerHeight)
  105.  
  106. if (typeof e != "undefined"){
  107. if (docwidth - e.pageX < defaultimagewidth + 2*offsetfrommouse[0]){
  108. xcoord = e.pageX - xcoord - defaultimagewidth; // Move to the left side of the cursor
  109. } else {
  110. xcoord += e.pageX;
  111. }
  112. if (docheight - e.pageY < defaultimageheight + 2*offsetfrommouse[1]){
  113. ycoord += e.pageY - Math.max(0,(2*offsetfrommouse[1] + defaultimageheight + e.pageY - docheight - truebody().scrollTop));
  114. } else {
  115. ycoord += e.pageY;
  116. }
  117.  
  118. } else if (typeof window.event != "undefined"){
  119. if (docwidth - event.clientX < defaultimagewidth + 2*offsetfrommouse[0]){
  120. xcoord = event.clientX + truebody().scrollLeft - xcoord - defaultimagewidth; // Move to the left side of the cursor
  121. } else {
  122. xcoord += truebody().scrollLeft+event.clientX
  123. }
  124. if (docheight - event.clientY < (defaultimageheight + 2*offsetfrommouse[1])){
  125. ycoord += event.clientY + truebody().scrollTop - Math.max(0,(2*offsetfrommouse[1] + defaultimageheight + event.clientY - docheight));
  126. } else {
  127. ycoord += truebody().scrollTop + event.clientY;
  128. }
  129. }
  130. gettrailobj().left=xcoord+"px"
  131. gettrailobj().top=ycoord+"px"
  132.  
  133. }
  134.  
  135.  
  136. <html>
  137. <head>
  138. <script src="preview_templates.js" language="JavaScript" type="text/javascript"></script>
  139. <script src="loader.js" language="JavaScript" type="text/javascript"></script>
  140. </head>
  141.  
  142. <body>
  143. <img src="uno.jpg" border=0 border=1 style="border-color: 777777" onmouseover="showtrail('due.jpg ','Template 12306',430,449);" onmouseout="hidetrail();">
  144. <div style="display: none; position: absolute;z-index:110; " id="preview_div"></div>
  145. </body>
  146. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.