Script " loupe "

4 participants

Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code

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

Résolu Script " loupe "

Message par porchinet Dim 1 Mai 2011 - 18:43

Salut a tous et bon 1 er Mai Very Happy

Quelqu'un saurait t'il explquer comment réaliser l'effet que l'on peut voir aujourd'hui en page d'accueil de Google ???

( Je parle de l'effet loupe quand on promène le curseur sur la bannière.)

Question Question Question
porchinet

porchinet
****

Masculin
Messages : 432
Inscrit(e) le : 07/08/2008

http://adn911.forumsactifs.net/forum.htm
porchinet a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Script " loupe "

Message par EstoLouis Dim 1 Mai 2011 - 19:44

Salut, je pense avoir trouvé Smile

PA > Modules > HTML > Gestion des pages HTML
1/ Crées une page html

2/ Dans :
Titre * : Tu mets ton titre de ta page
Voulez-vous utiliser le haut et le bas de page de votre forum ? Non ou Oui, a toi de voir
Utiliser cette page en tant que page d'accueil ? Non

3/ Dans :
Code HTML * : Colles ce code :
Code:
<HTML><HEAD>
<TITLE></TITLE>
<script type="text/javascript"><!--
var zoom, largeur, hauteur,carre;
function reglages(){


zoom=NOMBRE DE FOIS QUE TU VEUX ZOOMER;
largeur=LARGEUR DE TON IMAGE EN PX MAIS NE METS PAS PX A COTÉ;
hauteur=HAUTEUR DE TON IMAGE EN PX MAIS NE METS PAS PX A COTÉ;
carre=LONGUEUR D'UN COTÉ DE LA LOUPE EN PX MAIS NE METS PAS PX A COTÉ;

//------------------------------------------
document.getElementById("initiale").width=largeur;
document.getElementById("initiale").height=hauteur;
document.getElementById("div1").style.width=carre;
document.getElementById("div1").style.height=carre;
document.getElementById("img1").height=zoom*hauteur;
document.getElementById("img1").width=zoom*largeur;
}
function document_onmousemove(event)
{
var ie = false; /*@cc_on ie = true; @*/
if (ie) {
        x=event.x+document.body.scrollLeft;
        y=event.y+document.body.scrollTop;
            }
else    {
x=event.pageX;
        y=event.pageY;
            }
document.getElementById("div1").style.left=x-(carre/2);
document.getElementById("div1").style.top=y-(carre/2);
document.getElementById("img1").style.top=(-(y)*zoom)+(carre/2);
document.getElementById("img1").style.left=(-(x)*zoom)+(carre/2);
}
//--></script>
</HEAD>
<BODY onmousemove="document_onmousemove(event);" onload="reglages()">
<img id=initiale src="LIEN DE TON IMAGE" style="position:absolute;top:0;left:0" width=LARGEUR DE TON IMAGE><div id="div1"
    style="width:50;height:50;overflow:hidden;position:absolute;top:0;left:0">
<img id="img1"
    src="LIEN DE TON IMAGE" style="position:absolute" width=LARGEUR DE TON IMAGE>
</div>
</BODY></HTML>

Tu peux modifier tout ce que j'ai mis en majuscules, mais le reste n'y touche pas Smile
N'enleves surtout pas les guillemets " et les points virgules ; qui sont tres importants

Exemple : http://estoow.keuf.net/h2-loupe
Le code que j'ai mis :
Code:
<HTML><HEAD>
<TITLE></TITLE>
<script type="text/javascript"><!--
var zoom, largeur, hauteur,carre;
function reglages(){

//-- Facteur de zoom ---
zoom=2;
//-- Taille de l'image initiale --
largeur=400;
hauteur=300;
//-- taille du carré de la loupe EN PIXELS--
carre=80;

//------------------------------------------
document.getElementById("initiale").width=largeur;
document.getElementById("initiale").height=hauteur;
document.getElementById("div1").style.width=carre;
document.getElementById("div1").style.height=carre;
document.getElementById("img1").height=zoom*hauteur;
document.getElementById("img1").width=zoom*largeur;
}
function document_onmousemove(event)
{
var ie = false; /*@cc_on ie = true; @*/
if (ie) {
        x=event.x+document.body.scrollLeft;
        y=event.y+document.body.scrollTop;
            }
else    {
x=event.pageX;
        y=event.pageY;
            }
document.getElementById("div1").style.left=x-(carre/2);
document.getElementById("div1").style.top=y-(carre/2);
document.getElementById("img1").style.top=(-(y)*zoom)+(carre/2);
document.getElementById("img1").style.left=(-(x)*zoom)+(carre/2);
}
//--></script>
</HEAD>
<BODY onmousemove="document_onmousemove(event);" onload="reglages()">
<img id=initiale src="http://choupeta31.c.h.pic.centerblog.net/o/f7031175.jpg" style="position:absolute;top:0;left:0" width=400><div id="div1"
    style="width:50;height:50;overflow:hidden;position:absolute;top:0;left:0">
<img id="img1"
    src="http://choupeta31.c.h.pic.centerblog.net/o/f7031175.jpg" style="position:absolute" width=400>
</div>
</BODY></HTML>


De plus, si tu veux rajouter cette image sur un message etc... il faut créer une i-frame
Donc colles ce code sur le message que tu veux :-)
Code:
<IFRAME SRC=ADRESSE DE LA PAGE HTML QUE TU VIENS DE CRÉER width=LARGEURpx height=HAUTEURpx frameborder=0 border=0 marginwidth=0 marginheight=0 scrolling=no></IFRAME>
Modifies tout ce qui est en majuscules Smile

