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

3 participants

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

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 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://2img.net/i/fa/i/smiles/icon_cat.png" id="chimg" /></div><img src="http://2img.net/i/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

Ea
Aidactif
Aidactif

Messages : 23583
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 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

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 Jeu 11 Nov 2010 - 21:30

Hmmmm... up?
grenouillefarci

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 Ven 12 Nov 2010 - 13:00

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

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 Ven 12 Nov 2010 - 13:41

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

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 Sam 13 Nov 2010 - 12:33

Up. Vraiment personne?
grenouillefarci

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 Dim 14 Nov 2010 - 13:18

Up?
grenouillefarci

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 Mar 16 Nov 2010 - 0:34

Up -_-''
grenouillefarci

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 Jeu 18 Nov 2010 - 22:17

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

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