Changement d'image au survol
gintoxic
Messages postés
524
Date d'inscription
Statut
Membre
Dernière intervention
-
animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention -
animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention -
bonjour,
je voudrais créer un effet sur un catalogue qui ferait changer l'image d'un conteneur au survol de la souris de l'utilisateur.
par exemple quand on va sur des site de vetements, on a une tenue et lors du survolde la souris, on vois le derriere de la tenue et puis hors survol, l'image revient à l'initial.
Je pense qu'il faut utiliser un tableau (ou deux) voire meme des objets, mais je ne comprends pas le systeme et ma logique n'arrive pas à créer ou imgine le code alors que je l'ai dans la tete quand meme (en fait j'arrive pas à le poser sur papier ou ordi)
si je parle de tableau, c'est que sur une page, je vais avoir pluseurs conteneur et pour chacun une photo de base et une deuxieme pour le passage de la souris... les faire un par un serait fastidieux...
J'identifie chaque conteneur par un id ou une classe (au choix)...
si vous avez une aide à me proposer, je serais ravi
un beau SVP et un grand MERCI pour votre aide par avance
Si Dieu a créé l'homme, qui a créé Dieu, l'homme non ?
http://www.nympheae.fr/
je voudrais créer un effet sur un catalogue qui ferait changer l'image d'un conteneur au survol de la souris de l'utilisateur.
par exemple quand on va sur des site de vetements, on a une tenue et lors du survolde la souris, on vois le derriere de la tenue et puis hors survol, l'image revient à l'initial.
Je pense qu'il faut utiliser un tableau (ou deux) voire meme des objets, mais je ne comprends pas le systeme et ma logique n'arrive pas à créer ou imgine le code alors que je l'ai dans la tete quand meme (en fait j'arrive pas à le poser sur papier ou ordi)
si je parle de tableau, c'est que sur une page, je vais avoir pluseurs conteneur et pour chacun une photo de base et une deuxieme pour le passage de la souris... les faire un par un serait fastidieux...
J'identifie chaque conteneur par un id ou une classe (au choix)...
si vous avez une aide à me proposer, je serais ravi
un beau SVP et un grand MERCI pour votre aide par avance
Si Dieu a créé l'homme, qui a créé Dieu, l'homme non ?
http://www.nympheae.fr/
A voir également:
- Changement d'image au survol
- Changement dns - Guide
- Image iso - Guide
- Changement d'écriture facebook - Guide
- Changement d'heure - Guide
- Acronis true image - Télécharger - Sauvegarde
3 réponses
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
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.
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
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.
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é :)
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
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
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....
j'ai beaucoup de mal avec la syntaxe JS... (pourtant pas très différente de PHP et simplifiée avec jQuery)