Ex :
Code:
<IFRAME SRC=http://estoow.keuf.net/h2-loupe width=400px height=300px frameborder=0 border=0 marginwidth=0 marginheight=0 scrolling=no></IFRAME>

Voila Smile
J'espere t'avoir aidé Smile
avatar

EstoLouis
**

Masculin
Messages : 64
Inscrit(e) le : 05/07/2009

http://kef-coding.keuf.net
EstoLouis a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Script " loupe "

Message par porchinet Dim 1 Mai 2011 - 20:31

salut thumleft

Tous mes remerciements.
j'y travaille demain et je te tiens au courrant.
porchinet

porchinet
****

Masculin
Messages : 432
Inscrit(e) le : 07/08/2008

http://adn911.forumsactifs.net/forum.htm
porchinet a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Script " loupe "

Message par EstoLouis Dim 1 Mai 2011 - 20:32

Ok Smile
Pas de problemes Smile
avatar

EstoLouis
**

Masculin
Messages : 64
Inscrit(e) le : 05/07/2009

http://kef-coding.keuf.net
EstoLouis a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Script " loupe "

Message par porchinet Lun 2 Mai 2011 - 19:13

Script " loupe " Homme-10

Ce n'est pas gagné !! Assomé

Ne vérrouillez pas le post..................ça risque de durer un peu !! Very Happy
porchinet

porchinet
****

Masculin
Messages : 432
Inscrit(e) le : 07/08/2008

http://adn911.forumsactifs.net/forum.htm
porchinet a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Script " loupe "

Message par tony59 Lun 2 Mai 2011 - 21:59

Tu cherches peut être plutôt comment faire pour que ce fameux script fonctionne sur toutes les images postées dans les messages de ton forum je suppose, non?
Dans ce cas là je suis preneur aussi... Parceque là c'est que pour une image dans une page html à part apparemment non?
avatar

tony59
*****

Masculin
Messages : 618
Inscrit(e) le : 23/10/2010

http://www.leforumsecret.com
tony59 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Script " loupe "

Message par EstoLouis Mar 3 Mai 2011 - 7:12

Que se passe-t-il porchinet ? xD
T'as pas l'air en forme ! mais seulement un peu Assomé
Explique moi... xD
avatar

EstoLouis
**

Masculin
Messages : 64
Inscrit(e) le : 05/07/2009

http://kef-coding.keuf.net
EstoLouis a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Script " loupe "

Message par EstoLouis Ven 6 Mai 2011 - 20:24

Bonjour Smile
Est-ce que t'as reussi finalement ?
A+
avatar

EstoLouis
**

Masculin
Messages : 64
Inscrit(e) le : 05/07/2009

http://kef-coding.keuf.net
EstoLouis a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Script " loupe "

Message par mbenaissa Ven 6 Mai 2011 - 21:57

merci pour le partage Smile
mbenaissa

mbenaissa
Nouveau membre

Masculin
Messages : 10
Inscrit(e) le : 08/03/2011

http://www.saida-partage.net/
mbenaissa a été remercié(e) par l'auteur de ce sujet.

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

- Sujets similaires

Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code

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