\t<script src="jquery.easing.js" type="text\/javascript"><\/script>\r\n\t<script src="jquery-1.3.2.js" type="text\/javascript"><\/script>\r\n\t<link href="tooltips.css" rel="stylesheet" type="text\/css" \/>\r\n\t<script type="text\/javascript" src="jquery.fancybox-1.3.4.pack.js"><\/script>\r\n <script type="text\/javascript" src="jquery.mousewheel-3.0.4.pack.js"><\/script>\r\n <link rel="stylesheet" href="jquery.fancybox-1.3.4.css" type="text\/css" media="screen" \/>\r\n\t<script type="text\/javascript"> $(document).ready(function() {\r\n\t\t$(".fancybox").fancybox();\r\n\t\t});\r\n\t<\/script><\/pre>\nDas als letztes vor dem Schlie\u00dfen des BODY<\/p>\n
<script src="tooltip.js" type="text\/javascript"><\/script><\/pre>\nDas hier ist die Tooltipp-CSS, ich nenne sie tooltips.css:<\/p>\n
#screenshot,\r\n#screenshotBox {\r\nheight : 202px!important;\r\nwidth : 202px!important;\r\ntop:1px;\r\nleft:1px;\r\n}\r\n#screenshot {\r\ncolor : #ffffff!important;\r\n\/*display : none!important;*\/\r\nposition : absolute!important;\r\nz-index:9900!important;\r\n}\r\n#screenshotBox {\r\nbackground : #fff none repeat scroll 0 0;\r\nposition: relative;\r\nz-index:9900!important;\r\n}\r\n#screenshotBox img {\r\nz-index : 9999!important;\r\nposition: absolute;\r\ntop:1px;\r\nleft:1px;\r\n}\r\n.triangle {\r\nborder-color : #fff transparent transparent;\r\nborder-style : solid;\r\nborder-width : 5px 5px 0;\r\nheight : 0;\r\nmargin-left : 125px;\r\nwidth : 0;\r\nz-index:9900!important;\r\n}<\/pre>\nDas ist das Tooltipp-Skript tooltip.js:<\/p>\n
\t\t\/* *******************************************\r\n\t\t*\r\n\t\t*\tTooltipp\r\n\t\t*\tSource: Fat-Man Collective - www.fat-man-collective.com\r\n\t\t*\tCoded by Yann Lorber - www.yannlorber.fr\r\n\t\t*\tAugust 2009\r\n\t\t*\r\n\t\t******************************************* *\/\t\r\n\r\n\t\tif( $("a.screenshot").length )\r\n\t\t{\r\n\t\t\txOffset = 175;\r\n\t\t\tyOffset = -127;\r\n\r\n\t\t\t$("a.screenshot").hover(function(e){\r\n\r\n\t\t\t\tvar imgurl = $(this).attr("id");\r\n\r\n\t\t\t\t$("body").append("<div id=\\"screenshot\\"><div id=\\"screenshotBox\\"><img src=\\"http:\/\/path-to-your-images-folder\/"+ imgurl +"\\" \/><\/div><div class=\\"triangle\\"><\/div>"+"<\/div>");\r\n\t\t\t\t$("#screenshot").css("top",(e.pageY - xOffset) + "px")\r\n\t\t\t\t\t\t\t\t.css("left",(e.pageX + yOffset) + "px")\r\n\t\t\t\t\t\t\t\t.fadeIn("fast");\r\n\t\t\t\t},function(){\t\r\n\r\n\t\t\t\t$("#screenshot").remove();\r\n \t\t});\t\r\n\r\n\t\t\t$("a.screenshot").mousemove(function(e){\r\n\r\n\t\t\t\t$("#screenshot").css("top",(e.pageY - xOffset) + "px")\r\n\t\t\t\t\t\t\t\t.css("left",(e.pageX + yOffset) + "px");\r\n\t\t\t});\r\n\t\t}<\/pre>\nIm HTML-Kontext sieht die Anwendung dann so aus (Beispiel):<\/p>\n
<ul> <li>?\tPenthouse am Park BBB (3)\r\n \t<a class="screenshot fancybox" rel="rundgang" title="Penthouse am Park" id="ref_penthouse-park_01_th.jpg" href="web-img\/ref_penthouse-park_01.jpg"><div class="photo"><\/div><\/a>\r\n\t<a class="screenshot fancybox" rel="rundgang" title="Penthouse am Park" id="ref_penthouse-park_02_th.jpg" href="web-img\/ref_penthouse-park_02.jpg"><div class="photo"><\/div><\/a>\r\n\t<a class="screenshot fancybox" rel="rundgang" title="Penthouse am Park" id="ref_penthouse-park_03_th.jpg" href="web-img\/ref_penthouse-park_03.jpg"><div class="photo"><\/div><\/a><\/li>\r\n<\/ul><\/pre>\nDie Class \u201escreen\u00adshot\u201c sagt hallo zum Tooltipp-Script, das sich aus der \u201eid\u201c das im Tool\u00adtipp anzu\u00adzei\u00adgende Bild holt. Die Klasse \u201efan\u00adcy\u00adbox\u201c ruft die Fan\u00adcy\u00adbox ins Standby, die das Bild beim Klick aufs Kamer\u00adai\u00adcon \u00f6ffnet. Aus dem \u201etitle\u201c holt sich Fan\u00adcy\u00adbox die Bild\u00adun\u00adter\u00adschrift. Das Attri\u00adbut \u201erel\u201c sagt Fan\u00adcy\u00adbox, dass es sich um ein Bild einer Reihe han\u00addelt, die sp\u00e4\u00adter in der Fan\u00adcy\u00adbox auch der Reihe nach, also ohne das Bild wie\u00adder schlie\u00ad\u00dfen und das n\u00e4chste \u00f6ffnen zu m\u00fcs\u00adsen, ange\u00adschaut wer\u00adden k\u00f6n\u00adnen. Mit meh\u00adre\u00adren \u201erel\u201c-Namen k\u00f6n\u00adnen auch inner\u00adhalb ein\u2013 und der\u00adsel\u00adben HTML-Seite meh\u00adrere Rei\u00adhen erstellt wer\u00adden, ohne \u201erel\u201c-Attribut bleibt das ent\u00adspre\u00adchende Bild ein Soli\u00adt\u00e4r. Ah ja, f\u00fcr das lus\u00adtige Kamera-Icon, des\u00adsen mou\u00adse\u00adovern den Tootipp-Effekt abfeu\u00adert habe ich in CSS so geschrieben:<\/p>\n
ul li .photo {\r\n\tdisplay:inline-block;\r\n\tborder:none;\r\n\twidth:15px;\r\n\theight:12px;\r\n\tmargin-left:7px;\r\n\tbackground: url(web-img\/referenzen_kameraicon.png) no-repeat\r\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"Referenzenlisten k\u00f6nnen ziemlich dr\u00f6ge sein. Oft bleibt es bei einer Liste von Namen, weil man keinen Patchworkteppich von Bildern abliefern will. Was aber, wenn man einfach einen Haufen extem toller Bilder auf Lager hat? Warum nicht dezente Kameraicons hinter die Referenzen setzen, die bei Mouseover durch ein Vorschaubild-Tooltip zum Aufklicken eines kleinen Galerierundgangs einladen! Das […]<\/p>\n","protected":false},"author":1,"featured_media":1600,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[108,8],"tags":[],"class_list":["post-1599","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-lumoplan","category-plugins"],"_links":{"self":[{"href":"https:\/\/whitepapers.grafik-und-redaktion.de\/index.php?rest_route=\/wp\/v2\/posts\/1599","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/whitepapers.grafik-und-redaktion.de\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/whitepapers.grafik-und-redaktion.de\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/whitepapers.grafik-und-redaktion.de\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/whitepapers.grafik-und-redaktion.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1599"}],"version-history":[{"count":5,"href":"https:\/\/whitepapers.grafik-und-redaktion.de\/index.php?rest_route=\/wp\/v2\/posts\/1599\/revisions"}],"predecessor-version":[{"id":3077,"href":"https:\/\/whitepapers.grafik-und-redaktion.de\/index.php?rest_route=\/wp\/v2\/posts\/1599\/revisions\/3077"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/whitepapers.grafik-und-redaktion.de\/index.php?rest_route=\/wp\/v2\/media\/1600"}],"wp:attachment":[{"href":"https:\/\/whitepapers.grafik-und-redaktion.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1599"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/whitepapers.grafik-und-redaktion.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1599"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/whitepapers.grafik-und-redaktion.de\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1599"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"\"](\"http:\/\/gr-01.de\/whitepapers.grafik-und-redaktion.de\/uploads\/2012\/04\/tooltips-plus-fancybox-620x168.jpg\" "\\"tooltips-plus-fancybox\\"")
<\/a><\/p>\n