Script agrandissement images JS
small-princess16
Messages postés
140
Date d'inscription
Statut
Membre
Dernière intervention
-
small-princess16 Messages postés 140 Date d'inscription Statut Membre Dernière intervention -
small-princess16 Messages postés 140 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
J'ai trouvé un script qui fait exactement ce que je veux...ici:
http://www.jarodxxx.com/?post%2F2007%2F10%2F17%2FTutoriel%3A-rollover-zoom-infobulle-sur-une-photo-ou-un-texte-en-AJAX
Et voilà le final (ce que j'aimerais que ça fasse): http://www.jarodxxx.com/public/Tutoriels/infobulle/index.html
J'ai tout suivis à la lettre et cela ne fonctionne pas. J'ai la petite image qui s'affiche, avec la main pour le lien lorsque l'on passe dessus, mais rien ne se passe!
Je me demande si ce n'est pas un problème du au \' \' (exemple: <img id=\'big\' src=\'chateau_big.jpg\'>)
Je ne comprends pas à quoi servent tous ces ' ' et ces \\
Et est-ce vraiment du AJAX ou du simple JS+CSS+HTML?
Merci pour votre aide!
J'ai trouvé un script qui fait exactement ce que je veux...ici:
http://www.jarodxxx.com/?post%2F2007%2F10%2F17%2FTutoriel%3A-rollover-zoom-infobulle-sur-une-photo-ou-un-texte-en-AJAX
Et voilà le final (ce que j'aimerais que ça fasse): http://www.jarodxxx.com/public/Tutoriels/infobulle/index.html
J'ai tout suivis à la lettre et cela ne fonctionne pas. J'ai la petite image qui s'affiche, avec la main pour le lien lorsque l'on passe dessus, mais rien ne se passe!
Je me demande si ce n'est pas un problème du au \' \' (exemple: <img id=\'big\' src=\'chateau_big.jpg\'>)
Je ne comprends pas à quoi servent tous ces ' ' et ces \\
Et est-ce vraiment du AJAX ou du simple JS+CSS+HTML?
Merci pour votre aide!
A voir également:
- Script agrandissement images JS
- Script vidéo youtube - Guide
- Des images - Guide
- Mas script - Accueil - Windows
- Ghost script - Télécharger - Polices de caractères
- Visualisez cette image avec un logiciel d'édition d'images. combien y a-t-il de pixels noirs sur le camion ? ✓ - Forum Python
11 réponses
Coucou merci pour ta réponse! Ton script me correspond bien mais je n'arrive pas à comprendre comment il fonctionne... =/
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 !
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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!
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" ?
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
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
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.
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!