Affichage image
Résolu/Fermé
etienne
Messages postés
63
Date d'inscription
lundi 22 mai 2000
Statut
Membre
Dernière intervention
29 juin 2014
-
24 avril 2009 à 10:46
etienne Messages postés 63 Date d'inscription lundi 22 mai 2000 Statut Membre Dernière intervention 29 juin 2014 - 24 avril 2009 à 12:18
etienne Messages postés 63 Date d'inscription lundi 22 mai 2000 Statut Membre Dernière intervention 29 juin 2014 - 24 avril 2009 à 12:18
A voir également:
- Affichage image
- Image iso - Guide
- Acronis true image - Télécharger - Sauvegarde
- Affichage double ecran - Guide
- Faststone image viewer - Télécharger - Visionnage & Diaporama
- Image iso windows 10 - Guide
4 réponses
irem
Messages postés
164
Date d'inscription
mardi 22 mai 2007
Statut
Membre
Dernière intervention
9 octobre 2012
99
24 avril 2009 à 11:58
24 avril 2009 à 11:58
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
etienne
Messages postés
63
Date d'inscription
lundi 22 mai 2000
Statut
Membre
Dernière intervention
29 juin 2014
1
24 avril 2009 à 12:03
24 avril 2009 à 12:03
il faut faire du javascript ?
etienne
Messages postés
63
Date d'inscription
lundi 22 mai 2000
Statut
Membre
Dernière intervention
29 juin 2014
1
24 avril 2009 à 12:15
24 avril 2009 à 12:15
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 ?
etienne
Messages postés
63
Date d'inscription
lundi 22 mai 2000
Statut
Membre
Dernière intervention
29 juin 2014
1
24 avril 2009 à 12:18
24 avril 2009 à 12:18
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;
}