want to fade image at run time in javascript

Question

0.00/5 (No votes)

See more:

Hi,
I am using an image in html and i want change its opacity at run time using javascript.I want fade that image.How i'll get that.
I used some code but it didn't work
<html>
<head>
<script type="text/javascript">
function opac()
{
document.getElementById("imgs").style.filter=alpha(opacity=50);
}
</script>
</head>
<body>
<img src=".\images\hex1.jpg" style="WIDTH: 244px; HEIGHT: 168px;cursor:hand;" height="168" width="244" title="Click here to view Enlarge Image" id="imgs" onclick="autoLogin1('imagealbum.html')" onmouseover="opac();">
</body>
</html>

Posted 19-May-11 23:38pm

singh7pankaj

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodingLover · Answer 1 · 2011-05-20T01:33:00

Solution 1

Rather trying to do that, why don't you use JS to swap CSS classes? Define classes as you want and swap them using JS, it's easy. Style injection through JS sometime cause lots of issues.

Give a try and let me know if you stuck.

Posted 20-May-11 1:33am

CodingLover

Comments

singh7pankaj 20-May-11 7:38am

It means that defining two css class and call it from js event?

CodingLover 20-May-11 8:05am

Define two classes to define two styling. Then switch them through the JS event, mouseover may be. Warp the image with a div, then it's easy to control.

singh7pankaj 20-May-11 8:06am

ok let me try that

RakeshMeena · Answer 2 · 2011-06-08T00:48:00

Solution 2

Did you try JQuery:

$(document).ready( function() {
  $("#img1").mouseover( function() {
    $(this).fadeOut("slow");
  });
});

I've put ID to your image (img1).

Posted 8-Jun-11 0:48am

RakeshMeena