presentation menu

Marsh Posté le 23-06-2010 à 12:32:26

Bonjour

Pourriez vous m'aidez à réalisé cette effet ou quelque chose équivalent (tutoriel)

c'est sur la page d'accueil du site de la fifa
Merci de votre aide

Reply

Marsh Posté le 23-06-2010 à 12:32:26

Reply

Marsh Posté le 23-06-2010 à 14:13:45

Tu veux pas regarder le code source?
Ceci dit c'est un peu complexe pour un débutant.
Si tu n'es pas à l'aise avec HTML/CSS et javascript, je ne te le conseille pas.

Enfin si tu peux décrire précisément l'effet que tu veux, parce qu'il y a plusieurs choses sur leur page.

---------------
HFR Links Preview | HFR Giphy

Reply

Marsh Posté le 23-06-2010 à 14:58:59

bonjour

par exemple je vaudrais afficher sur la colonne de droite le nom des recettes de cuisine et si on pose le curseur sur la celle ci l'image de la recette et le nom s'affiche sur le rectangle comme sur l'image avec l'équipe argentin.
merci de votre aide

Reply

Marsh Posté le 24-06-2010 à 10:30:17

Je suis un peu débutant mais je ferais cela en javascript.

Code :

<script type="text/javascript">
function recette_over(nom) {
document.getelementbyid("desc_recette" ).src="image_recette.jpg";
document.getelementbyid("nom_recette" ).innerHTML= nom;
}
</script>
<div id="nom_recette">Recette</div> //Le titre de la recette, initialisé ici à une valeur de base
<img src="imagedebase.png" id="desc_recette" alt=""> //ton image de base à gauche, celle qui existe sans que tu pointes qqchose avec ta souris
<img src="image.png" id="recette1" alt="mon image" onmouseover=''recette_over(pates au khäkhä)"> // ton image de choix à droite

Bon c'est surement pas très propre, mais ça a le mérite d'être simple à comprendre.
J'ai pas testé, mais le principe est là...

EDIT: il y a surement moyen de faire plus propre en CSS

Message cité 1 fois
Message édité par garath_ le 24-06-2010 à 10:47:30

---------------
HFR Links Preview | HFR Giphy

Reply

Marsh Posté le 24-06-2010 à 11:36:50

garath_ a écrit :

Je suis un peu débutant mais je ferais cela en javascript.

Code :

<script type="text/javascript">
function recette_over(nom) {
document.getelementbyid("desc_recette" ).src="image_recette.jpg";
document.getelementbyid("nom_recette" ).innerHTML= nom;
}
</script>
<div id="nom_recette">Recette</div> //Le titre de la recette, initialisé ici à une valeur de base
<img src="imagedebase.png" id="desc_recette" alt=""> //ton image de base à gauche, celle qui existe sans que tu pointes qqchose avec ta souris
<img src="image.png" id="recette1" alt="mon image" onmouseover=''recette_over(pates au khäkhä)"> // ton image de choix à droite

Bon c'est surement pas très propre, mais ça a le mérite d'être simple à comprendre.
J'ai pas testé, mais le principe est là...

EDIT: il y a surement moyen de faire plus propre en CSS

Bonjour

Merci pour le code très facile à comprendre mais il ne marche pas j'arrive pas à avoir l'effet. Merci de tester a ton niveau

Reply

Marsh Posté le 24-06-2010 à 11:50:42

Attention au majuscule : getElementById et non getelementbyid

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.

Reply

Marsh Posté le 24-06-2010 à 13:00:36

oui navré, j'ai pas attention...

---------------
HFR Links Preview | HFR Giphy

Reply

presentation menu

Sujets relatifs:

Leave a Replay