Affichage image
Résolu
etienne
Messages postés
63
Date d'inscription
Statut
Membre
Dernière intervention
-
etienne Messages postés 63 Date d'inscription Statut Membre Dernière intervention -
etienne Messages postés 63 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
j'ai créer un site web(html/css) et je voudrais que quand je passe sur un bouton de mon menu, une petite image ( logo) s'affiche a un endroit précis de l'écran , et que quand je ne suis plus sur ce bouton l'image disparait.
comment faire?
merci
j'ai créer un site web(html/css) et je voudrais que quand je passe sur un bouton de mon menu, une petite image ( logo) s'affiche a un endroit précis de l'écran , et que quand je ne suis plus sur ce bouton l'image disparait.
comment faire?
merci
A voir également:
- Affichage image
- Image iso - Guide
- Affichage double ecran - Guide
- Windows 11 affichage classique - Guide
- Acronis true image - Télécharger - Sauvegarde
- Reduire taille image - Guide
4 réponses
Le plus simple sur l'image du menu (ou le bloc de menu) rajouter :
onmouseover="javascript:affiche_logo()" onmouseout="cache_logo()"
dans la page quelque part
<div id="logo" style="position:absolute;top:0px;left:0px;z-index:10000;"><img src="monimage.jpg"></div>
Puis le script
<script language="javascript">
function affiche_logo() {
document.getElementById("logo").style.visibility="visible";
}
function cache_logo() {
document.getElementById("logo").style.visibility="hidden";
}
</script>
et c'est tout
onmouseover="javascript:affiche_logo()" onmouseout="cache_logo()"
dans la page quelque part
<div id="logo" style="position:absolute;top:0px;left:0px;z-index:10000;"><img src="monimage.jpg"></div>
Puis le script
<script language="javascript">
function affiche_logo() {
document.getElementById("logo").style.visibility="visible";
}
function cache_logo() {
document.getElementById("logo").style.visibility="hidden";
}
</script>
et c'est tout
par contre l'image est appélée dans le css et il y a un hover sur le bouton dans le css pour "l'animation" du bouton ca change rien ?
comme ca :
voici mon menu dans le HTML:
</div>
<div id="menu">
<ul class="menu1">
<li class="menu11"><a href="https://www.free.fr/freebox/index.html"><p>page1</p></a></li>
<li class="menu12"><a href="https://www.free.fr/freebox/index.html">page2</a></li>
<li class="menu13"><a href="https://www.free.fr/freebox/index.html">page3</a></li>
</ul>
</div>
Mon CSS (pour le 2eme bouton par exemple):
.menu12 a{
display: table-cell;
text-align:right;
color: #ff7f00;
background-image:url(bouton3.png);
background-repeat:no-repeat;
background-position:left;
margin-right:0px;
font-size:14px;
font-weight:bold;
padding:5px 17px 5px 40px;
text-align: center;
width: 100px;
font-family:Arial, Helvetica, sans-serif;
text-decoration : none;
position:absolute;
top:298px;
left:380px;
z-index:2;
}
.menu12 a:hover{
display: bloc;
color: #ffffff;
background-image:url(bouton4.png);
background-repeat:no-repeat;
background-position:left;
margin-right:0px;
font-size:14px;
font-weight:bold;
padding:5px 17px 5px 40px;
text-align: center;
width: 100px;
font-family:Arial, Helvetica, sans-serif;
text-decoration : none;
position:absolute;
z-index:2;
}
voici mon menu dans le HTML:
</div>
<div id="menu">
<ul class="menu1">
<li class="menu11"><a href="https://www.free.fr/freebox/index.html"><p>page1</p></a></li>
<li class="menu12"><a href="https://www.free.fr/freebox/index.html">page2</a></li>
<li class="menu13"><a href="https://www.free.fr/freebox/index.html">page3</a></li>
</ul>
</div>
Mon CSS (pour le 2eme bouton par exemple):
.menu12 a{
display: table-cell;
text-align:right;
color: #ff7f00;
background-image:url(bouton3.png);
background-repeat:no-repeat;
background-position:left;
margin-right:0px;
font-size:14px;
font-weight:bold;
padding:5px 17px 5px 40px;
text-align: center;
width: 100px;
font-family:Arial, Helvetica, sans-serif;
text-decoration : none;
position:absolute;
top:298px;
left:380px;
z-index:2;
}
.menu12 a:hover{
display: bloc;
color: #ffffff;
background-image:url(bouton4.png);
background-repeat:no-repeat;
background-position:left;
margin-right:0px;
font-size:14px;
font-weight:bold;
padding:5px 17px 5px 40px;
text-align: center;
width: 100px;
font-family:Arial, Helvetica, sans-serif;
text-decoration : none;
position:absolute;
z-index:2;
}