Hallo,
Ich habe eine kleine Bildergalerie erstellt, wo beim überfahren des thumb eine vergrößerte Ansicht generiert wird. Auf dem heimischen PC funktioniert das, beim Hoster 1blu nicht. Ich habe einen anderen Hoster probiert(strato) da funktioniert das aber. Hier der Direktlinkhttp://raumausstatter-hennig.de/polsterarbeiten.html
Danke schon mal für eure Antworten
Hier der Code
Hier der JS Code
Ich habe eine kleine Bildergalerie erstellt, wo beim überfahren des thumb eine vergrößerte Ansicht generiert wird. Auf dem heimischen PC funktioniert das, beim Hoster 1blu nicht. Ich habe einen anderen Hoster probiert(strato) da funktioniert das aber. Hier der Direktlinkhttp://raumausstatter-hennig.de/polsterarbeiten.html
Danke schon mal für eure Antworten
Hier der Code
Code:
.ddimgtooltip{
box-shadow: 3px 3px 5px #818181; /*shadow for CSS3 capable browsers.*/
-webkit-box-shadow: 3px 3px 5px #818181;
-moz-box-shadow: 3px 3px 5px #818181;
display:none;
position:absolute;
border:1px solid black;
background:white;
color: black;
z-index:2000;
padding: 4px;
margin-top:-50px;
}
Code:
/* 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}
// Gardinen
tooltips[1]=["../raumausstatterhennig/foto/gardinen/1.jpg", ]
tooltips[3]=["../raumausstatterhennig/foto/gardinen/3.jpg", ]
tooltips[4]=["../raumausstatterhennig/foto/gardinen/4.jpg", ]
tooltips[5]=["../raumausstatterhennig/foto/gardinen/5.jpg", ]
tooltips[6]=["../raumausstatterhennig/foto/gardinen/6.jpg", ]
tooltips[7]=["../raumausstatterhennig/foto/gardinen/7.jpg", ]
tooltips[8]=["../raumausstatterhennig/foto/gardinen/8.jpg", ]
tooltips[9]=["../raumausstatterhennig/foto/gardinen/9.jpg", ]
tooltips[10]=["../raumausstatterhennig/foto/gardinen/10.jpg", ]
tooltips[11]=["../raumausstatterhennig/foto/gardinen/11.jpg", ]
tooltips[12]=["../raumausstatterhennig/foto/gardinen/12.jpg", ]
// Polsterarbeiten
tooltips[13]=["../raumausstatterhennig/foto/polsterarbeiten/1.jpg", ]
tooltips[14]=["../raumausstatterhennig/foto/polsterarbeiten/2.jpg", ]
tooltips[15]=["../raumausstatterhennig/foto/polsterarbeiten/5.jpg", ]
tooltips[16]=["../raumausstatterhennig/foto/polsterarbeiten/3.jpg", ]
tooltips[17]=["../raumausstatterhennig/foto/polsterarbeiten/4.jpg", ]
tooltips[18]=["../raumausstatterhennig/foto/polsterarbeiten/6.jpg", ]
tooltips[21]=["../raumausstatterhennig/foto/polsterarbeiten/7.jpg", ]
//Fertigparkett
tooltips[19]=["../raumausstatterhennig/foto/fertigparkett/1.jpg", ]
tooltips[20]=["../raumausstatterhennig/foto/fertigparkett/2.jpg", ]
//Plisseestores
tooltips[22]=["../raumausstatterhennig/foto/plissee/1.jpg", ]
tooltips[111]=["duck2.gif", "tooltip mit nummer wegen separatem text", {background:"#DDECFF", width:"200px"}]
tooltips[112]=["../dynamicindex14/winter.jpg"]
tooltips[113]=["../dynamicindex17/bridge.gif", "beispieltext.", {background:"white", font:"bold 12px Arial"}]
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 $('<div id="' + tipid + '" class="ddimgtooltip" />').html(
'<div style="text-align:center"><img src="' + tipinfo[0] + '" /></div>'
+ ((tipinfo[1])? '<div style="text-align:left; margin-top:5px">'+tipinfo[1]+'</div>' : '')
)
.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]")
