> Tous les forums > Forum Forum des Webmasters
 Passer la souris sur une photo et voir une autre ?Sujet résolu
Ajouter un message à la discussion
Page : [1] 
Page 1 sur 1
kristian_wsl
  Posté le 08/02/2008 @ 13:29 
Aller en bas de la page 
Astucien

Coucou les copains

Je cherche un truc pour faire apparaître une autre photo quand on passe sur la première avec la souris ou en cliquant !

J'avais appris ça dans ma jeunesse mais je ne m'en souviens plus ! C'était avant la guerre et je ne sais plus laquelle ? Lol

Un peu comme un bouton, sur un site, qui change de look quand on clique dessus !

Merci pour vos trouvailles



Modifié par kristian_wsl le 08/02/2008 13:29
Publicité
elle
 Posté le 08/02/2008 à 13:39 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

kristian_wsl
 Posté le 08/02/2008 à 14:37 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

elle Merci hooo Maîtresse !

Tu penses que ça marche sur un site ? Par exemple, ici en déposant une (double) photo ?

Le but est de l'utiliser comme par exemple, pour les photos d'indentification, sur des sites et je ne vois pas comment intégrer la formule ?

elle
 Posté le 08/02/2008 à 14:41 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

Ah non, je croyais que tu faisais un site...

Pour mettre ici, à part faire un gif animé, je ne vois pas vraiment... Et encore là, il n'y aura pas d'interaction avec la souris.



Modifié par elle le 08/02/2008 14:42
kristian_wsl
 Posté le 08/02/2008 à 15:11 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

elle Je l'ai déjà fait, ce genre de photos . Mais je ne sais plus comment ? Grrrrrrrr
elle
 Posté le 08/02/2008 à 15:16 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

Avec du JavaScript?
kristian_wsl
 Posté le 08/02/2008 à 15:25 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

Je ne sais plus ? C'est le trou !

J'ai besoin d'une poutine pour régénérer mon cerveau

elle
 Posté le 08/02/2008 à 15:31 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

Un générateur en ligne, peut-être?

Poutine et cerveau? Pas certaine que la relation soit proportionnelle...

kristian_wsl
 Posté le 08/02/2008 à 19:30 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

Polo, tu n'auras plus de chocolat belge ! Pfffffffffff

Bon, je réexplique, les codes sont inutilisables dans ce cas !

Je désire juste placer une photo sur un site, comme ici ! Le beau schtroumph.

Et qu'elle change quand on passe dessus !



Modifié par kristian_wsl le 08/02/2008 19:33
Publicité
Malcolm
 Posté le 08/02/2008 à 19:43 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Astucien

Bin avec du javascript, ça peut se faire sans soucis ...

