How to make a pic fading in html?

Asked By 20 points N/A Posted on -
qa-featured

Hi Experts,

To make my new website more attractive to visitors, I would like to know how to make a pic fading in html. Can anyone teach me how to do it? And will it be possible having 2 lines of picture fading at the same time? Thanks.

  • Answer Accepted: Yes
  • Question Category:
SHARE
Best Answer by Toni Linscomb
Go To Solution
Answered By 5 points N/A #168630

How to make a pic fading in html?

qa-featured

 

Try below code.
 
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
if (document.all||document.getElementById){
document.write('<style id="tmpStyle" type="text/css">#pic {-moz-opacity:0.00;filter:alpha(opacity=0);opacity:0;-khtml-opacity:0;}</style>')
var objG, degree=fadeAssist=0;
if (document.all&&typeof document.documentElement!=='undefined')
document.write('<!–[if GTE IE 5]><script type="text/javascript">fadeAssist=function (obj, degree){try {obj.filters.alpha.opacity=degree}catch(e){obj.style.filter="alpha(opacity="+degree+")"}}<'+'/'+'script><![endif]–>')
}
 
function fadepic(obj){
objG=obj
if (!document.getElementById&&!document.all)
return;
var tS=document.all? document.all['tmpStyle'] : document.getElementById('tmpStyle')
if (degree<100){
degree+=5
if (objG.filters&&objG.filters[0]&&fadeAssist)
fadeAssist(objG, degree)
else if (typeof objG.style.MozOpacity=='string')
objG.style.MozOpacity=degree/101
else if (typeof objG.style.KhtmlOpacity=='string')
objG.style.KhtmlOpacity=degree/100
else if (typeof objG.style.opacity=='string'&&!objG.filters)
objG.style.opacity=degree/101
else
tS.disabled=true
setTimeout("fadepic(objG)", 50)
}
else
tS.disabled=true
}
 
</script>
</head>
<body>
<img id="pic" onload="fadepic(this);" src="domfade.jpg">
</body>
</html>
 
About Cristina McCormick
Questions
1
Answers
57
Best Answers
13
  • Posted on -
  • Question Category:
Best Answer
Best Answer
Answered By 5 points N/A #168631

How to make a pic fading in html?

qa-featured

Jquery is the latest technology to achieve this. Below code will preview a faded image on the web page and on the mouse over event faded effect will be removed. This is the simplest Fade image example I can provide you. Try it and learn the basics on that. Thereafter search for Jquery fading effects there you’ll see much more advance solutions on image fading. Below is a simple Fading image sample code

 

<img src="myPhoto.jpg" style="opacity:0.5; filter:alpha(opacity=50)"

onmouseover="this.style.opacity=1; this.filters.alpha.opacity=90"

onmouseout="this.style.opacity=0.5; this.filters.alpha.opacity=50" />

About Toni Linscomb
Questions
0
Answers
197
Best Answers
86
  • Posted on -
  • Question Category:

How to get free download ict assistant questions?

Previous

A free download for simulation mouse pc activity.

Next

Related Questions