Problème d'agrandissement d'image au passage de la souris

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Problème d'agrandissement d'image au passage de la souris

Message par grenouillefarci le Mer 10 Nov 2010 - 13:11

Hey,
J'ai un problème d'agrandissement d'image au passage de la souris. En réalité, je voudrais créer un espèce de bulle dans lequel est l'image. Un ami m'a donné le code:
Code:
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('');}
document.getElementById("id de l'image").onmouseout=function(){hideTooltip();}

Mais je ne sais pas où le placer. Help? Merci d'avance!


Dernière édition par grenouillefarci le Jeu 18 Nov 2010 - 22:17, édité 1 fois

grenouillefarci
*

Messages : 43
Inscrit(e) le : 14/11/2009

http://piratedestiny.forum-canada.com/forum.htm
grenouillefarci a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'agrandissement d'image au passage de la souris

Message par Ea le Mer 10 Nov 2010 - 15:18

Bonjour,


Et bien difficile =)

Quelque chose comme ça logiquement devrait marcher :

Code:
<div id="bulle" style="display:none"><img width="40" src="http://illiweb.com/fa/i/smiles/icon_cat.png" id="chimg" /></div><img src="http://illiweb.com/fa/i/smiles/icon_cat.png" id="chimg" />
<script type="text/javascript">
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("chimg").onmouseover=function(){showTooltip('');}
document.getElementById("chimg").onmouseout=function(){hideTooltip();}
</script>
Mais ça ne fonctionne pas, enfin déjà on a aucune information sur les éléments html, vous n'avez pas de moyen de les avoir ? =/

Cordialement.

Ea
Aidactif
Aidactif

Messages : 23442
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'agrandissement d'image au passage de la souris

Message par grenouillefarci le Mer 10 Nov 2010 - 21:40

Pour être franc, j'avais tout simplement l'intention de mettre l'image sur la page d'accueil.

Le problème, c'est que dans Affichage Right Page d'accueil Right Généralités, il y a un champs pour le texte, mais je sais pas comment y insérer le CSS :S

grenouillefarci
*

Messages : 43
Inscrit(e) le : 14/11/2009

http://piratedestiny.forum-canada.com/forum.htm
grenouillefarci a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'agrandissement d'image au passage de la souris

Message par grenouillefarci le Jeu 11 Nov 2010 - 21:30

Hmmmm... up?

grenouillefarci
*

Messages : 43
Inscrit(e) le : 14/11/2009

http://piratedestiny.forum-canada.com/forum.htm
grenouillefarci a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'agrandissement d'image au passage de la souris

Message par grenouillefarci le Ven 12 Nov 2010 - 13:00

Up s'il-vous-plaît^^

grenouillefarci
*

Messages : 43
Inscrit(e) le : 14/11/2009

http://piratedestiny.forum-canada.com/forum.htm
grenouillefarci a été remercié(e) par l'auteur de ce sujet.

L'auteur de ce message est actuellement banni du forum - Voir le message

Résolu Re: Problème d'agrandissement d'image au passage de la souris

Message par grenouillefarci le Ven 12 Nov 2010 - 13:41

Ça ne règle pas vraiment mon problème, malheureusement...

grenouillefarci
*

Messages : 43
Inscrit(e) le : 14/11/2009

http://piratedestiny.forum-canada.com/forum.htm
grenouillefarci a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'agrandissement d'image au passage de la souris

Message par grenouillefarci le Sam 13 Nov 2010 - 12:33

Up. Vraiment personne?

grenouillefarci
*

Messages : 43
Inscrit(e) le : 14/11/2009

http://piratedestiny.forum-canada.com/forum.htm
grenouillefarci a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'agrandissement d'image au passage de la souris

Message par grenouillefarci le Dim 14 Nov 2010 - 13:18

Up?

grenouillefarci
*

Messages : 43
Inscrit(e) le : 14/11/2009

http://piratedestiny.forum-canada.com/forum.htm
grenouillefarci a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'agrandissement d'image au passage de la souris

Message par grenouillefarci le Mar 16 Nov 2010 - 0:34

Up -_-''

grenouillefarci
*

Messages : 43
Inscrit(e) le : 14/11/2009

http://piratedestiny.forum-canada.com/forum.htm
grenouillefarci a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'agrandissement d'image au passage de la souris

Message par grenouillefarci le Jeu 18 Nov 2010 - 22:17

C'est réglé. Il suffisait de faire une infobulle.

grenouillefarci
*

Messages : 43
Inscrit(e) le : 14/11/2009

http://piratedestiny.forum-canada.com/forum.htm
grenouillefarci a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum