Affichage Image dans un autre endroit Résolu

Question

Bonjour à tous !

Désole pour le titre peu explicite, mais je trouve pas comment l'expliquer autrement. 
Voila donc ce que je veux faire, c'est simplement afficher une image à un endroit du site, lorsque je passe avec la souris sur un lien. 
J'espère être assez clair!

Merci d'avance, ViNc

Ajbol · Answer

https://www.commentcamarche.net/contents/497-images-en-html

neojick · Answer

Il faut faire ça en javascript. Tu mets ton image dans une div de cette façon : Et sur ton lien a href="" onclick="javascript:visibilite('id_div'); return false;" >Lien 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 · Answer

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.

ms_vinc · Answer

Ah super! 

Je vais tester tout de suite ;)

Merci beaucoup

neojick · Answer

Alors ? Ca fonctionne ?

ms_vinc · Answer

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

Dalida · Answer

salut,

tu peux aussi utiliser une image avec des zones réactives.
regarde le deuxième exemple de cette page.

ms_vinc · Answer

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

ms_vinc · Answer

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 ?

Dalida · Answer

"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.

à +

ms_vinc · Answer

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: Test

ori

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 · Answer

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.

ms_vinc · Answer

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 ?

warlix · Answer

salut


jete un oeil la dessus

http://interface.free.fr/Labo/RolloverExplication.html

l exemple

http://interface.free.fr/Labo/RolloverExemple.html

Dalida · Answer

re, le JavaScript identifie la balise '' à modifier grâce à son attribut 'id'. il faut ajouter : ori

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 · Answer

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

warlix · Answer

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

ms_vinc · Answer

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

ms_vinc · Answer

J'aimerais juste savoir comment dream à traduit le fait qu'il ouvre cette image dans l'autre colonne du tableau!

ms_vinc · Answer

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.

Dalida · Answer

salut,

avec le même JS tu peux changer une '<img>' depuis n'importe quelle balise, situées à n'importe quel endroit.
le problème avec ta bannière c'est si tu veux utiliser tous les petits rectangles comme menu tu vas avoir des difficultés pour la mise en page. alors qu'avec une '<map>' c'est réglé. pour la taille c'est 90ko, si il n'y a pas beaucoup d'autres choses à charger sur la page ça restera rapide.
par contre côté sémantique et accessibilité, c'est vraiment pas la joie !

il faut essayer avec une liste de liens.

Dalida · Answer

re, le menu en liste de lien peut être agrémenter d'une zone graphique réactive comme ça.

par contre il faut que je corrige le code pour IE6 et Opéra. je verrai ça plus tard dans la journée !

Affichage Image dans un autre endroit - Page 2

Discussions similaires

Newsletters