/* Image w/ description tooltip v2.0 * Created: April 23rd, 2010. This notice must stay intact for usage * Author: Dynamic Drive at http://www.dynamicdrive.com/ * Visit http://www.dynamicdrive.com/ for full source code */ var ddimgtooltip={ tiparray:function(){ var tooltips=[] //define each tooltip below: tooltip[inc]=['path_to_image', 'optional desc', optional_CSS_object] //For desc parameter, backslash any special characters inside your text such as apotrophes ('). Example: "I\'m the king of the world" //For CSS object, follow the syntax: {property1:"cssvalue1", property2:"cssvalue2", etc} /*Graphic Solutions Captions*/ tooltips[0]=["blank.gif", "Pre-sell & Drive-thru Menu Board Solutions", {background:"#FFFFFF", color:"#666", border:"1px solid #666", padding:"0px 5px 5px 5px", weight:"bold"}] tooltips[1]=["/js/blank.gif", "Interior LCD Digital Menu Boards", {background:"#FFFFFF", color:"#666", border:"1px solid #666", padding:"0px 5px 5px 5px", weight:"bold"}] tooltips[2]=["/js/blank.gif", "Exterior Canopy & Fascia Graphics", {background:"#FFFFFF", color:"#666", border:"1px solid #666", padding:"0px 5px 5px 5px", weight:"bold"}] tooltips[3]=["/js/blank.gif", "LED illuminated Canopy Fascia & Pump graphics", {background:"#FFFFFF", color:"#666", border:"1px solid #666", padding:"0px 5px 5px 5px", weight:"bold"}] tooltips[4]=["/js/blank.gif", "Transom Banner & Interior Aisle Guides", {background:"#FFFFFF", color:"#666", border:"1px solid #666", padding:"0px 5px 5px 5px", weight:"bold"}] tooltips[5]=["/js/blank.gif", "Department Icons", {background:"#FFFFFF", color:"#666", border:"1px solid #666", padding:"0px 5px 5px 5px", weight:"bold"}] tooltips[6]=["/js/blank.gif", "Store within a Store Brand Identification", {background:"#FFFFFF", color:"#666", border:"1px solid #666", padding:"0px 5px 5px 5px", weight:"bold"}] tooltips[7]=["/js/blank.gif", "Custom Displays with Changeable Graphics", {background:"#FFFFFF", color:"#666", border:"1px solid #666", padding:"0px 5px 5px 5px", weight:"bold"}] tooltips[8]=["/js/blank.gif", "Custom Fixture & Wall Graphics", {background:"#FFFFFF", color:"#666", border:"1px solid #666", padding:"0px 5px 5px 5px", weight:"bold"}] /*Printed Graphics Solutions Photos*/ tooltips[9]=["/images/products/graphic-solutions/printed-graphics/aisle-guides.jpg", "", {background:"#FFFFFF", color:"#666", border:"1px solid #666", padding:"0px"}] tooltips[10]=["/images/products/graphic-solutions/printed-graphics/architectural.jpg", "", {background:"#FFFFFF", color:"#666", border:"1px solid #666", padding:"0px"}] tooltips[11]=["/images/products/graphic-solutions/printed-graphics/banners.jpg", "", {background:"#FFFFFF", color:"#666", border:"1px solid #666", padding:"0px"}] tooltips[12]=["/images/products/graphic-solutions/printed-graphics/canopy.jpg", "", {background:"#FFFFFF", color:"#666", border:"1px solid #666", padding:"0px"}] tooltips[13]=["/images/products/graphic-solutions/printed-graphics/decals.jpg", "", {background:"#FFFFFF", color:"#666", border:"1px solid #666", padding:"0px"}] tooltips[14]=["/images/products/graphic-solutions/printed-graphics/departmental.jpg", "", {background:"#FFFFFF", color:"#666", border:"1px solid #666", padding:"0px"}] tooltips[15]=["/images/products/graphic-solutions/printed-graphics/dimensional-letter.jpg", "", {background:"#FFFFFF", color:"#666", border:"1px solid #666", padding:"0px"}] tooltips[16]=["/images/products/graphic-solutions/printed-graphics/display.jpg", "", {background:"#FFFFFF", color:"#666", border:"1px solid #666", padding:"0px"}] tooltips[17]=["/images/products/graphic-solutions/printed-graphics/fleet.jpg", "", {background:"#FFFFFF", color:"#666", border:"1px solid #666", padding:"0px"}] tooltips[18]=["/images/products/graphic-solutions/printed-graphics/floor.jpg", "", {background:"#FFFFFF", color:"#666", border:"1px solid #666", padding:"0px"}] tooltips[19]=["/images/products/graphic-solutions/printed-graphics/magnetic.jpg", "", {background:"#FFFFFF", color:"#666", border:"1px solid #666", padding:"0px"}] tooltips[20]=["/images/products/graphic-solutions/printed-graphics/pop.jpg", "", {background:"#FFFFFF", color:"#666", border:"1px solid #666", padding:"0px"}] tooltips[21]=["/images/products/graphic-solutions/printed-graphics/pumps.jpg", "", {background:"#FFFFFF", color:"#666", border:"1px solid #666", padding:"0px"}] tooltips[22]=["/images/products/graphic-solutions/printed-graphics/technical.jpg", "", {background:"#FFFFFF", color:"#666", border:"1px solid #666", padding:"0px"}] tooltips[23]=["/images/products/graphic-solutions/printed-graphics/valances.jpg", "", {background:"#FFFFFF", color:"#666", border:"1px solid #666", padding:"0px"}] tooltips[24]=["/images/products/graphic-solutions/printed-graphics/window.jpg", "", {background:"#FFFFFF", color:"#666", border:"1px solid #666", padding:"0px"}] /*Printed Graphics Solutions Photos*/ tooltips[25]=["/images/products/graphic-solutions/menu-board-systems/interior-front-lit.jpg", "", {background:"#FFFFFF", color:"#666", border:"1px solid #666", padding:"0px"}] tooltips[26]=["/images/products/graphic-solutions/menu-board-systems/interior-back-lit.jpg", "", {background:"#FFFFFF", color:"#666", border:"1px solid #666", padding:"0px"}] tooltips[27]=["/images/products/graphic-solutions/menu-board-systems/interior-digital.jpg", "", {background:"#FFFFFF", color:"#666", border:"1px solid #666", padding:"0px"}] tooltips[28]=["/images/products/graphic-solutions/menu-board-systems/exterior-pre-sell.jpg", "", {background:"#FFFFFF", color:"#666", border:"1px solid #666", padding:"0px"}] tooltips[29]=["/images/products/graphic-solutions/menu-board-systems/exterior-digital.jpg", "", {background:"#FFFFFF", color:"#666", border:"1px solid #666", padding:"0px"}] tooltips[30]=["/images/products/graphic-solutions/menu-board-systems/drive-thru.jpg", "", {background:"#FFFFFF", color:"#666", border:"1px solid #666", padding:"0px"}] /*LED Graphics Photos*/ tooltips[31]=["/images/products/graphic-solutions/led-graphics/back-lit.jpg", "", {background:"#FFFFFF", color:"#666", border:"1px solid #666", padding:"0px"}] tooltips[32]=["/images/products/graphic-solutions/led-graphics/back-lit-and-edge-glow.jpg", "", {background:"#FFFFFF", color:"#666", border:"1px solid #666", padding:"0px"}] tooltips[33]=["/images/products/graphic-solutions/led-graphics/colored-edge-glow.jpg", "", {background:"#FFFFFF", color:"#666", border:"1px solid #666", padding:"0px"}] tooltips[34]=["/images/products/graphic-solutions/led-graphics/edge-lit.jpg", "", {background:"#FFFFFF", color:"#666", border:"1px solid #666", padding:"0px"}] tooltips[35]=["/images/products/graphic-solutions/led-graphics/front-lit.jpg", "", {background:"#FFFFFF", color:"#666", border:"1px solid #666", padding:"0px"}] tooltips[36]=["/images/products/graphic-solutions/led-graphics/internally-lit.jpg", "", {background:"#FFFFFF", color:"#666", border:"1px solid #666", padding:"0px"}] /*Structural Graphics Photos*/ tooltips[37]=["/images/products/graphic-solutions/structural-graphics-signage/acm-systems.jpg", "", {background:"#FFFFFF", color:"#666", border:"1px solid #666", padding:"0px"}] tooltips[38]=["/images/products/graphic-solutions/structural-graphics-signage/accent-bands.jpg", "", {background:"#FFFFFF", color:"#666", border:"1px solid #666", padding:"0px"}] tooltips[39]=["/images/products/graphic-solutions/structural-graphics-signage/led-retrofit.jpg", "", {background:"#FFFFFF", color:"#666", border:"1px solid #666", padding:"0px"}] tooltips[40]=["/images/products/graphic-solutions/structural-graphics-signage/dispensers-cladding.jpg", "", {background:"#FFFFFF", color:"#666", border:"1px solid #666", padding:"0px"}] tooltips[41]=["/images/products/graphic-solutions/structural-graphics-signage/building-cladding.jpg", "", {background:"#FFFFFF", color:"#666", border:"1px solid #666", padding:"0px"}] tooltips[42]=["/images/products/graphic-solutions/structural-graphics-signage/illuminated-signage.jpg", "", {background:"#FFFFFF", color:"#666", border:"1px solid #666", padding:"0px"}] tooltips[43]=["/images/products/graphic-solutions/structural-graphics-signage/fascia-graphics.jpg", "", {background:"#FFFFFF", color:"#666", border:"1px solid #666", padding:"0px"}] tooltips[44]=["/images/products/graphic-solutions/structural-graphics-signage/spanners.jpg", "", {background:"#FFFFFF", color:"#666", border:"1px solid #666", padding:"0px"}] tooltips[45]=["/images/products/graphic-solutions/structural-graphics-signage/dispenser-door.jpg", "", {background:"#FFFFFF", color:"#666", border:"1px solid #666", padding:"0px"}] tooltips[46]=["/images/products/graphic-solutions/structural-graphics-signage/dispenser-skin.jpg", "", {background:"#FFFFFF", color:"#666", border:"1px solid #666", padding:"0px"}] tooltips[47]=["/images/products/graphic-solutions/structural-graphics-signage/wayfinding.jpg", "", {background:"#FFFFFF", color:"#666", border:"1px solid #666", padding:"0px"}] /*LED Display Photos*/ tooltips[48]=["/images/products/graphic-solutions/led-display/architectural.jpg", "", {background:"#FFFFFF", color:"#666", border:"1px solid #666", padding:"0px"}] tooltips[49]=["/images/products/graphic-solutions/led-display/commercial.jpg", "", {background:"#FFFFFF", color:"#666", border:"1px solid #666", padding:"0px"}] tooltips[50]=["/images/products/graphic-solutions/led-display/retail.jpg", "", {background:"#FFFFFF", color:"#666", border:"1px solid #666", padding:"0px"}] tooltips[51]=["/images/products/graphic-solutions/led-display/education.jpg", "", {background:"#FFFFFF", color:"#666", border:"1px solid #666", padding:"0px"}] tooltips[52]=["/images/products/graphic-solutions/led-display/museum-non-profit.jpg", "", {background:"#FFFFFF", color:"#666", border:"1px solid #666", padding:"0px"}] /*Smartvision Home*/ tooltips[53]=["/js/blank.gif", "Outdoor Video Displays", {background:"#FFFFFF", color:"#666", border:"1px solid #666", padding:"0px 5px 5px 5px", weight:"bold"}] tooltips[54]=["/js/blank.gif", "Fascia Displays", {background:"#FFFFFF", color:"#666", border:"1px solid #666", padding:"0px 5px 5px 5px", weight:"bold"}] tooltips[55]=["/js/blank.gif", "Virtual Scoring", {background:"#FFFFFF", color:"#666", border:"1px solid #666", padding:"0px 5px 5px 5px", weight:"bold"}] tooltips[56]=["/js/blank.gif", "Indoor Video Displays", {background:"#FFFFFF", color:"#666", border:"1px solid #666", padding:"0px 5px 5px 5px", weight:"bold"}] tooltips[57]=["/js/blank.gif", "Custom Video Displays", {background:"#FFFFFF", color:"#666", border:"1px solid #666", padding:"0px 5px 5px 5px", weight:"bold"}] tooltips[58]=["/js/blank.gif", "Commercial Displays", {background:"#FFFFFF", color:"#666", border:"1px solid #666", padding:"0px 5px 5px 5px", weight:"bold"}] tooltips[59]=["/js/blank.gif", "Entertainment Displays", {background:"#FFFFFF", color:"#666", border:"1px solid #666", padding:"0px 5px 5px 5px", weight:"bold"}] tooltips[60]=["/js/blank.gif", "Architectural Custom", {background:"#FFFFFF", color:"#666", border:"1px solid #666", padding:"0px 5px 5px 5px", weight:"bold"}] tooltips[61]=["/js/blank.gif", "Billboard Displays", {background:"#FFFFFF", color:"#666", border:"1px solid #666", padding:"0px 5px 5px 5px", weight:"bold"}] return tooltips //do not remove/change this line }(), tooltipoffsets: [20, -30], //additional x and y offset from mouse cursor for tooltips //***** NO NEED TO EDIT BEYOND HERE tipprefix: 'imgtip', //tooltip ID prefixes createtip:function($, tipid, tipinfo){ if ($('#'+tipid).length==0){ //if this tooltip doesn't exist yet return $('
').html( '
' + ((tipinfo[1])? '
'+tipinfo[1]+'
' : '') ) .css(tipinfo[2] || {}) .appendTo(document.body) } return null }, positiontooltip:function($, $tooltip, e){ var x=e.pageX+this.tooltipoffsets[0], y=e.pageY+this.tooltipoffsets[1] var tipw=$tooltip.outerWidth(), tiph=$tooltip.outerHeight(), x=(x+tipw>$(document).scrollLeft()+$(window).width())? x-tipw-(ddimgtooltip.tooltipoffsets[0]*2) : x y=(y+tiph>$(document).scrollTop()+$(window).height())? $(document).scrollTop()+$(window).height()-tiph-10 : y $tooltip.css({left:x, top:y}) }, showbox:function($, $tooltip, e){ $tooltip.show() this.positiontooltip($, $tooltip, e) }, hidebox:function($, $tooltip){ $tooltip.hide() }, init:function(targetselector){ jQuery(document).ready(function($){ var tiparray=ddimgtooltip.tiparray var $targets=$(targetselector) if ($targets.length==0) return var tipids=[] $targets.each(function(){ var $target=$(this) $target.attr('rel').match(/\[(\d+)\]/) //match d of attribute rel="imgtip[d]" var tipsuffix=parseInt(RegExp.$1) //get d as integer var tipid=this._tipid=ddimgtooltip.tipprefix+tipsuffix //construct this tip's ID value and remember it var $tooltip=ddimgtooltip.createtip($, tipid, tiparray[tipsuffix]) $target.mouseenter(function(e){ var $tooltip=$("#"+this._tipid) ddimgtooltip.showbox($, $tooltip, e) }) $target.mouseleave(function(e){ var $tooltip=$("#"+this._tipid) ddimgtooltip.hidebox($, $tooltip) }) $target.mousemove(function(e){ var $tooltip=$("#"+this._tipid) ddimgtooltip.positiontooltip($, $tooltip, e) }) if ($tooltip){ //add mouseenter to this tooltip (only if event hasn't already been added) $tooltip.mouseenter(function(){ ddimgtooltip.hidebox($, $(this)) }) } }) }) //end dom ready } } //ddimgtooltip.init("targetElementSelector") ddimgtooltip.init("*[rel^=imgtip]")