Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

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
avatar

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

Ea
Aidactif
Aidactif

Messages : 23491
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
avatar

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

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

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

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

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

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 -_-''
avatar

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

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