Changer d'image avec MouseOver ???

Dadvantages Messages postés 6 Date d'inscription   Statut Membre Dernière intervention   -  
 Profil bloqué -
Bonjour à tous,

Je suis très embêtée et je n'ai en plus plus de temps :D

J'ai une demande assez particulière de mon client pour une page d'accueil "dynamique" pour un questionnaire international.

En fait, il veut que lorsque l'on passe sur le "mot" de la langue, le texte d'introduction change (jusque là ca va), mais il veut AUSSI que chaque langue ait une image associée (cad une bannière avec le titre de l'enquête, bannière différente selon la langue)...

Et là je suis vraiment dans la panade parceque je ne sais pas faire dutout !!!!

Quelqu'un saurait m'aider ? Sachant que je ne maitrise pas dutout (DUTOUT ! j'ai récupéré un code d'un ancien collègue maintenant parti de la boite) et que je préfère éviter autant que faire ce peut, de faire du JS...il y a juste une petite fonction dans le corps du HTML pour appeler la fonction MouseOver mais c'est tout...



Voici mon code HTML : Alors oui je sais....y'a un truc genre "cursoroverflag" et il n'y a pas de drapeau, mais ca marche donc je m'en contente :D

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>

<head>
<title>Client 2012</title>
<meta HTTP-EQUIV="Content-type" CONTENT="text/html; charset=utf-8">
<meta HTTP-EQUIV="pragma" CONTENT="no-cache">
<meta HTTP-EQUIV="expires" CONTENT="0">
<link rel="stylesheet" href="Client_HOME.css">
<script language="JavaScript" type="text/javascript">
function cursorOverFlag(obj, textAlt, textSelect, textSelect3, textSelect2) {

obj.className = 'ImgFlagOver';

window.status = textAlt;

document.getElementById('TextSelect').innerHTML = textSelect;

document.getElementById('TextSelect3').innerHTML = textSelect3;

document.getElementById('TextSelect2').innerHTML = textSelect2;


}
</script>
</head>
<body><br/>
<table id="fond" align="center">
<tr valign="top">
<td width="5%"></td>
<td width="90%"><br/><br/><br/>
<div class="titre" id="TextSelect2">Satisfaction Survey<br/> - 2012</div><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<p class="titre3" id="TextSelect3">Welcome, blabla.</p><br/>
<div class="titre2" id="TextSelect">Select your language:</div>
<table width="750px" align="center">
<td id="name" alt="English" onMouseOver="cursorOverFlag(this, 'English', 'Select your language:', 'Welcome, blabla <br/> - 2012');" style="border:1px solid black"><a href="https://www.lien.fr">English</a></td>
<td id="name" alt="Deutsch" onMouseOver="cursorOverFlag(this, 'Deutsch', 'Wählen sie ihre sprache:', 'Willkommen, blabla.', 'Zufriedenheitsumfrage - 2012');" style="border:1px solid black"><a href="https://www.lien.fr">Deutsch</a></td>
</table>
<p><table width="100%"><tr>
<td align="right"><img src="Logoclient.jpg" alt="client2012"></td>
</tr></table></p><br/>
<td width="5%"></td>
</tr>
</table>
</body>
</html>



Donc en gros, dans tout ce blabla, je ne sais pas si c'est possible de rajouter un bidule genre "img src=clientA.jpg" ....
== Si on passe la souris sur le mot "English", hop je voudrais que la bannièreA.jpg s'affiche, si on passe la souris sur le mot "Deutsch", hop bannièreB.jpg

Voilà si quelqu'un comprend quelque chose à mon horrible charabia :p

Merci infiniment !



A voir également:

1 réponse

Profil bloqué
 
Salut,

J'ai pas tout à fait compris ^^' mais en css3, tu peux faire tontruc:hover tonélément {background:url('tonimage')}.


Après tu as différents sélecteurs suivant l'emplacement de tes éléments (parents, frères, etc).

Ca te fait une piste de réflexion ;)
0

Discussions similaires