Lien entre un bouton rollover et une image
Ricarrrdo
-
Ricarrdo -
Ricarrdo -
Bonjour,
J'aimerais savoir comment faire pour lier un bouton (rollover) à une image qui est aussi un rollover sur la même page. Plus simplement, j'aimerais que lorsque je passe mon curseur sur un mot (rollover), une image interagie sur la même page. Comment fait-on ce lien ? Ou dois-je trouver un javascript qui fait ce genre d'interaction ? Je travaille avec Dreamweaver CS4.
Merci !
J'aimerais savoir comment faire pour lier un bouton (rollover) à une image qui est aussi un rollover sur la même page. Plus simplement, j'aimerais que lorsque je passe mon curseur sur un mot (rollover), une image interagie sur la même page. Comment fait-on ce lien ? Ou dois-je trouver un javascript qui fait ce genre d'interaction ? Je travaille avec Dreamweaver CS4.
Merci !
A voir également:
- Lien entre un bouton rollover et une image
- Créer un lien pour partager des photos - Guide
- Lien url - Guide
- Lien copié ✓ - Forum Google Chrome
- Verificateur de lien - Guide
- Image iso - Guide
2 réponses
Bonsoir,
Pour faire cela c'est effectivement javascript qu'il faut utiliser.
Plus particulièrement le DOM(Document Object Model).
La dernière (et seule)fois que j'ai utilisé les fonctions javascript de Dreamweaver c'était sur MX2004 donc ça dates un peu, donc je ne sait pas trop ce qu'il en est à présent mais il doit avoir des fonctions avec des scripts tout fait. L'embêtant c'est que c'est plus aussi (voire plus) complexe à apprendre que de le faire directement sans. Après quand on sait je dit pas, mais ça reste toujours moins pratique et modifiable qu'en faisant tout soi même en inscrivant le code.
Voici un exemple(tiré d'un vieux code avec changement d'image et texte, c'était avec des image map, là j'ai remplacé par des liens hypertextes simples donc la fonction restore() risque de faire un peu épileptique):
Il y a d'autres façons de faire un peu plus propre mais celle ci est assez simple et fonctionne.
Sinon voir google: changer image au passage de la souris ou DOM javascript+innerHTML
Pour faire cela c'est effectivement javascript qu'il faut utiliser.
Plus particulièrement le DOM(Document Object Model).
La dernière (et seule)fois que j'ai utilisé les fonctions javascript de Dreamweaver c'était sur MX2004 donc ça dates un peu, donc je ne sait pas trop ce qu'il en est à présent mais il doit avoir des fonctions avec des scripts tout fait. L'embêtant c'est que c'est plus aussi (voire plus) complexe à apprendre que de le faire directement sans. Après quand on sait je dit pas, mais ça reste toujours moins pratique et modifiable qu'en faisant tout soi même en inscrivant le code.
Voici un exemple(tiré d'un vieux code avec changement d'image et texte, c'était avec des image map, là j'ai remplacé par des liens hypertextes simples donc la fonction restore() risque de faire un peu épileptique):
<script type="text/javascript" langage="javascript">
<!----La balise script permet d'indiquer que l'on utilise du javascript le mieux est de placer entre les balises <head> et </head> --->
<!-- --------------------intervertir image/texte(au survol)-------------------- -->
function changeimage1(){
document.galerie.src="images/nice.gif";
document.getElementById("dynamiq").innerHTML ="Nice";
}
function changeimage2(){
document.galerie.src="images/essonne.gif";
document.getElementById("dynamiq").innerHTML ="Soisy sur Seine";
}
function changeimage3(){
document.galerie.src="images/salon.gif";
document.getElementById("dynamiq").innerHTML ="Salon de Provence";
}
<!-- --------------------remettre image/texte par défaut(onMouseout)-------------------->
function restore(){
document.galerie.src="images/defaut.gif";
document.getElementById("dynamiq").innerHTML ="Lieu";
}
</script>
<!--------------Et entre <body></body> il faut qu'il y ait les éléments qui vont être "ciblés" pour changer (nommés arbitrairement galerie (le cadre de l'image)et dynamiq (le texte)-------->
<div class="container">
<p class="titre" id="dynamiq"> <!----REMARQUEZ le id="dynamiq" permet d'utiliser la fonction javascript getElementById --->
Lieu
</p>
<img name="gal" src="images/defaut.gif">
</div>
<a href="#" onmouseover="changeimage1()" onmouseout="restore()"/>Alpes Maritimes</a>
<!---- Les boutons/liens qui vont activer l'interactivité ------------>
<!--------- onmouseover= indiques une action à faire lors du passage de la souris(quand souris dessus) donc l'appel de la fonction changeimage2() dans mon cas ------------->
<a href="#" onmouseover="changeimage2()" onmouseout="restore()"/>Essonne</a>
<!------- la fonction appelé par l'attribut de balise onmouseout(quand souris au dehors) s'active quand la souris n'est plus au dessus du lien
<a href="#" onmouseover="changeimage3()" onmouseout="restore()"/>Salon de Provence</a>
Il y a d'autres façons de faire un peu plus propre mais celle ci est assez simple et fonctionne.
Sinon voir google: changer image au passage de la souris ou DOM javascript+innerHTML
