Link Vorschau "Bubble"

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Hier stelle ich ein generisches Script vor, mit dem ihr beliebige Inhalte unter einem Link platzieren könnt.
    == Script ==

    Quellcode

    1. /**
    2. * Bubble Helper Class
    3. *
    4. * example usage
    5. * Bubble.init("externalURL", function (D) {
    6. * return D.href + '<br /><img src="easy-coding-logo.png">';
    7. * });
    8. *
    9. * @author Torben Brodt <easy-coding.de>
    10. * @url http://trac.easy-coding.de/trac/wcf/wiki/Thumbshots
    11. * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-3.0.html>
    12. */
    13. var Bubble = {
    14. Cursor: {
    15. x: 0,
    16. y: 0
    17. },
    18. Offset: {
    19. x: 0,
    20. y: 0
    21. },
    22. blacklist : {},
    23. div: document.getElementById("BubbleDiv"),
    24. init: function (ParentID, showRef) {
    25. Bubble.create();
    26. Bubble.addEvent(window, "mousemove", Bubble.getCurPos);
    27. Bubble.addEvent(window, "resize", Bubble.getOffset);
    28. Bubble.addEvent(window, "scroll", Bubble.getOffset);
    29. var B = Bubble.getElementsByClassName(ParentID), A = B.length;
    30. for (i = 0; i < A; i++) {
    31. if(Bubble.blacklist.href && !B[i].href.match(Bubble.blacklist.href)) {
    32. Bubble.addEvent(B[i], "mouseover", function () {
    33. Bubble.show(this, showRef);
    34. });
    35. Bubble.addEvent(B[i], "mouseout", function () {
    36. Bubble.hide();
    37. });
    38. }
    39. }
    40. },
    41. /**
    42. * currently only href is supported
    43. */
    44. disallow: function (attr, str) {
    45. Bubble.blacklist.href = str;
    46. },
    47. show: function (D, showRef) {
    48. Bubble.div.style.display = "block";
    49. Bubble.div.innerHTML = showRef(D);
    50. Bubble.getCurPos();
    51. Bubble.getOffset();
    52. Bubble.div.style.left = (Bubble.Cursor.x + Bubble.Offset.x) + "px";
    53. Bubble.div.style.top = (Bubble.Cursor.y + Bubble.Offset.y) + "px";
    54. },
    55. hide: function () {
    56. Bubble.div.innerHTML = "";
    57. Bubble.div.style.display = "none";
    58. },
    59. create: function () {
    60. Bubble.div = document.createElement("div");
    61. Bubble.div.id = "BubbleDiv";
    62. document.getElementsByTagName("body")[0].appendChild(Bubble.div);
    63. Bubble.div.style.position = 'absolute';
    64. },
    65. getOffset: function () {
    66. var Px = 10, Py = 20;
    67. var Cx = Bubble.Cursor.x, Cy = Bubble.Cursor.y;
    68. var w = Bubble.div.clientWidth || 150, h = Bubble.div.clientHeight || 150;
    70. var Ww, Wh, Wx, Wy;
    72. var E = window;
    73. if (typeof(E.innerWidth) === "number") {
    74. Ww = E.innerWidth;
    75. Wh = E.innerHeight;
    76. Wx = E.pageXOffset;
    77. Wy = E.pageYOffset;
    78. } else if (document.documentElement) {
    79. F = document.documentElement;
    80. if (F.clientWidth || F.clientHeight) {
    81. Ww = F.clientWidth;
    82. Wh = F.clientHeight;
    83. Wx = F.scrollLeft;
    84. Wy = F.scrollTop;
    85. }
    86. }
    88. // top right
    89. if ((Cx - Wx) > (Ww / 2) && (Cy - Wy) < h) {
    90. Px = -w - Px;
    91. }
    92. // bottom left
    93. else if ((Cx - Wx) < (Ww / 2) && (Cy - Wy) > (Wh / 2)) {
    94. Py = -h - Py;
    95. }
    96. // bottom right
    97. else if ((Cx - Wx) > (Ww / 2) && (Cy - Wy) > (Wh / 2)) {
    98. Px = -w - Px;
    99. Py = -h - Py;
    100. }
    102. Bubble.Offset = {
    103. x: Px,
    104. y: Py
    105. };
    106. },
    107. getCurPos: function (C) {
    108. C = C ? C : window.event;
    109. if (C && typeof(C.pageX) !== "number" && typeof(C.clientX) === "number") {
    110. C.pageX = C.clientX;
    111. C.pageY = C.clientY;
    112. if (document.body && (document.body.scrollLeft || document.body.scrollTop)) {
    113. C.pageX += document.body.scrollLeft;
    114. C.pageY += document.body.scrollTop;
    115. } else if (document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) {
    116. C.pageX += document.documentElement.scrollLeft;
    117. C.pageY += document.documentElement.scrollTop;
    118. }
    119. }
    120. if(C) {
    121. Bubble.Cursor = {
    122. x: C.pageX,
    123. y: C.pageY
    124. };
    125. }
    126. },
    127. addEvent: function( obj, type, fn ) {
    128. if ( window.addEventListener ) {
    129. obj.addEventListener( type, fn, false );
    130. } else {
    131. obj['e'+type+fn] = fn;
    132. obj[type+fn] = function() {
    133. obj['e'+type+fn]( window.event );
    134. };
    135. obj.attachEvent( 'on'+type, obj[type+fn] );
    136. }
    137. },
    138. getElementsByClassName: function (searchClass) {
    139. var classElements = [], i, j, els, pattern;
    141. els = document.getElementsByTagName('*');
    142. pattern = new RegExp("(^|\\s)" + searchClass + "(\\s|$)");
    143. for (i = 0, j = 0; i < els.length; i += 1) {
    144. if (pattern.test(els[i].className)) {
    145. classElements[j] = els[i];
    146. j += 1;
    147. }
    148. }
    149. return classElements;
    150. }
    151. };
    Alles anzeigen


    == Beispiele ==
    === Thumbshots ===

    Quellcode

    1. <script type="text/javascript">
    2. Bubble.init("externalURL", function (D) {
    3. return '<img alt="" style="width:150px;height:100px" src="http://www.m-software.de/screenshot/Screenshot.png?url='+ escape(D.href) +'&commingsoonimg=http://fadeout.de/images/thumbshot.png" />';
    4. });
    5. </script>


    == Demo ==
    demo.easy-coding.de/javascript/bubble/ und demo.easy-coding.de/javascript/bubble/download.zip

    9.512 mal gelesen