/* 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} tooltips[0]=["http://www.stepbystepwatercolour.com/banners/moorsbanner.jpg", "Yorkshire Moors",,] tooltips[1]=["http://www.stepbystepwatercolour.com/banners/142-deserted%20beach.jpg", "Deserted Beach",,] tooltips[2]=["http://www.stepbystepwatercolour.com/banners/gandels.jpg", "Chateau Gandels",,] tooltips[3]=["http://www.stepbystepwatercolour.com/banners/soreze balcony.jpg", "Balcony at Soreze",,] tooltips[4]=["http://www.stepbystepwatercolour.com/banners/stjuliahouse.jpg", "Two windows",,] tooltips[5]=["http://www.stepbystepwatercolour.com/banners/stfelixpw.jpg", "Cafe at St Felix",,] tooltips[6]=["http://www.stepbystepwatercolour.com/banners/sorezedoor.jpg", "Door in Soreze",,] tooltips[7]=["http://www.stepbystepwatercolour.com/banners/costa brava.jpg", "Costa Brava",,] tooltips[8]=["http://www.stepbystepwatercolour.com/banners/inkpoppies.jpg", "Poppies",,] tooltips[9]=["http://www.stepbystepwatercolour.com/banners/quiberon.jpg", "quiberon",,] tooltips[10]=["http://www.stepbystepwatercolour.com/banners/lautrec.jpg", "Lautrec",,] tooltips[11]=["http://www.stepbystepwatercolour.com/banners/sete.jpg", "Sete",,] tooltips[12]=["http://www.stepbystepwatercolour.com/banners/hotel brasserie.jpg", "Hotel Brasserie",,] tooltips[13]=["http://www.stepbystepwatercolour.com/banners/stfelixwinter.jpg", "St Felix in winter",,] tooltips[14]=["http://www.stepbystepwatercolour.com/banners/wyld.jpg", "William Wyld",,] tooltips[15]=["http://www.stepbystepwatercolour.com/banners/girtin.jpg", "Thomas Girtin",,] tooltips[16]=["http://www.stepbystepwatercolour.com/banners/cotman.jpg", "Johm Sel Cotman",,] tooltips[17]=["http://www.stepbystepwatercolour.com/banners/cox.jpg", "David Cox",,] tooltips[18]=["http://www.stepbystepwatercolour.com/banners/giorgio.jpg", "JMW Turner",,] tooltips[19]=["http://www.stepbystepwatercolour.com/banners/yorkshiremoorsinsunbanner.jpg", "Moors in Sunlight",,] tooltips[20]=["http://www.stepbystepwatercolour.com/banners/sunsetbanner.jpg", "Sunset",,] tooltips[21]=["http://www.stepbystepwatercolour.com/banners/sunflower.jpg", "Sunflower",,] tooltips[22]=["http://www.stepbystepwatercolour.com/banners/lighthouse banner.jpg", "Lighthouse",,] tooltips[23]=["http://www.stepbystepwatercolour.com/banners/sunflowerharvest banner.jpg", "French Landscape",,] tooltips[24]=["http://www.stepbystepwatercolour.com/banners/feenchstreetbanner.jpg", "French street",,] tooltips[25]=["http://www.stepbystepwatercolour.com/banners/tynemouthbeach3banner.jpg", "Beach at Dusk",,] tooltips[26]=["http://www.stepbystepwatercolour.com/banners/tarasconblue banner.jpg", "Pyrennean Town",,] tooltips[27]=["http://www.stepbystepwatercolour.com/banners/autumn countryside banner.jpg", "Autumn countryside",,] tooltips[28]=["http://www.stepbystepwatercolour.com/banners/frenchcountrysidebanner.jpg", "french countryside",,] tooltips[29]=["http://www.stepbystepwatercolour.com/banners/southernfrenchlandscapebanner.jpg", "southern French Countryside",,] tooltips[30]=["http://www.stepbystepwatercolour.com/banners/evening on the moorsbanner.jpg", "Moors in evening",,] tooltips[31]=["http://www.stepbystepwatercolour.com/banners/rolling hills of tarn banner.jpg", "Rolling hills",,] tooltips[32]=["http://www.stepbystepwatercolour.com/banners/lesomail.jpg", "Le Somail - canal du midi",,] tooltips[33]=["http://www.stepbystepwatercolour.com/banners/homps.jpg", "Homps - canal du midi",,] tooltips[34]=["http://www.stepbystepwatercolour.com/banners/cinderhills snow.jpg", "Snow at Cinderhills",,] tooltips[35]=["http://www.stepbystepwatercolour.com/banners/078-albibanner.jpg", "Albi",,] tooltips[36]=["http://www.stepbystepwatercolour.com/banners/072-albi-window.jpg", "Window (painted from sketch)",,] tooltips[37]=["http://www.stepbystepwatercolour.com/banners/055-estuary.jpg", "Estuary",,] tooltips[38]=["http://www.stepbystepwatercolour.com/banners/054-arched door.jpg", "Arched Door",,] tooltips[39]=["http://www.stepbystepwatercolour.com/banners/050-crowdedstreet.jpg", "crowded Street",,] tooltips[40]=["http://www.stepbystepwatercolour.com/banners/frenchbridgebanner.jpg", "French Bridge",,] tooltips[41]=["http://www.stepbystepwatercolour.com/banners/frenchfarmhousebanner.jpg", "french farmhouse",,] tooltips[42]=["http://www.stepbystepwatercolour.com/banners/frenchmarketbanner.jpg", "French Market",,] tooltips[43]=["http://www.stepbystepwatercolour.com/banners/frenchcafebanner.jpg", "Cafe",,] tooltips[44]=["http://www.stepbystepwatercolour.com/banners/79stsalvi.jpg", "St Salvi Cloisters",,] tooltips[45]=["http://www.stepbystepwatercolour.com/banners/auriac.jpg", "Auriac sur Vendinelle",,] tooltips[46]=["http://www.stepbystepwatercolour.com/banners/096-appletreeinsnow.jpg", "Snow in the orchard",,] tooltips[47]=["http://www.stepbystepwatercolour.com/banners/118-revelmarket.jpg", "Revel Market",,] tooltips[48]=["http://www.stepbystepwatercolour.com/banners/098-farmhousebanner.jpg", "Grand Farmhouse",,] tooltips[49]=["http://www.stepbystepwatercolour.com/banners/boatsbarcelona.jpg", "Boats in Barcelona",,] tooltips[50]=["http://www.stepbystepwatercolour.com/banners/albi1.jpg", "Albistreet",,] tooltips[51]=["http://www.stepbystepwatercolour.com/banners/soual.jpg", "Soual",,] tooltips[52]=["http://www.stepbystepwatercolour.com/banners/cafesoreze.jpg", "Cafe at Soreze",,] tooltips[53]=["http://www.stepbystepwatercolour.com/banners/flowershop.jpg", "Flowershop",,] tooltips[54]=["http://www.stepbystepwatercolour.com/banners/glenda.jpg", "french house",,] tooltips[55]=["http://www.stepbystepwatercolour.com/banners/moortopbanner.jpg", "Moor top",,] tooltips[56]=["http://www.stepbystepwatercolour.com/banners/frenchhilltop banner.jpg", "French hilltop village",,] tooltips[57]=["http://www.stepbystepwatercolour.com/banners/churchbanner.jpg", "Church",,] tooltips[58]=["http://www.stepbystepwatercolour.com/banners/winterlandscape banner.jpg", "Winter Trees",,] tooltips[59]=["http://www.stepbystepwatercolour.com/banners/blackmountainview banner.jpg", "View of Black Mountains",,] tooltips[60]=["http://www.stepbystepwatercolour.com/banners/053-sunflowers.jpg", "Sunflowers",,] tooltips[61]=["http://www.stepbystepwatercolour.com/banners/rueazais.jpg", "Rue Azais",,] tooltips[62]=["http://www.stepbystepwatercolour.com/banners/ontherocksbanner.jpg", "On the rocks",,] tooltips[63]=["http://www.stepbystepwatercolour.com/banners/morningonmoorsbanner.jpg", "Morning on the moor",,] tooltips[64]=["http://www.stepbystepwatercolour.com/banners/057-ruemalmagrade.jpg", "Rue Malmagrade",,] tooltips[65]=["http://www.stepbystepwatercolour.com/banners/049-lake.jpg", "Lake",,] tooltips[66]=["http://www.stepbystepwatercolour.com/banners/yorkshirevillageinsnowbanner.jpg", "More snow in England",,] tooltips[67]=["http://www.stepbystepwatercolour.com/banners/wheatfield banner.jpg", "Wheatfield",,] tooltips[68]=["http://www.stepbystepwatercolour.com/banners/boulangerie banner.jpg", "Boulangerie",,] tooltips[69]=["http://www.stepbystepwatercolour.com/banners/acrossthemoors banner.jpg", "across the moors",,] tooltips[70]=["http://www.stepbystepwatercolour.com/banners/grandcafebanner.jpg", "Grand Cafe",,] tooltips[71]=["http://www.stepbystepwatercolour.com/banners/milloncanalbanner.jpg", "Mill on the canal",,] tooltips[72]=["http://www.stepbystepwatercolour.com/banners/flowervasebanner.jpg", "Flowers",,] tooltips[73]=["http://www.stepbystepwatercolour.com/banners/cordesbanner.jpg", "Medieval Lane",,] tooltips[74]=["http://www.stepbystepwatercolour.com/banners/frenchtearoombanner.jpg", "Salon De The",,] tooltips[75]=["http://www.stepbystepwatercolour.com/banners/snowinyorkshirebanner.jpg", "Snow in England",,] tooltips[76]=["http://www.stepbystepwatercolour.com/banners/gardentreebanner.jpg", "Garden Tree",,] tooltips[77]=["http://www.stepbystepwatercolour.com/banners/frenchwindowbanner.jpg", "french window",,] tooltips[78]=["http://www.stepbystepwatercolour.com/banners/malkinhouse banner.jpg", "Farmtrack",,] tooltips[79]=["http://www.stepbystepwatercolour.com/banners/borotransporter copy.jpg", "Transporter bridge",,] tooltips[80]=["http://www.stepbystepwatercolour.com/banners/albi2banner.jpg", "Albi",,] tooltips[81]=["http://www.stepbystepwatercolour.com/banners/074-sunflowerfield.jpg", "Sunflowerfield",,] tooltips[82]=["http://www.stepbystepwatercolour.com/banners/medievalstreetbanner.jpg", "French street",,] tooltips[83]=["http://www.stepbystepwatercolour.com/banners/048-oldmill.jpg", "Old Mill",,] tooltips[84]=["http://www.stepbystepwatercolour.com/banners/januarybeachbanner.jpg", "January Beach",,] tooltips[85]=["http://www.stepbystepwatercolour.com/banners/poppiesbanner.jpg", "Poppies",,] tooltips[86]=["http://www.stepbystepwatercolour.com/banners/bodensee.jpg", "Bodensee",,] tooltips[87]=["http://www.stepbystepwatercolour.com/banners/norhamcastle.jpg", "Norham Castle",,] tooltips[88]=["http://www.stepbystepwatercolour.com/banners/bluerigi.jpg", "Blue Rigi",,] tooltips[90]=["http://www.stepbystepwatercolour.com/banners/150-venice banner.jpg", "Venice Grand Canal",,] tooltips[91]=["http://www.stepbystepwatercolour.com/banners/151-venice canal.jpg", "Venice Canal",,] 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]")