supposons cette image (qui est celle qui sera remplacée par l'autre) :

<img id="zone_image" src="images/photo1.jpg" width="100" height="100" alt="blabla">

et ce javascript qui, au survol de mon texte, va remplacer photo1 par photo2 et dès que ma souris quittera le survol du texte, remettra photo1 :

<span onmouseover="document.getElementById('zone_image').src='images/photo2.jpg';" onmouseout="document.getElementById('zone_image').src='images/photo1.jpg';">le texte à survoler</span>

Bien entendu, on peut faire exactement la même chose en bien plus puissant s'il faut faire plusieurs textes et plusieurs images. L'exemple ci-dessous produira le même effet, mais autrement pensé (donc pas la peine de mettre les 2 à la fois !)

entre <head> et </head> :

<script type="text/javascript">

function SwitchImg(zone_img, url_img)

{

document.getElementById(zone_img).src=url_img;

}

</script>

puis il faut prévoir les images qui seront remplacées au survol (ici j'en mets 3) : photo 11 remplacée par photo 111, 21 par 221 et 31 par 331.jpg :

<img id="zone_image1" src="images/photo11.jpg" width="100" height="100" alt="blabla">

<img id="zone_image2" src="images/photo21.jpg" width="100" height="100" alt="blabla">

<img id="zone_image3" src="images/photo31.jpg" width="100" height="100" alt="blabla">

et les textes correspondants :

<span onmouseover="SwitchImg('zone_image1', 'images/photo111.jpg')" onmouseout="SwitchImg('zone_image1', 'images/photo11.jpg')">Changer l'image 1 en survolant ce texte</span>

<span onmouseover="SwitchImg('zone_image2', 'images/photo221.jpg')" onmouseout="SwitchImg('zone_image2', 'images/photo21.jpg')">Changer l'image 1 en survolant ce texte</span>

<span onmouseover="SwitchImg('zone_image3', 'images/photo331.jpg')" onmouseout="SwitchImg('zone_image3', 'images/photo31.jpg')">Changer l'image 1 en survolant ce texte</span>

elle
 Posté le 08/02/2008 à 19:51 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

Malcolm,

Et on peut mettre ça en signature sur un forum, par exemple?



Modifié par elle le 08/02/2008 19:52
kristian_wsl
 Posté le 08/02/2008 à 19:55 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

Malcolm Je comprends parfaitement le procédé mais comment l'utiliser , par exemple, pour remplacer mon Schtroumph par un autre en passant dessus, ça ne marche pas !

Modifié par kristian_wsl le 08/02/2008 19:55
faboun
 Posté le 08/02/2008 à 20:06 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Astucien

kristian_wsl a écrit :

pour remplacer mon Schtroumph par un autre en passant dessus, ça ne marche pas !

normal un schtroumph ne marche pas sur un schtroumph il s'entraide

peut etre aurais tu plus de chance avec un belge sur un belge a defaut d'une belge

kristian_wsl
 Posté le 08/02/2008 à 20:19 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

faboun Va au coin et vite !!!!!! T'es vraiment pas trés schtroumph avec moi ! Lol
faboun
 Posté le 08/02/2008 à 20:24 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Astucien

kristian_wsl a écrit :

faboun Va au coin et vite !!!!!! T'es vraiment pas trés schtroumph avec moi ! Lol

mille excuses je ne t'offre pas de chocolat polo va etre jaloux

mais ceci

kristian_wsl
 Posté le 08/02/2008 à 20:34 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

Malcolm
 Posté le 09/02/2008 à 01:28 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Astucien

elle a écrit :

Malcolm,

Et on peut mettre ça en signature sur un forum, par exemple?


Oui et non : si tu observes attentivement ma signature, tu verras qu'il y a un lien tiré au sort ... Mais tous les forums n'acceptent pas le javascript, etje me suis servi d'un manque de l'apparence de celui-ci pour y mettre mon lien. Toi et moi aimons particulièrement ce champ texte avec cette pseudo mise en forme, c'est en la désactivant quej'ai pu mettre mon lien, mais sur d'autres forum, ça n'est pas possible.

D'autre part, mon exemple est valable pour une seule occurence, parce que j'utilise l'attribut "id" de l'image, or si c'est pour le schtroumpf qui parle, il suffit qu'il réponde à un sujet et l'image à changer existe en double ... Laquelle changer au survol d'un texte ? L'une, les 2 ?

Là ça posera problème.

Publicité
elle
 Posté le 09/02/2008 à 02:44 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

Malcolm a écrit :

Oui et non : si tu observes attentivement ma signature, tu verras qu'il y a un lien tiré au sort ...


J'ai beau regarder très attentivement, il me semble que c'est toujours le même lien.

À moins que je ne regarde pas à la bonne place, c'est possible.

Malcolm
 Posté le 09/02/2008 à 12:24 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Astucien

Sur PHP-Astux également + lien qui suit. Actualise la page et regarde à nouveau le lien.
Malcolm
 Posté le 09/02/2008 à 15:03 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Astucien

Clément va me faire panpanculcul s'il lit que j'ai détourné son système

Mais j'ai exploité un javascript couplé à ma base de données de mon site ...

elle
 Posté le 09/02/2008 à 18:01 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

Malcolm a écrit :

Sur PHP-Astux également + lien qui suit. Actualise la page et regarde à nouveau le lien.

Ah! OK. Effectivement, je ne regardais pas au bon endroit.

Page : [1] 
Page 1 sur 1

Vous devez être connecté pour poster des messages. Cliquez ici pour vous identifier.

Vous n'avez pas de compte ? Créez-en un gratuitement !


Sujets relatifs
passer d un espace texte a l autre avec entree
Passer d'une page à l'autre sans clique
Effet d'une page sur une autre
Rendre une photo non enregistrable
Mon site est intégré dans un autre sans autorisation
Passer à la page sans cadre
Questions avant création de page web ou autre
Base de donnés d'un hébérgeur à un autre
Souci appellation photo sur google images
pointer sur une photo pour revenir à l'accueil
Plus de sujets relatifs à Passer la souris sur une photo et voir une autre ?
 > Tous les forums > Forum Forum des Webmasters