Script agrandissement images JS
Fermé
small-princess16
Messages postés
140
Date d'inscription
jeudi 28 septembre 2006
Statut
Membre
Dernière intervention
1 mars 2012
-
12 oct. 2009 à 10:16
small-princess16 Messages postés 140 Date d'inscription jeudi 28 septembre 2006 Statut Membre Dernière intervention 1 mars 2012 - 13 oct. 2009 à 08:19
small-princess16 Messages postés 140 Date d'inscription jeudi 28 septembre 2006 Statut Membre Dernière intervention 1 mars 2012 - 13 oct. 2009 à 08:19
A voir également:
- Script agrandissement images JS
- Script vidéo youtube - Guide
- Des images - Guide
- Ghost script - Télécharger - Polices de caractères
- Microsoft activation script - Accueil - Windows
- Script bat - Guide
11 réponses
aze866
Messages postés
575
Date d'inscription
jeudi 17 septembre 2009
Statut
Membre
Dernière intervention
14 décembre 2009
31
12 oct. 2009 à 10:33
12 oct. 2009 à 10:33
Bonjour,
Tu peux essayer ça : https://pierre.world/projects/jquery_simpletooltip/
Tu peux essayer ça : https://pierre.world/projects/jquery_simpletooltip/
small-princess16
Messages postés
140
Date d'inscription
jeudi 28 septembre 2006
Statut
Membre
Dernière intervention
1 mars 2012
48
12 oct. 2009 à 10:44
12 oct. 2009 à 10:44
Coucou merci pour ta réponse! Ton script me correspond bien mais je n'arrive pas à comprendre comment il fonctionne... =/
aze866
Messages postés
575
Date d'inscription
jeudi 17 septembre 2009
Statut
Membre
Dernière intervention
14 décembre 2009
31
12 oct. 2009 à 10:56
12 oct. 2009 à 10:56
Ok, c'est vrai que ce n'est pas très clair sur le lien que j'ai mis, alors autant pour moi.
Je vais essayer de me rattraper et pour ce, tu vas devoir essayer ça. Là, c'est très clair, tu n'as qu'à te laisser guider !
Je vais essayer de me rattraper et pour ce, tu vas devoir essayer ça. Là, c'est très clair, tu n'as qu'à te laisser guider !
small-princess16
Messages postés
140
Date d'inscription
jeudi 28 septembre 2006
Statut
Membre
Dernière intervention
1 mars 2012
48
12 oct. 2009 à 11:14
12 oct. 2009 à 11:14
Merci :-)
Parfait aussi ce script mais ne fonctionne pas....décidément, je suis larguée!
Parfait aussi ce script mais ne fonctionne pas....décidément, je suis larguée!
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
small-princess16
Messages postés
140
Date d'inscription
jeudi 28 septembre 2006
Statut
Membre
Dernière intervention
1 mars 2012
48
12 oct. 2009 à 11:23
12 oct. 2009 à 11:23
hihi c'est réglé merci :-)
Il me semble que dans le tuto ils ont oublié de dire qu'il fallait mettre le fichier main.js!
Il me semble que dans le tuto ils ont oublié de dire qu'il fallait mettre le fichier main.js!
aze866
Messages postés
575
Date d'inscription
jeudi 17 septembre 2009
Statut
Membre
Dernière intervention
14 décembre 2009
31
12 oct. 2009 à 11:28
12 oct. 2009 à 11:28
As-tu téléchargé la librairie JQuery, c'est un fichier .js ?
Sinon, j'ai relu le tuto et je l'ai trouvé limpide, alors je ne vois pas où ça bloque.
Où est-ce que "ce script mais ne fonctionne pas" ?
Sinon, j'ai relu le tuto et je l'ai trouvé limpide, alors je ne vois pas où ça bloque.
Où est-ce que "ce script mais ne fonctionne pas" ?
small-princess16
Messages postés
140
Date d'inscription
jeudi 28 septembre 2006
Statut
Membre
Dernière intervention
1 mars 2012
48
12 oct. 2009 à 11:35
12 oct. 2009 à 11:35
Merci c'est réglé !
Enfaite, à aucun endroit ils ne disent qu'il faut mettre le script main.js
Donc évidemment ça en fonctionnait pas, mais c'est ok maintenant!
Un grand merci
Enfaite, à aucun endroit ils ne disent qu'il faut mettre le script main.js
Donc évidemment ça en fonctionnait pas, mais c'est ok maintenant!
Un grand merci
aze866
Messages postés
575
Date d'inscription
jeudi 17 septembre 2009
Statut
Membre
Dernière intervention
14 décembre 2009
31
12 oct. 2009 à 11:59
12 oct. 2009 à 11:59
Pod'koi.
Par contre, j'ai rien compris pour le fichier main.js !
Par contre, j'ai rien compris pour le fichier main.js !
small-princess16
Messages postés
140
Date d'inscription
jeudi 28 septembre 2006
Statut
Membre
Dernière intervention
1 mars 2012
48
12 oct. 2009 à 16:49
12 oct. 2009 à 16:49
Je ne sais pas à quoi il sert ce main.js mais il le faut absolument pour que cela marche!
Encore une autre question, comment faire pour pouvoir faire en sorte que lorsque l'on CLIQUE sur la photo (ou autre) une pop up s'ouvre afin d'afficher l'image en plus grand encore?
Parce que j'utilisais cette méthode pour cela:
<a href="javascript:;" onclick="open('popup1.htm', '', 'width=620,height=480,left=100,top=170,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=no')">
<img src="_img/chateauV.jpg"></a>
Mais maintenant le a href est utilisé pour le survol comme cela:
<a href="_img/chateau_big.jpg" class="preview" ><img src="_img/chateauV.jpg"></a>
Comment combiner les deux...? Merci
Encore une autre question, comment faire pour pouvoir faire en sorte que lorsque l'on CLIQUE sur la photo (ou autre) une pop up s'ouvre afin d'afficher l'image en plus grand encore?
Parce que j'utilisais cette méthode pour cela:
<a href="javascript:;" onclick="open('popup1.htm', '', 'width=620,height=480,left=100,top=170,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=no')">
<img src="_img/chateauV.jpg"></a>
Mais maintenant le a href est utilisé pour le survol comme cela:
<a href="_img/chateau_big.jpg" class="preview" ><img src="_img/chateauV.jpg"></a>
Comment combiner les deux...? Merci
aze866
Messages postés
575
Date d'inscription
jeudi 17 septembre 2009
Statut
Membre
Dernière intervention
14 décembre 2009
31
12 oct. 2009 à 18:30
12 oct. 2009 à 18:30
Bon, j'imagine que tu as une bonne raison de vouloir "cumuler les deux". Pour ma part , je n'ai jamais eu ce besoin, si ton image s'agrandit au passage de la souris, je ne comprends pas l'intérêt que l'on pourrait avoir à cliquer dessus.
Mais pour info, puisque tu as installé la librairie JQuery sur ton site, tu peux aussi utiliser un système de pop in du type Lightbox pour JQuery. Je joins un lien : http://leandrovieira.com/projects/jquery/lightbox/.
Sinon, j'ai re-regardé le deuxième lien de ton message initial.
Ensuite, je suis allé sur l'onglet affichage de mon navigateur préféré, qui est le même que le tien, et dans le menu déroulant, j'ai cliqué sue "code source de la page". J'aurais pu faire Ctrl+u, cela va sans dire.
Et alors là, je vois ça :
Sur ce, je clique sur "infobulle.js".
Donc, si tu veux avoir le même résultat, tu crées un fichier infobulle.js, où tu colles le contenu de leur fichier infobulle.js, à eux. Et puis, dans ta page html, comme je l'ai recopié plus haut :
Voilà, c'était pas plus compliqué que cela. Pense à regarder le code source des pages web qui te plaisent, c'est toujours très instructif !
NB : Attention, leur code est certainement sous licence Common Creative ou autre, il y a certainement quelques restrictions pour l'utiliser tel quel ou le modifier.
Mais pour info, puisque tu as installé la librairie JQuery sur ton site, tu peux aussi utiliser un système de pop in du type Lightbox pour JQuery. Je joins un lien : http://leandrovieira.com/projects/jquery/lightbox/.
Sinon, j'ai re-regardé le deuxième lien de ton message initial.
Ensuite, je suis allé sur l'onglet affichage de mon navigateur préféré, qui est le même que le tien, et dans le menu déroulant, j'ai cliqué sue "code source de la page". J'aurais pu faire Ctrl+u, cela va sans dire.
Et alors là, je vois ça :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>tuto jarodxxx</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
img{ border:none;}
#bulle { position: absolute; visibility: hidden; font-size:12px;}
.info{ border:1px solid #666666; padding: 7px; color:#666666; background-color:#FFFFFF; font-family:"trebuchet MS";}
</style>
<script type="text/javascript" language="javascript" src="js/infobulle.js"></script>
</head>
<body>
<a href="#"
onmouseover="showTooltip('<div class=\'info\'><strong>Logo de presentation</strong><br />ici la photo est la meme<br /><img id=\'big\' src=\'logo_big.jpg\' width=\'500\'></div>');"
onmouseout="hideTooltip()"><img id="big" src="logo_big.jpg" width="200" onmouseout="hideTooltip()" /></a>
<a href="#"
onmouseover="showTooltip('<div class=\'info\'><strong>Logo de presentation</strong><br />et on peut changer de foto<br /><img id=\'big\' src=\'photoshop.png\'></div>');"
onmouseout="hideTooltip()"><img id="big" src="1048.png" onmouseout="hideTooltip()" /></a>
<div id="bulle"></div>
</body>
</html>
Sur ce, je clique sur "infobulle.js".
Donc, si tu veux avoir le même résultat, tu crées un fichier infobulle.js, où tu colles le contenu de leur fichier infobulle.js, à eux. Et puis, dans ta page html, comme je l'ai recopié plus haut :
<a href="#"
onmouseover="showTooltip('<div class=\'info\'><strong>Logo de presentation</strong><br />ici la photo est la meme<br /><img id=\'big\' src=\'logo_big.jpg\' width=\'500\'></div>');"
onmouseout="hideTooltip()"><img id="big" src="logo_big.jpg" width="200" onmouseout="hideTooltip()" /></a>
Voilà, c'était pas plus compliqué que cela. Pense à regarder le code source des pages web qui te plaisent, c'est toujours très instructif !
NB : Attention, leur code est certainement sous licence Common Creative ou autre, il y a certainement quelques restrictions pour l'utiliser tel quel ou le modifier.
small-princess16
Messages postés
140
Date d'inscription
jeudi 28 septembre 2006
Statut
Membre
Dernière intervention
1 mars 2012
48
13 oct. 2009 à 08:19
13 oct. 2009 à 08:19
J'ai besoin de pouvoir faire les deux, car lorsque la pop up s'ouvrira, il y aura la possibilité d'imprimer l'image et la voir en haute résolution...( je n'y vois pas l'intérêt de le faire non plus, mais on me l'a demandé)...c'est pour ça que j'en ai besoin!
LE lightbox je connais, mais il n'y a pas moyen d'imprimer et tout cela...
C'est pour ça que je partais d'une pop-up créer par moi-même!
LE lightbox je connais, mais il n'y a pas moyen d'imprimer et tout cela...
C'est pour ça que je partais d'une pop-up créer par moi-même!