Changement d'image au survol
Fermé
gintoxic
Messages postés
524
Date d'inscription
mardi 31 juillet 2007
Statut
Membre
Dernière intervention
7 avril 2016
-
Modifié par gintoxic le 20/06/2014 à 22:46
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 24 juin 2014 à 01:16
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 24 juin 2014 à 01:16
A voir également:
- Changement d'image au survol
- Changement dns - Guide
- Changement d'écriture - Guide
- Image iso - Guide
- Acronis true image - Télécharger - Sauvegarde
- Image iso windows 10 - Guide
3 réponses
tete0148
Messages postés
413
Date d'inscription
mercredi 19 décembre 2012
Statut
Membre
Dernière intervention
15 juin 2017
89
21 juin 2014 à 00:01
21 juin 2014 à 00:01
Voilà comment je ferai ça:
Lorsque vous générez dynamiquement le tableau avec le produit, chaque image, ou conteneur pour produit à une classe et un identifiant.
La classe est pour tous les produits la même, l'identifiant est pour chaque produit unique.
Le code (je fais avec l'aide de jQuery) ressemblerai à celui-ci:
$('.item').hover(function(){ //lorsque on survol un élément de la boutique
var itemId = this.id; //on récupère l'id de cet élément
Ensuite il vous suffit de changer l'image
exemple:
si l'image de base est id-face // où id est l'id de l'élément, donc une variable
on change par id-dos
});
Voilà selon ma logique : )
Lorsque vous générez dynamiquement le tableau avec le produit, chaque image, ou conteneur pour produit à une classe et un identifiant.
La classe est pour tous les produits la même, l'identifiant est pour chaque produit unique.
Le code (je fais avec l'aide de jQuery) ressemblerai à celui-ci:
$('.item').hover(function(){ //lorsque on survol un élément de la boutique
var itemId = this.id; //on récupère l'id de cet élément
Ensuite il vous suffit de changer l'image
exemple:
si l'image de base est id-face // où id est l'id de l'élément, donc une variable
on change par id-dos
});
Voilà selon ma logique : )
Salut,
le code doit être automatisé en PHP ou le langage serveur que vous utilisez, éventuellement (en plus) en javascript comme le suggère tete0148 mais le javascript ne permets pas d'avoir le résultat d'une requête sujr la base de données donc ne sera pas suffisant.
Quant à votre question pour faire un changement d'image au survol la réponse est simple et évidente.
Utilisez par exemple les pseudo classe css.
La vrai question me semble surtout quelles sont vos connaissances en développement en informatique de gestion? en webmastering?
Le projet d'une boutique en ligne fait appel à ces compétences et à une expérience dont la partie d'affichage et d'interactivité(comme changer une image au survol) est le bien moindre soucis.
Je vous conseille de regarder les liens ci dessous qui sont le minimum à connaître avant d'attaquer le développement d'un tel site:
http://fr.wikipedia.org/wiki/Syst%C3%A8me_d%27information
http://fr.wikipedia.org/wiki/Architecture_trois_tiers
https://www.commentcamarche.net/contents/655-merise-initiation-a-la-conception-de-systemes-d-information
http://fr.wikipedia.org/wiki/Mod%C3%A8le-vue-contr%C3%B4leur
et en développement
http://fr.openclassrooms.com/informatique/cours/apprenez-a-creer-votre-site-web-avec-html5-et-css3
http://fr.openclassrooms.com/informatique/cours/tout-sur-le-javascript
https://www.commentcamarche.net/faq/1073-creer-un-site-beau-dynamique-et-respectueux-des-standards
le code doit être automatisé en PHP ou le langage serveur que vous utilisez, éventuellement (en plus) en javascript comme le suggère tete0148 mais le javascript ne permets pas d'avoir le résultat d'une requête sujr la base de données donc ne sera pas suffisant.
Quant à votre question pour faire un changement d'image au survol la réponse est simple et évidente.
Utilisez par exemple les pseudo classe css.
La vrai question me semble surtout quelles sont vos connaissances en développement en informatique de gestion? en webmastering?
Le projet d'une boutique en ligne fait appel à ces compétences et à une expérience dont la partie d'affichage et d'interactivité(comme changer une image au survol) est le bien moindre soucis.
Je vous conseille de regarder les liens ci dessous qui sont le minimum à connaître avant d'attaquer le développement d'un tel site:
http://fr.wikipedia.org/wiki/Syst%C3%A8me_d%27information
http://fr.wikipedia.org/wiki/Architecture_trois_tiers
https://www.commentcamarche.net/contents/655-merise-initiation-a-la-conception-de-systemes-d-information
http://fr.wikipedia.org/wiki/Mod%C3%A8le-vue-contr%C3%B4leur
et en développement
http://fr.openclassrooms.com/informatique/cours/apprenez-a-creer-votre-site-web-avec-html5-et-css3
http://fr.openclassrooms.com/informatique/cours/tout-sur-le-javascript
https://www.commentcamarche.net/faq/1073-creer-un-site-beau-dynamique-et-respectueux-des-standards
tete0148
Messages postés
413
Date d'inscription
mercredi 19 décembre 2012
Statut
Membre
Dernière intervention
15 juin 2017
89
21 juin 2014 à 18:21
21 juin 2014 à 18:21
Il ne peux pas y faire à l'aide du css car chaque image doit correspondre au produit, donc il faut changer le lien de l'image dynamiquement d'où le javascript, qui récupérera l'id du produit, que php aura généré dynamiquement. Ensuite il faut que le nom des images suivent un paterne du type {id-produit}-face et {id-produit}-dos.
Je n'ai pas précisé le langage serveur parce que pour moi si on se lance dans un tel site, on sait générer quelque chose dynamiquement, je vous conseil donc de ne pas faire ça et d'engager un professionnel.
Je n'ai pas précisé le langage serveur parce que pour moi si on se lance dans un tel site, on sait générer quelque chose dynamiquement, je vous conseil donc de ne pas faire ça et d'engager un professionnel.
gintoxic
Messages postés
524
Date d'inscription
mardi 31 juillet 2007
Statut
Membre
Dernière intervention
7 avril 2016
10
21 juin 2014 à 18:27
21 juin 2014 à 18:27
je me demande si on ne me prend pas pour un con là.....
tete0148
Messages postés
413
Date d'inscription
mercredi 19 décembre 2012
Statut
Membre
Dernière intervention
15 juin 2017
89
21 juin 2014 à 19:19
21 juin 2014 à 19:19
Non mais vous voulez créer un catalogue, donc une boutique je pense, mais vous ne savez pas qu'on peut utiliser un langage serveur dynamique pour gérer les produits, ce qui permet au passage d'éditer les produits sans changer le code source.
gintoxic
Messages postés
524
Date d'inscription
mardi 31 juillet 2007
Statut
Membre
Dernière intervention
7 avril 2016
10
21 juin 2014 à 19:36
21 juin 2014 à 19:36
si je veux utiliser JS c'est que je n'ai pas acces à la BD ni au code source, ni au fichiers... je n'ai pas acces au serveur.
J'utilise un prestataire de site web qui ne me laisse toucher qu'aux css et créer du JS...
D'où ma demande en JS pour pouvoir changer les images (auxquelles j'ai acces par contre) depuis leur URL....
donc le PHP est banni pour moi
J'utilise un prestataire de site web qui ne me laisse toucher qu'aux css et créer du JS...
D'où ma demande en JS pour pouvoir changer les images (auxquelles j'ai acces par contre) depuis leur URL....
donc le PHP est banni pour moi
tete0148
Messages postés
413
Date d'inscription
mercredi 19 décembre 2012
Statut
Membre
Dernière intervention
15 juin 2017
89
21 juin 2014 à 20:48
21 juin 2014 à 20:48
Bon bah il faut tout faire a la main, ou demander à celui qui s'occupe du php comment il gère cette partie
animostab
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
737
Modifié par animostab le 23/06/2014 à 04:13
Modifié par animostab le 23/06/2014 à 04:13
Bonjour
Voici le développement de ton idée qui est la bonne
pas besoin de class ou d'id d'images etc
1) tu récupères la valeur de l'attribut src de l'image sous forme de 1ere variable
2) tu crée une 2eme variable qui rajoute "dos/" avant la 1ere variable
3) tu changes la valeur de l'attribut src de l'image sur le hover grace à la 2eme variable
4) sur les mouseout tu changes la valeur de src a sa valeur initiale avec la 1ere variable
résultat
si tu as
<img src="chemin/jean.jpg">
au mouseover tu auras
<img src="dos/chemin/jean.jpg">
et au mouseout ca revient à l'image initiale et seulement sur l'image que tu mouseover
donc tu nomme les images de dos du meme nom que les images de face et tu les mets dans un dossier dos/chemin/
si tu est proprio du site normalement tu as accès a ton ftp donc tu y mets les images des dos dans les bons dossier et basta
voila le principe c'est cool non ?
Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
Voici le développement de ton idée qui est la bonne
pas besoin de class ou d'id d'images etc
1) tu récupères la valeur de l'attribut src de l'image sous forme de 1ere variable
2) tu crée une 2eme variable qui rajoute "dos/" avant la 1ere variable
3) tu changes la valeur de l'attribut src de l'image sur le hover grace à la 2eme variable
4) sur les mouseout tu changes la valeur de src a sa valeur initiale avec la 1ere variable
<script>
$(document).ready (function(){
var url = $("img").attr("src");
var newurl = "dos/"+url;
$("img").mouseover(function() {
$(this).attr("src", newurl)
});
$("img").mouseout(function() {
$(this).attr("src", url)
});
})
</script>
résultat
si tu as
<img src="chemin/jean.jpg">
au mouseover tu auras
<img src="dos/chemin/jean.jpg">
et au mouseout ca revient à l'image initiale et seulement sur l'image que tu mouseover
donc tu nomme les images de dos du meme nom que les images de face et tu les mets dans un dossier dos/chemin/
si tu est proprio du site normalement tu as accès a ton ftp donc tu y mets les images des dos dans les bons dossier et basta
voila le principe c'est cool non ?
Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
gintoxic
Messages postés
524
Date d'inscription
mardi 31 juillet 2007
Statut
Membre
Dernière intervention
7 avril 2016
10
23 juin 2014 à 19:52
23 juin 2014 à 19:52
plus que cool :)
malheureusement pour l'acces ftp, je ne l'ai pas. C'est assez rudimentaire comme pouvoir que j'ai sur le site mais bon les services proposés je ne pouvais les faire moi-même....
pour en revenir au nom d'image ce que je peux faire mais là je vais devoir compter sur le bon fonctionnemnt de mes outils, c'est créer ce dossier dans mon serveur web et linker dessus mais là l'url va être long... et je ne sais pas si je vais pouvoir le rewriter...
en tout cas merci j'apprends plus de la syntaxe et ça m'aide car très bien expliqué :)
malheureusement pour l'acces ftp, je ne l'ai pas. C'est assez rudimentaire comme pouvoir que j'ai sur le site mais bon les services proposés je ne pouvais les faire moi-même....
pour en revenir au nom d'image ce que je peux faire mais là je vais devoir compter sur le bon fonctionnemnt de mes outils, c'est créer ce dossier dans mon serveur web et linker dessus mais là l'url va être long... et je ne sais pas si je vais pouvoir le rewriter...
en tout cas merci j'apprends plus de la syntaxe et ça m'aide car très bien expliqué :)
animostab
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
737
23 juin 2014 à 22:10
23 juin 2014 à 22:10
Re
Tu peux modifier une chaine de caractère en jquery avec replace
exemple pour ton truc
transforme
img src="http://www.monsite.com/chemin/jean.jpg">
en
img src="http://www.monsite.com/chemin/jeandos.jpg">
en faisant plusieurs var successifs qui modifient la chaine de caractère de l'attribut src tu pourras peux être faire ce que tu veux avec un seul script jquery
Bizarre quand meme que tu n'ai pas l'accès au ftp si tu est proprio du site il faudrait normalement que tu l'aie
Tu peux modifier une chaine de caractère en jquery avec replace
exemple pour ton truc
var url = $("img").attr("src"); //recupère la valeur de src
var newurl = url.replace(".jpg",""); //retire le .jpg de la chaine de caractère
var newurl = newurl+"dos.jpg"; // rajoute dos.jpg à la chaine de caractère précedente
transforme
img src="http://www.monsite.com/chemin/jean.jpg">
en
img src="http://www.monsite.com/chemin/jeandos.jpg">
en faisant plusieurs var successifs qui modifient la chaine de caractère de l'attribut src tu pourras peux être faire ce que tu veux avec un seul script jquery
Bizarre quand meme que tu n'ai pas l'accès au ftp si tu est proprio du site il faudrait normalement que tu l'aie
gintoxic
Messages postés
524
Date d'inscription
mardi 31 juillet 2007
Statut
Membre
Dernière intervention
7 avril 2016
10
23 juin 2014 à 22:20
23 juin 2014 à 22:20
non je ne suis pas proprio de ce site en fait, c'est une solution e-commerce
merci pour l'astuce ça devrait fonctionner
merci pour l'astuce ça devrait fonctionner
gintoxic
Messages postés
524
Date d'inscription
mardi 31 juillet 2007
Statut
Membre
Dernière intervention
7 avril 2016
10
23 juin 2014 à 22:24
23 juin 2014 à 22:24
mais dans quel bouquin je peux apprendre ces trucs ??
animostab
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
737
Modifié par animostab le 24/06/2014 à 01:18
Modifié par animostab le 24/06/2014 à 01:18
perso je n'ai pas de bouquin
en jquery tu as ca
http://jquery.developpeur-web2.com/documentation.php
https://api.jquery.com/
https://openclassrooms.com/fr/courses/3504441-introduction-a-jquery?archived-source=1631636
et sinon google
voila tu peux mettre en résolu
en jquery tu as ca
http://jquery.developpeur-web2.com/documentation.php
https://api.jquery.com/
https://openclassrooms.com/fr/courses/3504441-introduction-a-jquery?archived-source=1631636
et sinon google
voila tu peux mettre en résolu
21 juin 2014 à 01:03
j'oubliais... j'ai au moins 200 images à faire... ca risque as de paraitre long d'appliquer un code à chaque élément ?
je pense que j'ai mal saisi votre code....
21 juin 2014 à 18:18
21 juin 2014 à 19:40
j'ai beaucoup de mal avec la syntaxe JS... (pourtant pas très différente de PHP et simplifiée avec jQuery)