Bonjour aussi,
Vu que je m'étais amusé à faire un script similaire, je te laisse un "petit" exemple (bien que ce ne soit pas dans les habitudes du forum) où je récupère le contenu de la page vers laquelle le lien pointe...
Nota: Tu seras contraint de potasser le script car ce sera à adapter à ton cas donc n'hésite pas à revenir en cas d'incompréhension.
index.php
<?php
header('content-type: text/html; charset=utf-8');
?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>INFOBULLE QUI SUIT LA SOURIS</title>
<link rel="stylesheet" media="screen, projection" type="text/css" href="style.css" />
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="cont">
<p><a href="lien.php">lien vers une autre page</a></p>
</div>
</body>
</html>
lien.php
<?php
header('content-type: text/html; charset=utf-8');
if(!isset($_GET['ajax'])) {
?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>INFOBULLE QUI SUIT LA SOURIS</title>
<link rel=stylesheet" media="screen, projection" type="text/css" href="style.css" />
<script type="text/javascript" src="script.js"></script>
</head>
<body><?php
}
?>
<div id="info">
<h1>Un titre</h1>
<p>Le paragraphe correspondant</p>
</div><?php
if(!isset($_GET['ajax'])) {
?>
</body>
</html><?php
}
?>
style.css
.hasJS #info {position:absolute; border:1px solid #000; background-color:#ddd; padding:10px;}
.hasJS .hidden {display:none;}
.hasJS #cont {position:relative;}
h1 {font-size:1em;}
script.js
/** *********************************************************************************************************
BIBLIOTHEQUE
*/
(function() {
/** *********************************************************************************************************
REMPLACEMENT DES METHODES getElementById ET getElementsByTagName
EXEMPLES :
var oEl = $('test'); // retourne l'objet ayant l'id 'test'
var oEl2 = $(oEl); // retourne oEl
var aEls = $(oEl, 'a'); // retourne tous les liens de oEl
var aEls2 = $('test', 'a'); // retourne tous les liens du conteneur ayant pour id 'test'
var oEl3 = $(oEl, 'a')[0]; // retourne le premier lien de oEl
*/
var $ = {
select: function() {
var aArgs = arguments;
if(aArgs.length > 1 && typeof aArgs[1] == 'string') {
return typeof aArgs[0] == 'string' ?
document.getElementById(aArgs[0]).getElementsByTagName(aArgs[1]):
aArgs[0].getElementsByTagName(aArgs[1]);
}
else switch(typeof aArgs[0]) {
case 'string':
return document.getElementById(aArgs[0]);
case 'object':
return aArgs[0];
}
return false;
}
};
/** *********************************************************************************************************
OBJET DE GESTION DE CLASSE - INSPIRE DE http://www.onlinetools.org/articles/unobtrusivejavascript/cssjsseparation.html
EXEMPLES :
$c.add(oEl, 'test'); // Ajout d'une classe a l'element oEl
$c.has(oEl, 'test'); // Verification de l'existence de la classe 'test' sur l'element oEl via une chaine texte
$c.has(oEl, /\btest\b/); // Verification de l'existence de la classe 'test' sur l'element oEl via une expression reguliere
$c.swap(oEl, 'test', 'test2'); // Modification de la classe 'test' de l'element oEl en classe 'test2' (ou inversement)
$c.remove(oEl, 'test2'); // Suppression de la classe 'test2' de l'element oEl
*/
var $c = {
remove: function(oEl, sClass) {
var rep = oEl.className.match(' ' + sClass) ? ' ' + sClass : sClass;
oEl.className = oEl.className.replace(rep, '');
},
add: function(oEl, sClass) {
if(!$c.has(oEl, sClass))
oEl.className += oEl.className ? ' ' + sClass : sClass;
},
swap: function(oEl, sClass1, sClass2) {
oEl.className = !$c.has(oEl, sClass1) ?
oEl.className.replace(sClass2, sClass1):
oEl.className.replace(sClass1, sClass2);
},
has: function() {
return typeof arguments[1] == 'string' ?
new RegExp('\\b' + arguments[1] + '\\b').test(arguments[0].className):
arguments[1].test(arguments[0].className);
}
};
/** *********************************************************************************************************
GESTIONNAIRE D'EVENEMENT
EXEMPLES :
$e.add('domready', alerte); // Lance le gestionnaire alerte au chargement de la page
$e.add(oEl, 'click', alerte); // Ajoute le gestionnaire alerte au clic sur oEl en mode 'effervescence'
$e.add(oEl, 'click', alerte, true); // Ajoute le gestionnaire alerte au clic sur oEl en mode 'capture' (IE ne sait pas faire)
$e.remove(oEl, 'click', alerte); // Supprime le gestionnaire alerte au clic sur oEl
$e.add(oEl, 'click', function(e) { $e.stop(e); }); // Si oEl est un lien, $e.stop(e); stoppe la transmission de l'evenement et annule l'action normale du lien
$e.add(oEl, 'click', function(e) { alert($e.getSrc(e)); }); // Retourne la source de l'evenement
$e.add(oEl, 'mouseover', function(e) { alert($e.relSrc(e)); }); // Retourne l'element survole precedent le mouseover
$e.add(oEl, 'mouseout', function(e) { alert($e.relSrc(e)); }); // Retourne l'element survole suivant le mouseout
*/
var $e = {
// Ajout d'un gestionnaire d'evenement sur un element lors d'un evenement donne
add: function() {
var a = arguments;
if(a[0] == 'domready')
return $e.domready(a[1]);
return document.addEventListener ?
a[0].addEventListener(a[1], a[2], a[3] || false):
a[0].attachEvent ?
a[0].attachEvent('on' + a[1], a[2]):
false;
},
// Suppression d'un gestionnaire d'evenement sur un element pour un evenement donne
remove: function(oElem, sEvType, fn, bCapture) {
return document.addEventListener ?
oElem.removeEventListener(sEvType, fn, bCapture || false):
oElem.detachEvent ?
oElem.detachEvent('on' + sEvType, fn):
false;
},
// Annulation de la propagation d'un evenement et de l'action par defaut d'un element
stop: function(e) {
if(e && e.stopPropagation && e.preventDefault) {
e.stopPropagation();
e.preventDefault();
}
else if(e && window.event) {
window.event.cancelBubble = true;
window.event.returnValue = false;
}
return false; // Indispensable pour Safari
},
// retourne la position de l'evenement
getPos: function(e) {
return window.attachEvent ?
{'x': event.x, 'y': event.y}:
{'x': e.pageX, 'y': e.pageY};
},
// Retourne la source de l'evenement
getSrc: function(e) {
return e.target || e.srcElement;
},
relSrc: function(e) {
switch(e.type) {
case 'mouseover': // Retourne l'element survole precedent l'element source de l'evenement
return e.relatedTarget || e.fromElement;
case 'mouseout': // Retourne l'element survole suivant l'element source de l'evenement
return e.relatedTarget || e.toElement;
}
},
// Detecte le chargement du DOM - http://dean.edwards.name/weblog/2006/06/again/#comment5338
domready: function(fn) {
// Internet Explorer
if(window.attachEvent) {
document.write('<script id="ieScriptLoad" defer src="//:"><\/script>');
document.getElementById('ieScriptLoad').onreadystatechange = function() {
if(this.readyState == 'complete')
$e.init(fn);
};
}
// Mozilla/Opera 9
if(document.addEventListener)
document.addEventListener('DOMContentLoaded', function() { $e.init(fn); }, false);
// Safari
if(navigator.userAgent.search(/WebKit/i) != -1){
$e.loadTimer = setInterval(function (){
if(document.readyState.search(/loaded|complete/i) != -1)
$e.init(fn);
}, 10);
}
// Other web browsers
if($e)
$e.add(window, 'load', function() { $e.init(fn); });
},
// Initialise le script
init: function(fn) {
if (arguments.callee.done) return;
arguments.callee.done = true;
if ($e.loadTimer) clearInterval($e.loadTimer);
fn();
}
};
/** *********************************************************************************************************
AJAX
EXEMPLES :
$a.getXHR({method: 'get', url: 'index.php', callback: function() {
document.body.innerHTML += oResponse.text;
}});
$a.getXHR({method: 'post', url: 'index.php', param: 'ajax=true', callback: function() {
document.body.innerHTML += oResponse.text;
}});
*/
var $a = {
// Temps accepte pour une requete
tempoXHR: 2500,
// Support de l'objet XMLHttpRequest
bXHRSupport: (typeof XMLHttpRequest != "undefined"),
// Support de l'objet ActiveXObject
bActiveXSupport: (window.ActiveXObject),
// Version de l'ActiveX
aMSXML: ["Microsoft.XMLHTTP",
"MSXML2.XMLHTTP", "MSXML2.XMLHTTP.3.0",
"MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.5.0",
"MSXML2.XMLHTTP.6.0", "MSXML2.XMLHTTP.7.0"],
// Creation de l'objet XHR
createXHR: function() {
if($a.bXHRSupport)
return new XMLHttpRequest;
else if($a.bActiveXSupport) {
var iI;
iI = $a.aMSXML.length;
do {
try {
return new ActiveXObject($a.aMSXML[--iI]);
}
catch(oError) { };
}
while(iI > 0);
throw new Error("L'objet oXHR n'a pas été créé");
}
},
// Lancement de la requete Ajax
getXHR: function(oReq) {
var oXHR = $a.createXHR();
$a.oReq = oReq;
oXHR.open($a.oReq['method'], $a.oReq['url'], $a.oReq['sync'] && $a.oReq['sync'] == 'true' ? false : true);
var oTimer = setTimeout(
function() {
if(oXHR)
return oXHR.abort();
},
$a['tempoXHR']
);
oXHR.onreadystatechange = function() {
if(oXHR.readyState == 4)
if(oXHR.status && /200|304/.test(oXHR.status)) {
clearTimeout(oTimer);
oResponse = {
text: oXHR.responseText
};
if($a.oReq['callback'])
($a.oReq['callback'])();
}
};
oXHR.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT");
if($a.oReq['method'] == 'post')
oXHR.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
return $a.oReq['method'] == 'get' ? oXHR.send(null) : oXHR.send($a.oReq['param']);
}
};
k64 = {
$: $.select,
addClass: $c.add,
removeClass: $c.remove,
swapClass: $c.swap,
hasClass: $c.has,
addEvent: $e.add,
removeEvent: $e.remove,
stop: $e.stop,
getPos: $e.getPos,
getSrc: $e.getSrc,
relSrc: $e.relSrc,
getXHR: $a.getXHR
};
})();
/** *********************************************************************************************************
SCRIPT D'UNE INFOBULLE QUI SUIT LA SOURIS
*/
(function() {
var Infobulle = function() {};
var Ip = Infobulle.prototype = {
init: function() {
return k64.addEvent('domready', Ip.load);
},
load: function() {
if(!k64.hasClass(document.documentElement, 'hasJS'))
k64.addClass(document.documentElement, 'hasJS');
var oA = k64.$(document, 'a')[0];
if(!oA) return;
k64.addEvent(document, 'mousemove', Ip.loadInfo(oA));
k64.addEvent(oA, 'mouseout', Ip.hideInfo);
k64.addEvent(oA, 'mouseover', Ip.displayInfo);
},
loadInfo: function(oA) {
if(!k64.$('info'))
k64.getXHR({
'method': 'get',
'url': oA.href + '?ajax=true',
'callback': function() {
oA.parentNode.parentNode.innerHTML += oResponse.text;
if(k64.$('info')) {
var oInfo = k64.$('info');
k64.addClass(oInfo, 'hidden');
}
return Ip.load();
}
});
return function(e) {
var oInfo = k64.$('info');
if(oInfo) {
var iPos = k64.getPos(e);
oInfo.style.top = iPos.y + 10 + 'px';
oInfo.style.left = iPos.x + 15 + 'px';
}
return true;
}
},
hideInfo: function() {
if(k64.$('info'))
k64.addClass(k64.$('info'), 'hidden');
return true;
},
displayInfo: function() {
if(k64.$('info'))
k64.removeClass(k64.$('info'), 'hidden');
return true;
}
};
var infobulle = new Infobulle;
infobulle.init();
})();
... ce qui donne
ceci.
