/*
* Url preview script
* powered by jQuery (http://www.jquery.com)
*
* written by Alen Grakalic (http://cssglobe.com)
*
* for more info visit http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
*
* code trouvé sur le site :
* http://www.webinventif.fr/comment-faire-des-info-bulles-avec-preview-dimage-via-jquery/
*/
//--------------------------------------------------------------------
// JavaScript pris sur le site: "http://www.java.scripts-fr.com"
// Ce script récupère les dimensions de la fenêtre pour afficher l'image au bon endroit
if (document.body)
{
var larg = (document.body.clientWidth);
var haut = (document.body.clientHeight);
}
/*
Ici une version DOM (le script est entre les balises et ) qui devrait fonctionner sur tous les navigateurs.
On commence donc par détecter la présence de l'objet body dans le DOM.
Si il est présent, on va mettre dans 2 variables larg et haut la largeur et la hauteur de la fenêtre pris avec les propriétés clientWidth et clientHeight de l'objet body.
*/
else
{
var larg = (window.innerWidth);
var haut = (window.innerHeight);
}
/*
Cette version est purement javascript et ne fonctionne pas sous IE (les propriétés innerWidth et innerHeight de l'objet window n'ayant pas été intégrée dans ce navigateur).
Si l'objet n'existe pas, on met dans nos variables la hauteur et la largeur de la page. Seulement on utilisera ici les propriété innerWidth et innerHeight de l'objet window.
*/
//document.write("Cette fenêtre fait " + larg + " de large et "+haut+" de haut");
// ensuite on en fait ce que l'on veut, la je les écrit avec la méthode write
// de l'objet document
// fin du script -->
//--------------------------------------------------------------------
function show(object) {
if (document.layers && document.layers[object])
document.layers[object].visibility = 'visible';
else if (document.all)
document.all[object].style.visibility = 'visible';
}
function hide(object) {
if (document.layers && document.layers[object])
document.layers[object].visibility = 'hidden';
else if (document.all)
document.all[object].style.visibility = 'hidden';
}
this.screenshotPreview = function(){
/* CONFIG */
xOffset = 10;
yOffset = 30;
// these 2 variable determine popup's distance from the cursor
// you might want to adjust to get the right result
/* END CONFIG */
$("a.screenshot").hover(function(e){
this.t = this.title;
this.title = "";
var c = (this.t != "") ? "
" + this.t : "";
$("body").append("![url preview]("+ this.rel +")
"+ c +"
");
// cherche la taille de la fenetre du navigateur
if (document.body)
{
var larg = (document.body.clientWidth);
var haut = (document.body.clientHeight);
}
else
{
var larg = (window.innerWidth);
var haut = (window.innerHeight);
}
// cherche la taille de l'image
mon_image = new Image()
mon_image.src = this.rel;
// si pas assez de place à droite, on positionne l'image à gauche du curseur
if ((larg - e.pageX) < (mon_image.width + 60))
yOffset = 0 - (mon_image.width + 30);
else
yOffset = 30;
// si pas assez de place en bas, on positionne l'image au-dessus du curseur
if ((haut - e.pageY) < (mon_image.height + 70))
xOffset = mon_image.height + 10;
else
xOffset = 10;
$("#screenshot")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
},
function(){
this.title = this.t;
$("#screenshot").remove();
});
$("a.screenshot").mousemove(function(e){
// cherche la taille de la fenetre du navigateur
if (document.body)
{
var larg = (document.body.clientWidth);
var haut = (document.body.clientHeight);
}
else
{
var larg = (window.innerWidth);
var haut = (window.innerHeight);
}
// cherche la taille de l'image
mon_image = new Image()
mon_image.src = this.rel;
//alert("width : "+image_1.width+"\nheight : "+image_1.height);
// si pas assez de place à droite, on positionne l'image à gauche du curseur
if ((larg - e.pageX) < (mon_image.width + 60))
yOffset = 0 - (mon_image.width + 30);
else
yOffset = 30;
// si pas assez de place en bas, on positionne l'image au-dessus du curseur
if ((haut - e.pageY) < (mon_image.height + 70))
xOffset = mon_image.height + 10;
else
xOffset = 10;
$("#screenshot")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
};
this.imagePreview = function(){
/* CONFIG */
xOffset = 10;
yOffset = 30;
// these 2 variable determine popup's distance from the cursor
// you might want to adjust to get the right result
/* END CONFIG */
$("a.preview").hover(function(e){
this.t = this.title;
this.title = "";
var c = (this.t != "") ? "
" + this.t : "";
$("body").append("![Image preview]("+ this.href +")
"+ c +"
");
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
},
function(){
this.title = this.t;
$("#preview").remove();
});
$("a.preview").mousemove(function(e){
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
};
this.tooltip = function(){
/* CONFIG */
xOffset = 10;
yOffset = 20;
// these 2 variable determine popup's distance from the cursor
// you might want to adjust to get the right result
/* END CONFIG */
$("a.tooltip").hover(function(e){
this.t = this.title;
this.title = "";
$("body").append(""+ this.t +"
");
$("#tooltip")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
},
function(){
this.title = this.t;
$("#tooltip").remove();
});
$("a.tooltip").mousemove(function(e){
$("#tooltip")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
};
// starting the script on page load
$(document).ready(function(){
tooltip();//active les tooltip simple
imagePreview();//active les tooltip image preview
screenshotPreview();//active les tooltip lien avec preview
});