Passer souris sur photo pour afficher une image dans un cadre

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Passer souris sur photo pour afficher une image dans un cadre

Yogan94

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

Publicité

durkheim

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

Yogan94

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>

FORUM HardWare.fr

Programmation

Divers

Passer souris sur photo pour afficher une image dans un cadre

Sujets relatifs
afficher/caché du texte...[resolved]	Création d'une image pour valider un formulaire
Labelisation image binaire (apres seuillage)	Afficher sur une page web directement le resultat d'une autre page web
Taille d'image avec fo:external-graphic	changer le curseur de la souris
probleme d'image sur un titre (html+css)	executer une page php sans rien afficher
Animation photo sur site internet	Recherche script de modification et sauvegarde d'image
Plus de sujets relatifs à : Passer souris sur photo pour afficher une image dans un cadre

Page générée en 0.046 secondes