Script " loupe "

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

Résolu Script " loupe "

Message par porchinet le 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
****

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

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 le Dim 1 Mai 2011 - 20:31

salut thumleft

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

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 le Dim 1 Mai 2011 - 20:32

Ok Smile
Pas de problemes Smile

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 le Lun 2 Mai 2011 - 19:13



Ce n'est pas gagné !! Assomé

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

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

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

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 le Ven 6 Mai 2011 - 20:24

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

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 le Ven 6 Mai 2011 - 21:57

merci pour le partage Smile

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


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