Bonjours, bonsoir,
Mon problème est simple: je veux agrandir mon image au passage de la souris sur l'index de mon forum (sous forumactif^^). Pour cela, je dois aller dans Affichage -> Généralités -> Message sur la page d'accueil. Le problème est que cela implique que j'ai une zone de texte définie qui ne peut pas prendre le CSS. Alors, j'ai l'intention de prendre le code pour agrandir l'image au passage de la souris et l'insérer à même la balise. Je devrais donc insérer l'attribut <style ="">. Un problème s'impose, bien évidemment:
-Comment faire pour agrandir l'image au passage de la souris?
-Plus compliqué encore, comment faire pour que le code pour agrandir l'image au passage de la souris rentre dans ma balise via l'attribut <style ="">?
-Finalement, pourriez-vous me filer le code complet?

Merci d'avance chers amis.

PS: J'aimerais faire un effet comme celui-ci: http://www.jarodxxx.com/public/Tutorie [...] le/index.html

Le code complet

var xOffset=6
var yOffset=5

var affiche = false;
var w3c=document.getElementById && !document.all;
var ie=document.all;

if (ie||w3c) {
var laBulle
}

function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function deplacer(e) {
if(affiche){
var curX = (w3c) ? e.pageX : event.x + ietruebody().scrollLeft;
var curY = (w3c) ? e.pageY : event.y + ietruebody().scrollTop;

var winwidth = ie && !window.opera ? ietruebody().clientWidth : window.innerWidth - 20;
var winheight = ie && !window.opera ? ietruebody().clientHeight : window.innerHeight - 20;

var rightedge = ie && !window.opera ? winwidth - event.clientX - xOffset : winwidth - e.clientX - xOffset;
var bottomedge = ie && !window.opera ? winheight - event.clientY - yOffset : winheight - e.clientY - yOffset;

var leftedge = (xOffset < 0) ? xOffset*(-1) : -1000

if(laBulle.offsetWidth > winwidth / 3){
laBulle.style.width = winwidth / 3
}

if(rightedge < laBulle.offsetWidth){
laBulle.style.left = curX - laBulle.offsetWidth + "px"
} else {
if(curX < leftedge){
laBulle.style.left = "5px"
} else{

laBulle.style.left = curX + xOffset + "px"
}
}

if(bottomedge < laBulle.offsetHeight){
laBulle.style.top = curY - laBulle.offsetHeight - yOffset + "px"
} else {
laBulle.style.top = curY + yOffset + "px"
}
}
}
function showTooltip(text) {
if (w3c||ie){
laBulle = document.all ? document.all["bulle"] : document.getElementById ? document.getElementById("bulle") : ""
laBulle.innerHTML = text;
laBulle.style.visibility = "visible";
affiche = true;
}
}
function hideTooltip() {
if (w3c||ie){
affiche = false
laBulle.style.visibility="hidden"
laBulle.style.top = '-100000px'
laBulle.style.backgroundColor = ''
laBulle.style.width = ''
}
}

document.onmousemove = deplacer; 

document.getElementById("id de l'image").onmouseover=function(){showTooltip('<div class=\'info\'><img id=\'big\' src=\'image.jpg\'></div>');} 
document.getElementById("id de l'image").onmouseout=function(){hideTooltip();}

On ne peut pas cibler des pseudo-class avec des styles en ligne.

Oulà c'est complexe^^
Je vous donne des nouvelles si ça marche (encore faudra-t-il que je sache le placer au bon endroit...)

Je l'ai pris de la page que tu as cité il faudra que tu adaptes ton CSS, et les deux dernières lignes sont à personnaliser aussi.

Il y a des codes bien plus simples, d'autant que celui là prévoit des problèmes de compatibilité qui ne se posent plus aujourd'hui. De plus la page citée développe plusieurs fonctionnalités (bulle qui suit le curseur, etc.)