Image dynamique - rol-over javascript
Résolu/Fermé
milouinbobo
Messages postés
20
Date d'inscription
mercredi 2 septembre 2009
Statut
Membre
Dernière intervention
7 mars 2010
-
30 sept. 2009 à 00:10
monkey_monk Messages postés 641 Date d'inscription mercredi 1 juillet 2009 Statut Membre Dernière intervention 10 août 2012 - 5 oct. 2009 à 20:32
monkey_monk Messages postés 641 Date d'inscription mercredi 1 juillet 2009 Statut Membre Dernière intervention 10 août 2012 - 5 oct. 2009 à 20:32
A voir également:
- Image dynamique - rol-over javascript
- Tableau croisé dynamique - Guide
- Image iso - Guide
- Telecharger javascript - Télécharger - Langages
- Liste déroulante dynamique excel - Guide
- Cpu over temperature error - Forum Matériel & Système
5 réponses
monkey_monk
Messages postés
641
Date d'inscription
mercredi 1 juillet 2009
Statut
Membre
Dernière intervention
10 août 2012
130
30 sept. 2009 à 00:21
30 sept. 2009 à 00:21
Bonsoir,
via le css et l'utilisation de classe tu pourras arriver à cette structure.
Ex.:
a.lien1 {
display:block;
width:[taille image]px;
height:[taille image]px;
background:url([lien image1-0]) 0 0 no-repeat;
}
a.lien1:hover {
background:url([lien image1-1]) 0 0 no-repeat;
}
<a class="lien1" href="[lien]" title="[desciption courte]"></a>
Est-ce que c'est bien ça que tu demandais ?
Bonne soirée ! :D
via le css et l'utilisation de classe tu pourras arriver à cette structure.
Ex.:
a.lien1 {
display:block;
width:[taille image]px;
height:[taille image]px;
background:url([lien image1-0]) 0 0 no-repeat;
}
a.lien1:hover {
background:url([lien image1-1]) 0 0 no-repeat;
}
<a class="lien1" href="[lien]" title="[desciption courte]"></a>
Est-ce que c'est bien ça que tu demandais ?
Bonne soirée ! :D
milouinbobo
Messages postés
20
Date d'inscription
mercredi 2 septembre 2009
Statut
Membre
Dernière intervention
7 mars 2010
4 oct. 2009 à 19:41
4 oct. 2009 à 19:41
Merci beaucoup pour votre réponse
J'ai trouvé sur Internet un site ou le system fonctionne, sauf je n'ai réussi à récuperer qu'un parti du language :
<td width="46" height="46"><a href="#" onMouseOut="Cacher('1')" onMouseOver="positionCalqueDW('1', -65);Afficher('1')"><img src="images/1.gif" width="46" height="46" border="0"></a></td>
<td width="46" height="46"><a href="#" onMouseOut="Cacher('2')" onMouseOver="positionCalqueDW('2', -65);Afficher('2')"><img src="images/2.gif" width="46" height="46" border="0"></a></td>
<td width="46" height="46"><a href="#" onMouseOut="Cacher('3')" onMouseOver="positionCalqueDW('3', -65);Afficher('3')"><img src="/images/3.gif" width="46" height="46" border="0"></a></td>
<td width="46" height="46"><a href="#" onMouseOut="Cacher('4')" onMouseOver="positionCalqueDW('4', -65);Afficher('4')"><img src="images/4.gif" width="46" height="46" border="0"></a></td>
J'ai compris votre structure, mais je n'arrive pas à afficher l'image dans mon tableau.
Amicalement
Corina
J'ai trouvé sur Internet un site ou le system fonctionne, sauf je n'ai réussi à récuperer qu'un parti du language :
<td width="46" height="46"><a href="#" onMouseOut="Cacher('1')" onMouseOver="positionCalqueDW('1', -65);Afficher('1')"><img src="images/1.gif" width="46" height="46" border="0"></a></td>
<td width="46" height="46"><a href="#" onMouseOut="Cacher('2')" onMouseOver="positionCalqueDW('2', -65);Afficher('2')"><img src="images/2.gif" width="46" height="46" border="0"></a></td>
<td width="46" height="46"><a href="#" onMouseOut="Cacher('3')" onMouseOver="positionCalqueDW('3', -65);Afficher('3')"><img src="/images/3.gif" width="46" height="46" border="0"></a></td>
<td width="46" height="46"><a href="#" onMouseOut="Cacher('4')" onMouseOver="positionCalqueDW('4', -65);Afficher('4')"><img src="images/4.gif" width="46" height="46" border="0"></a></td>
J'ai compris votre structure, mais je n'arrive pas à afficher l'image dans mon tableau.
Amicalement
Corina
monkey_monk
Messages postés
641
Date d'inscription
mercredi 1 juillet 2009
Statut
Membre
Dernière intervention
10 août 2012
130
5 oct. 2009 à 15:43
5 oct. 2009 à 15:43
Ne pourrais-tu pas me donner un lien avec qui a le style de roll-over que tu souhaites ? Comme ça je pourrais plus facilement te répondre... merci !
Bonjour
Merci beaucoup pour votre aide mais j'ai trouvé la solution :
<HEAD>
<!-- changement image -->
<SCRIPT language=JavaScript>
function RestoreDefaultImage()
{
document.getElementById('image_ctx').src='images/lavie.jpg';
}
</SCRIPT>
<!-- end changement image -->
</head>
<body>
<a href="lien.html" onmouseover="document.getElementById('image_ctx').src='images/image.jpg';" onmouseout="RestoreDefaultImage();">description texte</a>
</body>
Amicalement
Merci beaucoup pour votre aide mais j'ai trouvé la solution :
<HEAD>
<!-- changement image -->
<SCRIPT language=JavaScript>
function RestoreDefaultImage()
{
document.getElementById('image_ctx').src='images/lavie.jpg';
}
</SCRIPT>
<!-- end changement image -->
</head>
<body>
<a href="lien.html" onmouseover="document.getElementById('image_ctx').src='images/image.jpg';" onmouseout="RestoreDefaultImage();">description texte</a>
</body>
Amicalement
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
monkey_monk
Messages postés
641
Date d'inscription
mercredi 1 juillet 2009
Statut
Membre
Dernière intervention
10 août 2012
130
5 oct. 2009 à 20:32
5 oct. 2009 à 20:32
Oui, ça marchera effectivement... mais ce n'est pas "la bonne manière"... celà veut dire que tu es dépendant du javascript.
Tu pouvais faire pareil avec le css :
<style type="text/css">
a.lien:link, a.lien:visited { display:block; width:[taille voulue]; height:[taille voulue]; background:url(images/image.jpg) 0 0 no-repeat; }
a.lien:hover, a.lien:active { background:url(images/lavie.jpg) 0 0 no-repeat; }
</style>
</head>
<body>
<a class="lien" href="lien.html">description texte</a>
</body>
de cette manière, même ceux qui on le javascript désactivé auront l'effet de roll-over !
Bien sur, ce n'est juste qu'un choix... loin d'être obligatoire ! Mais quand même, plus de personne verront cet effet que par le javascript (pour info certaines entreprise désactivent le javascript sur les machines de leurs employé...).
Bonne continuation ! ;)
Tu pouvais faire pareil avec le css :
<style type="text/css">
a.lien:link, a.lien:visited { display:block; width:[taille voulue]; height:[taille voulue]; background:url(images/image.jpg) 0 0 no-repeat; }
a.lien:hover, a.lien:active { background:url(images/lavie.jpg) 0 0 no-repeat; }
</style>
</head>
<body>
<a class="lien" href="lien.html">description texte</a>
</body>
de cette manière, même ceux qui on le javascript désactivé auront l'effet de roll-over !
Bien sur, ce n'est juste qu'un choix... loin d'être obligatoire ! Mais quand même, plus de personne verront cet effet que par le javascript (pour info certaines entreprise désactivent le javascript sur les machines de leurs employé...).
Bonne continuation ! ;)