Partage

Agrandir une image au passage de la souris

Ma requête est plutôt particulière...

Sujet résolu
Le 9 novembre 2010 à 23:47:07

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? :D

Merci d'avance chers amis.

PS: J'aimerais faire un effet comme celui-ci: http://www.jarodxxx.com/public/Tutorie [...] le/index.html
Publicité
Le 9 novembre 2010 à 23:47:07
Le 10 novembre 2010 à 3:13:46

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.
Le 10 novembre 2010 à 13:08:11

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

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.)

Agrandir une image au passage de la souris

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown