<style> #image[active="0"]{opacity:0.5; transition:1s opacity;} #image[active="1"]{opacity:1; transition:1s opacity;} </style>
<script src="jquery.js"></script> <script> $(document).ready(function(){ $('#image').on('mouseover', function(){ $(this).attr('active','1'); }); $('#image').on('mouseout', function(){ $(this).attr('active','0'); }); }); </script>
<img src="image.jpg" active="0" alt="" id="image"/>
<style> #image{opacity:0.5; transition:1s opacity;} #image:hover{opacity:1; transition:1s opacity;} </style>
<img src="image.jpg" alt="" id="image"/>
function fada_map(el,min,max){ this.el2=document.getElementById(el); this.inter=null; this.bb=0.5; this.min=min; this.max=max; var that=this; this.nbsta=function(){ clearInterval(that.inter); that.inter=setInterval(that.nbfadec,30); } this.nbsto=function(){ clearInterval(that.inter); that.inter=setInterval(that.nbfaden,30); } this.nbfadec=function() { that.bb+=0.1; that.el2.style.opacity = that.bb.toFixed(1); if(that.bb >= that.max){ clearInterval(that.inter); return false } } this.nbfaden=function() { that.el2.style.opacity = that.bb.toFixed(1); if(that.bb <= that.min){ clearInterval(that.inter); return false } that.bb-=0.1; } this.el2.onmouseover=this.nbsta; this.el2.onmouseout=this.nbsto; } function init_Opacity(){ new fada_map("image1",0.5,1); } addEventListener('load',init_Opacity,false);
.image1{opacity:0.5; transition:1s opacity;} .image2{opacity:1; transition:1s opacity;}
<script> function init_Opacity(){ var el=document.getElementById('image1'); el.onmouseover=function(){el.className='image2'}; el.onmouseout=function(){el.className='image1'}; } addEventListener('load',init_Opacity,false); <script>
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre questionfunction modifyOpacity(opacity){ if (arguments.length == 0){ var opacity=1 } if (opacity > 0.1) { document.getElementById("image1").style.opacity = opacity; opacity = opacity - 0.1; setTimeout('modifyOpacity('+opacity+')',100); } }