Passer souris sur photo pour afficher une image dans un cadre

Marsh Posté le 27-08-2007 à 17:25:06

Bonjour,

Je suis débutant. Après avoir un peut surfer sur le net, j'ai découvert le rollover à distance.
J'aimerais disposer sur le côté droit de ma page web 5 photos (type identité) 2 sur la première rangée et 3 sur la seconde.
Entre les deux rangées je souhaiterais mettre un cadre dans lequel s'afficherait un petit texte (une image associée à chaque portrait).

Pourriez-vous m'aider à m'en sortir..

Merci d'avance

Bien cordialement,

Yogan

Reply

Marsh Posté le 27-08-2007 à 17:25:06

Reply

Marsh Posté le 27-08-2007 à 17:33:33

Ok, le plus propre est de le faire en css, mais je suis pas convaincu que ce soit le plus simple.

En javascript, il faut que tu donnes à ton cadre un id, je suppose ici que c'est un div:

Code :

<div id="texteperso"> </div>

Ensuite pour chaque photo tu déclares une fonction appellée lors du passage de la souris:

Code :

<img src="ma photo.jpg" alt="ma photo" onMouseOver="fonction('texte associé');"/>
<img src="autre photo.jpg" alt="autre photo" onMouseOver="fonction('autre texte associé');"/>

Tu déclares ensuite une fonction javascript qui met le texte qui va bien la ou il faut:

Code :

<script type="text/javascript">
fonction(texteamettre)
{
document.getElementById('texteperso').value=texteamettre;
}
</script>

Et voilou. J'ai codé ça de tête alors je garantit pas la syntaxe au micropoil près, mais sinon ça devrait marcher.

Edit: si jamais le truc à mettre dans le cadre est une image et pas un texte, il suffit d'éditer la fonction javascript, d genre:

Code :

<script type="text/javascript">
fonction(texteamettre)
{
document.getElementById('texteperso').innerHtml='<img src='+texteamettre+'.jpg'/>';
}
</script>

Message cité 1 fois
Message édité par durkheim le 27-08-2007 à 17:37:24

Reply

Marsh Posté le 27-08-2007 à 18:09:20

Merci bcp, j'essaierai demain.
Bonne soirée

durkheim a écrit :

Ok, le plus propre est de le faire en css, mais je suis pas convaincu que ce soit le plus simple.

En javascript, il faut que tu donnes à ton cadre un id, je suppose ici que c'est un div:

Code :

<div id="texteperso"> </div>

Ensuite pour chaque photo tu déclares une fonction appellée lors du passage de la souris:

Code :

<img src="ma photo.jpg" alt="ma photo" onMouseOver="fonction('texte associé');"/>
<img src="autre photo.jpg" alt="autre photo" onMouseOver="fonction('autre texte associé');"/>

Tu déclares ensuite une fonction javascript qui met le texte qui va bien la ou il faut:

Code :

<script type="text/javascript">
fonction(texteamettre)
{
document.getElementById('texteperso').value=texteamettre;
}
</script>

Et voilou. J'ai codé ça de tête alors je garantit pas la syntaxe au micropoil près, mais sinon ça devrait marcher.

Edit: si jamais le truc à mettre dans le cadre est une image et pas un texte, il suffit d'éditer la fonction javascript, d genre:

Code :

<script type="text/javascript">
fonction(texteamettre)
{
document.getElementById('texteperso').innerHtml='<img src='+texteamettre+'.jpg'/>';
}
</script>

Reply

Passer souris sur photo pour afficher une image dans un cadre

Sujets relatifs:

Leave a Replay