- Charte d'utilisation de CodeS-sourceS-- Respect d'autrui
- Charte d'utilisation de CodeS-SourceS - Aspects légaux
- Conditions générales d'utilisation
- Charte d'utilisation de Codes-Sources -- Gestion de communauté
- Charte de CodeS-SourceS - Principes de modération
- Charte de CommentCaMarche.net - Conseils d'écriture
Alterner deux images [Résolu]
CyricFirehands
- Messages postés
- 6
- Date d'inscription
- mercredi 19 août 2009
- Dernière intervention
- 21 novembre 2009
- Messages postés
- 6
- Date d'inscription
- mercredi 19 août 2009
- Dernière intervention
- 21 novembre 2009
A voir également:
- Alterner deux images
- Supperposer 2 images avec un effet de transparence - Codes sources - Visual Basic / VB.NET (Graphique)
- Graphique: fusion de 2 images - Codes sources - Visual Basic / VB.NET (Graphique)
- Graphique: fusion de 2 images très rapidement - Codes sources - Visual Basic / VB.NET (Graphique)
- Comparer 2 images - Codes sources - Visual Basic / VB.NET (Graphique)
- Comparer deux images pixel/pixel - Codes sources - Visual Basic / VB.NET (Graphique)
13 réponses
Meilleure réponse
- Messages postés
- 4934
- Date d'inscription
- samedi 1 juillet 2006
- Dernière intervention
- 2 février 2015
et ben ????
j'ai mis un exemple avec un click sur
une image ou sur un lien !!!!
remplacez par le click sur un div
mais si c'est pour mettre une image dans un
div avec innerHTML, autant utiliser directement
le src de la balise !
tant à vos histoires de positionnements, ce que
vous mettez pour un div, vous pouvez l'appliquer
à un img.
j'ai mis un exemple avec un click sur
une image ou sur un lien !!!!
remplacez par le click sur un div
mais si c'est pour mettre une image dans un
div avec innerHTML, autant utiliser directement
le src de la balise !
tant à vos histoires de positionnements, ce que
vous mettez pour un div, vous pouvez l'appliquer
à un img.
Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire
a aidé 101 internautes ce mois-ci
- Messages postés
- 469
- Date d'inscription
- mercredi 9 janvier 2002
- Dernière intervention
- 20 février 2017
En fait ton alignement ne sert pas à grand chose, une div aurait largement suffit, il éxiste la propriété text-indent en CSS, et en ne modifiant pas l'image mais la propriété backgroundImage de la div, tu obtiendrais je le pense ce que tu cherches...
Pourquoi faire compliquer quand on peut faire encore plus compliquer ?
ça donnerait un truc du genre:
[o-_-o]
Pourquoi faire compliquer quand on peut faire encore plus compliquer ?
ça donnerait un truc du genre:
<html>
<head>
<script>
function changePict(_obj){
// récupération de toutes les images de la div
var _imgs = document.getElementById("divContent").getElementsByTagName("div");
// parcours les images.
for ( var i=0; i< _imgs.length; i++){
// si l'identifiant de l'image est différente de l'objet passé en paramètre et que sa source n'est pas "grise" alors on la passe en gris.
if( _imgs[i].id != _obj.id && _imgs[i].style.backgroundImage != "url('silver.png')"){
_imgs[i].style.backgroundImage = "url('silver.png')"
}
// si l'identifiant de l'image est la même que celle passée en paramètre alors on la passe en vert.
if (_imgs[i].id == _obj.id ){
_imgs[i].style.backgroundImage = "url('green.png')"
}
}
}
</script>
<style>
.DivMenu{
overflow:hidden;
width:100px;
height:25px;
text-decoration:none;
background-position:top left;
background-repeat:no-repeat;
background-image:url("silver.png");
text-indent:15px;
cursor:pointer;
}
</style>
</head>
Premier menu
Deuxième menu
Troisième menu
[o-_-o]
Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire
a aidé 101 internautes ce mois-ci
- Messages postés
- 4934
- Date d'inscription
- samedi 1 juillet 2006
- Dernière intervention
- 2 février 2015
Bonjour,
_ pourquoi passer par innerHTML ?
changer directement le src de l'image
_ si j'ai compris, à un moment donné
seul 1 image peut-être verte (?)
alors, pourquoi remettre en gris celles
qui le sont déjà ?
mémorisez celle qui est en vert, il
vous suffit alors de ne changer que
celle là, du style :
Cordialement
_ pourquoi passer par innerHTML ?
changer directement le src de l'image
_ si j'ai compris, à un moment donné
seul 1 image peut-être verte (?)
alors, pourquoi remettre en gris celles
qui le sont déjà ?
mémorisez celle qui est en vert, il
vous suffit alors de ne changer que
celle là, du style :
var prec=document.getElementById("id de l'image 1");
// pour le cas 1ère fois et éviter un test dans la fonction
....
function metenvert(quoi)
{ prec.src="image grise";
prec=quoi;
prec.src="image verte";
}
Cordialement
- Messages postés
- 6
- Date d'inscription
- mercredi 19 août 2009
- Dernière intervention
- 21 novembre 2009
Merci de votre attention,
En effet, je cherche a faire en sorte que l'image dans le menu "marque" le choix actif, en gros si accueil est cliqué, on passe son image de gris a vert,
Le problème c'est qu'alors, j'ai 11 images différentes grise, qu'il faut remplacer par une verte lors du clic sur la div la contenant (en gros)
Parce que la votre fonction me semble ne fonctionner que dans le cas ou j'ai une seule image, non ?
En effet, je cherche a faire en sorte que l'image dans le menu "marque" le choix actif, en gros si accueil est cliqué, on passe son image de gris a vert,
Le problème c'est qu'alors, j'ai 11 images différentes grise, qu'il faut remplacer par une verte lors du clic sur la div la contenant (en gros)
Parce que la votre fonction me semble ne fonctionner que dans le cas ou j'ai une seule image, non ?
- Messages postés
- 4934
- Date d'inscription
- samedi 1 juillet 2006
- Dernière intervention
- 2 février 2015
ben non...
on appelle la fonction, avec en paramètre
l'image en mettre en vert,
donc infinité d'images possibles
>>j'ai 11 images différentes grise, qu'il faut remplacer
>>par une verte lors du clic sur la div la contenant
>>(en gros)
ah ? le problème, s'il est bien exprimé (!?!??)
est différent de ce que j'ai compris alors ???
11 images contenus dans un div
qu'il faut modifier en vert...
toutes ?
et où sont celles à repasser en gris ?
on appelle la fonction, avec en paramètre
l'image en mettre en vert,
donc infinité d'images possibles
>>j'ai 11 images différentes grise, qu'il faut remplacer
>>par une verte lors du clic sur la div la contenant
>>(en gros)
ah ? le problème, s'il est bien exprimé (!?!??)
est différent de ce que j'ai compris alors ???
11 images contenus dans un div
qu'il faut modifier en vert...
toutes ?
et où sont celles à repasser en gris ?
- Messages postés
- 4934
- Date d'inscription
- samedi 1 juillet 2006
- Dernière intervention
- 2 février 2015
exemple avec 3 images....
[javascript:met(document.getElementById('img1')); 1]
[javascript:met(document.getElementById('img2')); 2]
[javascript:met(document.getElementById('img3')); 3]
<script>
var prec=document.getElementById("img1");
function met(quoi)
{ prec.src="btn green.gif";
prec=quoi;
prec.src="btn red.gif";
}
</script>
bien entendu, à adapter à ce que vous faites...
- Messages postés
- 6
- Date d'inscription
- mercredi 19 août 2009
- Dernière intervention
- 21 novembre 2009
Je vais essayer d'etre clair ^^
En fait le plus simple c'est d'aller jeter un oeil au site en chantier
http://www.lemonrepro.com/FTP/Website/
l'idée c'est de faire en sorte que le site ne soit qu'une seule et même page.
Pour cela tout est caché, et ne s'affiche qu'au clic sur les élément du menu de gauche
Le menu étant une grosse div (pour appliquer le style du web-design)
et les éléments cliquable sont des div contenant l'image grise et le texte correspondant au "bouton"
J'ai donc au final 11 "boutons" et je voudrais qu'au clic sur l'un d'entre eux, l'image grise devienne verte.
Ce que je réalisai jusqu'alors via des innerHTML.
Mon soucis c'est qu'a la première visite le script a un comportement innattendu, et charge toute les images a chaque clic. et ce de façon très visible, donc pas très joli.
En fait le plus simple c'est d'aller jeter un oeil au site en chantier
http://www.lemonrepro.com/FTP/Website/
l'idée c'est de faire en sorte que le site ne soit qu'une seule et même page.
Pour cela tout est caché, et ne s'affiche qu'au clic sur les élément du menu de gauche
Le menu étant une grosse div (pour appliquer le style du web-design)
et les éléments cliquable sont des div contenant l'image grise et le texte correspondant au "bouton"
J'ai donc au final 11 "boutons" et je voudrais qu'au clic sur l'un d'entre eux, l'image grise devienne verte.
Ce que je réalisai jusqu'alors via des innerHTML.
Mon soucis c'est qu'a la première visite le script a un comportement innattendu, et charge toute les images a chaque clic. et ce de façon très visible, donc pas très joli.
- Messages postés
- 469
- Date d'inscription
- mercredi 9 janvier 2002
- Dernière intervention
- 20 février 2017
Bonjour je ne sais pas si j'ai tout suivi (ou plutôt (le chien de Mickey) compris)
Mais il est même possible d'avoir n image:
cela ne suffirait-il point ?
Quand à l'utilisation du css il serait peut être bon d'y jeter un oeil avec la balise a non ?
[o-_-o]
Mais il est même possible d'avoir n image:
<html>
<head>
<script>
function changePict(_obj){
// récupération de toutes les images de la div
var _imgs = document.getElementById("divContent").getElementsByTagName("img");
// parcours les images.
for ( var i=0; i< _imgs.length; i++){
// si l'identifiant de l'image est différente de l'objet passé en paramètre et que sa source n'est pas "grise" alors on la passe en gris.
if( _imgs[i].id != _obj.id && _imgs[i].src != "silver.png"){
_imgs[i].src = "silver.png";
}
// si l'identifiant de l'image est la même que celle passée en paramètre alors on la passe en vert.
if (_imgs[i].id == _obj.id ){
_imgs[i].src = "green.png";
}
}
}
</script>
</head>
cela ne suffirait-il point ?
Quand à l'utilisation du css il serait peut être bon d'y jeter un oeil avec la balise a non ?
[o-_-o]
- Messages postés
- 6
- Date d'inscription
- mercredi 19 août 2009
- Dernière intervention
- 21 novembre 2009
Hello, et merci de vos interventions,
mais je pense que le problème qui me bloque le plus, c'est qu'en fait le "bouton" est une div dans laquelle se trouve deux div alignée horizontalement, l'une conteannt l'image gris originale (grise pour tous au départ) et la suivante le texte.
Je voudrai que le code se déclanche au clic sur la div contenant les boutons, je pense que cela pose un problème pour récupérer les id, enfin je pense, je regarderai cela plus avant ce soir.
Merci a vous.
mais je pense que le problème qui me bloque le plus, c'est qu'en fait le "bouton" est une div dans laquelle se trouve deux div alignée horizontalement, l'une conteannt l'image gris originale (grise pour tous au départ) et la suivante le texte.
Je voudrai que le code se déclanche au clic sur la div contenant les boutons, je pense que cela pose un problème pour récupérer les id, enfin je pense, je regarderai cela plus avant ce soir.
Merci a vous.
- Messages postés
- 6
- Date d'inscription
- mercredi 19 août 2009
- Dernière intervention
- 21 novembre 2009
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.