Affichage Image dans un autre endroit
Résolu/Fermé
ms_vinc
Messages postés
14
Date d'inscription
lundi 10 juin 2002
Statut
Membre
Dernière intervention
12 septembre 2007
-
31 août 2007 à 16:36
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 - 2 sept. 2007 à 12:32
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 - 2 sept. 2007 à 12:32
A voir également:
- Affichage Image dans un autre endroit
- Image iso - Guide
- Remettre l'ecran a l'endroit - Guide
- Acronis true image - Télécharger - Sauvegarde
- Faststone image viewer - Télécharger - Visionnage & Diaporama
- Google recherche par image - Guide
22 réponses
Ajbol
Messages postés
3014
Date d'inscription
jeudi 16 novembre 2006
Statut
Membre
Dernière intervention
23 janvier 2012
403
31 août 2007 à 16:37
31 août 2007 à 16:37
https://www.commentcamarche.net/contents/497-images-en-html
neojick
Messages postés
167
Date d'inscription
mardi 22 mai 2007
Statut
Membre
Dernière intervention
30 mars 2009
99
31 août 2007 à 16:43
31 août 2007 à 16:43
Il faut faire ça en javascript.
Tu mets ton image dans une div de cette façon :
Et sur ton lien
Dans ton HEAD tu mets ce code javascript
Tu mets ton image dans une div de cette façon :
<div id="id_div" style="display:none;">
<img src.... />
</div>
Et sur ton lien
a href="" onclick="javascript:visibilite('id_div'); return false;" >Lien</a>
Dans ton HEAD tu mets ce code javascript
function visibilite(thingId)
{
var targetElement;
targetElement = document.getElementById(thingId) ;
if (targetElement.style.display == "none")
{
targetElement.style.display = "" ;
} else {
targetElement.style.display = "none" ;
}
}
ms_vinc
Messages postés
14
Date d'inscription
lundi 10 juin 2002
Statut
Membre
Dernière intervention
12 septembre 2007
2
31 août 2007 à 16:45
31 août 2007 à 16:45
Hmm, je pense qu'on parle pas de la même chose lol!
En fait, pour illustrer un peu, admettons que j'ai un lien a droite de l'écran, et lorsque je passe sur ce lien, une image s'affiche a gauche de l'écran.
En fait, pour illustrer un peu, admettons que j'ai un lien a droite de l'écran, et lorsque je passe sur ce lien, une image s'affiche a gauche de l'écran.
ms_vinc
Messages postés
14
Date d'inscription
lundi 10 juin 2002
Statut
Membre
Dernière intervention
12 septembre 2007
2
31 août 2007 à 16:46
31 août 2007 à 16:46
Ah super!
Je vais tester tout de suite ;)
Merci beaucoup
Je vais tester tout de suite ;)
Merci beaucoup
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
neojick
Messages postés
167
Date d'inscription
mardi 22 mai 2007
Statut
Membre
Dernière intervention
30 mars 2009
99
31 août 2007 à 17:32
31 août 2007 à 17:32
Alors ? Ca fonctionne ?
ms_vinc
Messages postés
14
Date d'inscription
lundi 10 juin 2002
Statut
Membre
Dernière intervention
12 septembre 2007
2
1 sept. 2007 à 01:57
1 sept. 2007 à 01:57
Je n'ai pas réussi à le faire fonctionner!
http://ddgparty.free.fr/exemple.jpg
Je pense que vous verrez un peu mieux :)
Les petits carrés vont être les "boutons" de mon site. Et lorsque je survole un des boutons, je voudrais qu'une image s'affiche dans le plus gros carré à gauche.
J'imagine qu'en Flash ca serait tout simple à faire, mais je ne connais absolument rien en flash!
Cordialement, ViNc
http://ddgparty.free.fr/exemple.jpg
Je pense que vous verrez un peu mieux :)
Les petits carrés vont être les "boutons" de mon site. Et lorsque je survole un des boutons, je voudrais qu'une image s'affiche dans le plus gros carré à gauche.
J'imagine qu'en Flash ca serait tout simple à faire, mais je ne connais absolument rien en flash!
Cordialement, ViNc
Dalida
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
920
1 sept. 2007 à 10:37
1 sept. 2007 à 10:37
salut,
tu peux aussi utiliser une image avec des zones réactives.
regarde le deuxième exemple de cette page.
tu peux aussi utiliser une image avec des zones réactives.
regarde le deuxième exemple de cette page.
Superbe ! Le deuxième est exactement ce dont j'ai besoin! Ou est ce que je pourrais récupérer le code utilisé? Car il me semble que le code qui y figure est uniquement pour le premier exemple non?
Existe-t-il des tutos pour le mapping ? Pour le moment je ne pige rien à Amaya lol
Existe-t-il des tutos pour le mapping ? Pour le moment je ne pige rien à Amaya lol
Dalida
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
920
1 sept. 2007 à 17:36
1 sept. 2007 à 17:36
salut,
"Ou est ce que je pourrais récupérer le code utilisé? Car il me semble que le code qui y figure est uniquement pour le premier exemple non?"
non, les deux codes sont rigoureusement identiques, par faignantise j'ai juste ajouter '2'.
le script complet, tu verras que le code est répété deux fois.
"Existe-t-il des tutos pour le mapping ?"
je n'en connais pas mais ça doit se trouver.
dans un premier temps tu peux regarder la définition chez SelfHTML.
"Pour le moment je ne pige rien à Amaya"
quelques instructions sommaires.
le manuel du W3C en français.
"Ou est ce que je pourrais récupérer le code utilisé? Car il me semble que le code qui y figure est uniquement pour le premier exemple non?"
non, les deux codes sont rigoureusement identiques, par faignantise j'ai juste ajouter '2'.
le script complet, tu verras que le code est répété deux fois.
"Existe-t-il des tutos pour le mapping ?"
je n'en connais pas mais ça doit se trouver.
dans un premier temps tu peux regarder la définition chez SelfHTML.
"Pour le moment je ne pige rien à Amaya"
quelques instructions sommaires.
le manuel du W3C en français.
Dites moi, je pense avoir mal interpreté quelquechose.
En fait, lorsque l'on survole une <area> de notre image, la fonction onmouseover charge l'image complète, ou va-t-il charger uniquement la partie "area" ?
En gros, lorsque je survolerais la rubrique 1, le navigateur chargera à nouveau une autre image bannière, mais avec le changement de la rubrique 1, c'est ca ?
Donc si j'ai 8 rubriques, il faut que je fasse 8 bannières, c'est bien ca ?
En fait, lorsque l'on survole une <area> de notre image, la fonction onmouseover charge l'image complète, ou va-t-il charger uniquement la partie "area" ?
En gros, lorsque je survolerais la rubrique 1, le navigateur chargera à nouveau une autre image bannière, mais avec le changement de la rubrique 1, c'est ca ?
Donc si j'ai 8 rubriques, il faut que je fasse 8 bannières, c'est bien ca ?
Dalida
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
920
1 sept. 2007 à 17:44
1 sept. 2007 à 17:44
"En gros, lorsque je survolerais la rubrique 1, le navigateur chargera à nouveau une autre image bannière, mais avec le changement de la rubrique 1, c'est ca ? "
banco !
"Donc si j'ai 8 rubriques, il faut que je fasse 8 bannières, c'est bien ca ?"
oui, il y a moyen de le faire différemment qui serait sémantiquement beaucoup plus correct, c'est de créer un vrai menu avec une structure en liste non numéroté ou en liste de définition.
je vais essayer de me pencher dessus ce week-end.
étant donné que les zones de ton image sont réparties un peu partout, je pense que cela ne te concerne pas.
pour ta bannière si il y a une partie qui reste identique pour les 8 rubriques il faudra découper la bannière pour éviter de charger cette zone inutilement.
à +
banco !
"Donc si j'ai 8 rubriques, il faut que je fasse 8 bannières, c'est bien ca ?"
oui, il y a moyen de le faire différemment qui serait sémantiquement beaucoup plus correct, c'est de créer un vrai menu avec une structure en liste non numéroté ou en liste de définition.
je vais essayer de me pencher dessus ce week-end.
étant donné que les zones de ton image sont réparties un peu partout, je pense que cela ne te concerne pas.
pour ta bannière si il y a une partie qui reste identique pour les 8 rubriques il faudra découper la bannière pour éviter de charger cette zone inutilement.
à +
ms_vinc
Messages postés
14
Date d'inscription
lundi 10 juin 2002
Statut
Membre
Dernière intervention
12 septembre 2007
2
1 sept. 2007 à 20:22
1 sept. 2007 à 20:22
Ok, pour mettre les areas en place ya pas de soucis. Parcontre je n'arrive pas a faire fonctionner le script! En gros lorsque je survole la partie, il se passe rien , pas de changement d'image!
Html:
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<meta name="generator" content="Amaya, see http://www.w3.org/Amaya/" />
<script type="text/javascript" src="img_map.js">
</script>
</head>
<body>
<p>
<img alt="ori" src="test/original.gif" width="800" height="303" usemap="#map" border="0"/>
<map name="map" id="map">
<area shape="rect" coords="158,7,233,94" alt="one"
onmouseover="changeImage2(1); return false;"
onmouseout="changeImage2(0); return false;" href="#">
</map>
</p>
</body>
Javascript: (fichier externe comme chez toi):
if (document.images)
{
preload2 = false;
url2 = new Array();
url2[0] = "test/original.gif";
url2[1] = "test/one.gif";
url2[2] = "test/original.gif";
url2[3] = "ressources/map2_trois.png";
url2[4] = "ressources/map2_quatre.png";
var i = 0;
for(i=0; i<5; i++)
{
tmp2 = new Image(640, 480)
tmp2.src = url2[i];
}
preload2 = true;
}
function changeImage2(img_index) {
if (document.images && (preload2 == true)) {
document.plan2.src = url2[img_index];
}
}
J'ai simplement voulu tester avec une rubrique pour le moment ..
Html:
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<meta name="generator" content="Amaya, see http://www.w3.org/Amaya/" />
<script type="text/javascript" src="img_map.js">
</script>
</head>
<body>
<p>
<img alt="ori" src="test/original.gif" width="800" height="303" usemap="#map" border="0"/>
<map name="map" id="map">
<area shape="rect" coords="158,7,233,94" alt="one"
onmouseover="changeImage2(1); return false;"
onmouseout="changeImage2(0); return false;" href="#">
</map>
</p>
</body>
Javascript: (fichier externe comme chez toi):
if (document.images)
{
preload2 = false;
url2 = new Array();
url2[0] = "test/original.gif";
url2[1] = "test/one.gif";
url2[2] = "test/original.gif";
url2[3] = "ressources/map2_trois.png";
url2[4] = "ressources/map2_quatre.png";
var i = 0;
for(i=0; i<5; i++)
{
tmp2 = new Image(640, 480)
tmp2.src = url2[i];
}
preload2 = true;
}
function changeImage2(img_index) {
if (document.images && (preload2 == true)) {
document.plan2.src = url2[img_index];
}
}
J'ai simplement voulu tester avec une rubrique pour le moment ..
warlix
Messages postés
1201
Date d'inscription
mercredi 25 juillet 2007
Statut
Contributeur
Dernière intervention
21 février 2009
288
1 sept. 2007 à 20:39
1 sept. 2007 à 20:39
salut
tu es sous dream ?
si oui tu as la fonction roll over dedans integré qui te permet de le faire , regarde (si c est le cas) l aide du logiciel.
tu es sous dream ?
si oui tu as la fonction roll over dedans integré qui te permet de le faire , regarde (si c est le cas) l aide du logiciel.
ms_vinc
Messages postés
14
Date d'inscription
lundi 10 juin 2002
Statut
Membre
Dernière intervention
12 septembre 2007
2
1 sept. 2007 à 20:52
1 sept. 2007 à 20:52
Oui je suis sous dream.
Mais est ce que le rollover me permet vraiment de faire ce que je veux? Si oui, je ne saisis pas trop le fonctionnement dans ce cas!
Comment devrais-je procéder ?
Mais est ce que le rollover me permet vraiment de faire ce que je veux? Si oui, je ne saisis pas trop le fonctionnement dans ce cas!
Comment devrais-je procéder ?
warlix
Messages postés
1201
Date d'inscription
mercredi 25 juillet 2007
Statut
Contributeur
Dernière intervention
21 février 2009
288
1 sept. 2007 à 22:09
1 sept. 2007 à 22:09
salut
jete un oeil la dessus
http://interface.free.fr/Labo/RolloverExplication.html
l exemple
http://interface.free.fr/Labo/RolloverExemple.html
jete un oeil la dessus
http://interface.free.fr/Labo/RolloverExplication.html
l exemple
http://interface.free.fr/Labo/RolloverExemple.html
Dalida
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
920
1 sept. 2007 à 22:50
1 sept. 2007 à 22:50
re,
le JavaScript identifie la balise '<img>' à modifier grâce à son attribut 'id'.
il faut ajouter :
qui correspond dans le JS à :
ce code a été écrit justement pour éviter la tartine de code d'un certain DreamWeaver…
le JavaScript identifie la balise '<img>' à modifier grâce à son attribut 'id'.
il faut ajouter :
<img id="plan2" alt="ori" src="test/original.gif" width="800" height="303" usemap="#map" border="0"/>
qui correspond dans le JS à :
function changeImage2(img_index) {
if (document.images && (preload2 == true)) {
document.plan2.src = url2[img_index];
}
}
ce code a été écrit justement pour éviter la tartine de code d'un certain DreamWeaver…
warlix
Messages postés
1201
Date d'inscription
mercredi 25 juillet 2007
Statut
Contributeur
Dernière intervention
21 février 2009
288
2 sept. 2007 à 00:06
2 sept. 2007 à 00:06
salut
Oui , mais l'avantage avec dream , c est que justement tu ne code rien :p
tu clic simplement il gère tout , si on prend le temps de suivre l aide qui est trés bien faite
Je suis ok sur les codes/scripts divers , mais pour un truc simple comme un roll over , il te suffis juste de cliquer une fois sur un+
Sinon y a flash :p
Oui , mais l'avantage avec dream , c est que justement tu ne code rien :p
tu clic simplement il gère tout , si on prend le temps de suivre l aide qui est trés bien faite
Je suis ok sur les codes/scripts divers , mais pour un truc simple comme un roll over , il te suffis juste de cliquer une fois sur un+
Sinon y a flash :p
Dalida
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
920
2 sept. 2007 à 00:12
2 sept. 2007 à 00:12
autrement dit :
l'avantage avec dream , c'est que justement tu ne comprends rien
-:oD
chacun voit midi à sa porte…
l'avantage avec dream , c'est que justement tu ne comprends rien
-:oD
chacun voit midi à sa porte…
warlix
Messages postés
1201
Date d'inscription
mercredi 25 juillet 2007
Statut
Contributeur
Dernière intervention
21 février 2009
288
2 sept. 2007 à 00:26
2 sept. 2007 à 00:26
Oui exactement
Dans le monde il existe surement un milliard de manière pour faire UN truc , il existe des gens qui étudient pour utiliser le codage , d autres qui etudient dans un autre domaine
Pour se faire on a crée les logiciels :)
La plus part sont des logiciels pour assistés , peu etre que toi tu a pris le temps (trés long) pour apprendre le codage et les scripte , mais vois tu , moi je n aurai pas assez de temps pour prendre plus de 1 heure par mois pour vraiment maitriser.
Alors oui j utilise un truc qui bosse à ma place , je galère dés que ça deviens un peu plus technique et qu il faille entrer dans le code , mais pour un rollover , ce n est pas bien compliqué de clic sur un sigle ( + ) dans un logiciel , et je ne me sent pas plus idiot pour autant ^_^
Je suis plutôt graphiste , alors passer plus de 15 mns sur une ligne qui ne ressemble a rien , me fait vomir :)
passer 6 heure sur une créa j'y arrive avec un énorme plaisir.
Je suppose que tu utilise notpad pour faire ton traitement de texte :) sinon .... welcome on the same world
bien a toi
Dans le monde il existe surement un milliard de manière pour faire UN truc , il existe des gens qui étudient pour utiliser le codage , d autres qui etudient dans un autre domaine
Pour se faire on a crée les logiciels :)
La plus part sont des logiciels pour assistés , peu etre que toi tu a pris le temps (trés long) pour apprendre le codage et les scripte , mais vois tu , moi je n aurai pas assez de temps pour prendre plus de 1 heure par mois pour vraiment maitriser.
Alors oui j utilise un truc qui bosse à ma place , je galère dés que ça deviens un peu plus technique et qu il faille entrer dans le code , mais pour un rollover , ce n est pas bien compliqué de clic sur un sigle ( + ) dans un logiciel , et je ne me sent pas plus idiot pour autant ^_^
Je suis plutôt graphiste , alors passer plus de 15 mns sur une ligne qui ne ressemble a rien , me fait vomir :)
passer 6 heure sur une créa j'y arrive avec un énorme plaisir.
Je suppose que tu utilise notpad pour faire ton traitement de texte :) sinon .... welcome on the same world
bien a toi
Ok, apparement ya plusieurs facons de réaliser ce que je veux faire!
Maintenant, il faut que je vois le coté pratique, ca me dérange pas de taper le tout a la main (je prendrais un temps monstre pour corriger les fautes, mais j'aime bien apprendre ce genre de choses..).
mais du point du vue optimisation, le roll over me permet donc d'utiliser que des petites parties de ma bannière, donc c'est moins lourd que de recharger tout une bannière non?
Mais avec le roll over, comment on fait pour avoir l'affichage hors zone de cette image ?
Bref je vais déjà faire un test
Maintenant, il faut que je vois le coté pratique, ca me dérange pas de taper le tout a la main (je prendrais un temps monstre pour corriger les fautes, mais j'aime bien apprendre ce genre de choses..).
mais du point du vue optimisation, le roll over me permet donc d'utiliser que des petites parties de ma bannière, donc c'est moins lourd que de recharger tout une bannière non?
Mais avec le roll over, comment on fait pour avoir l'affichage hors zone de cette image ?
Bref je vais déjà faire un test
J'aimerais juste savoir comment dream à traduit le fait qu'il ouvre cette image dans l'autre colonne du tableau!
ms_vinc
Messages postés
14
Date d'inscription
lundi 10 juin 2002
Statut
Membre
Dernière intervention
12 septembre 2007
2
2 sept. 2007 à 11:06
2 sept. 2007 à 11:06
C'est good !
To use the Swap Image action:
Select Insert > Image or click the Image button on the Insert bar to insert an image.
In the Property inspector, enter a name for the image in the leftmost text box.
The Swap Image action still works if you do not name your images; it names unnamed images automatically when you attach the behavior to an object. However, it is easier to distinguish images in the Swap Image dialog box if all of the images are named beforehand.
Repeat steps 1 and 2 to insert additional images.
Select an object (generally the image you’re going to swap) and open the Behaviors panel.
Click the Plus (+) button and select Swap Image from the Actions pop-up menu.
From the Images list, select the image whose source you want to change.
Click Browse to select the new image file, or enter the path and filename of the new image in the Set Source To text box.
Repeat steps 6 and 7 for any additional images you want to change. Use the same Swap Image action for all the images you want to change at once; otherwise, the corresponding Swap Image Restore action won’t restore all of them.
Select the Preload Images option to load the new images into the browser’s cache when the page is loaded.
This prevents delays caused by downloading when it is time for the images to appear.
Click OK.
Check that the default event is the one you want.
If it isn’t, select another event from the pop-up menu. If the events you want are not listed, change the target browser in the Show Events For pop-up menu.
To use the Swap Image action:
Select Insert > Image or click the Image button on the Insert bar to insert an image.
In the Property inspector, enter a name for the image in the leftmost text box.
The Swap Image action still works if you do not name your images; it names unnamed images automatically when you attach the behavior to an object. However, it is easier to distinguish images in the Swap Image dialog box if all of the images are named beforehand.
Repeat steps 1 and 2 to insert additional images.
Select an object (generally the image you’re going to swap) and open the Behaviors panel.
Click the Plus (+) button and select Swap Image from the Actions pop-up menu.
From the Images list, select the image whose source you want to change.
Click Browse to select the new image file, or enter the path and filename of the new image in the Set Source To text box.
Repeat steps 6 and 7 for any additional images you want to change. Use the same Swap Image action for all the images you want to change at once; otherwise, the corresponding Swap Image Restore action won’t restore all of them.
Select the Preload Images option to load the new images into the browser’s cache when the page is loaded.
This prevents delays caused by downloading when it is time for the images to appear.
Click OK.
Check that the default event is the one you want.
If it isn’t, select another event from the pop-up menu. If the events you want are not listed, change the target browser in the Show Events For pop-up menu.
