[Webinar] Streamline your web hosting managementRegister Today

x
?
Solved

javascript image fade on click

Posted on 2010-04-09
3
Medium Priority
?
306 Views
Last Modified: 2012-05-09
Hi,

I want to create an image fade when a link is pressed. At the moment i have set it up so that when you click a link the image is swapped to the new one, but how can i make the new image fade in with javascript?

code i have so far is just:
function swap(eid, image) {
  var element = document.getElementById(eid);
  element.src=image
}

<a onclick="swap('slideshow', 'serv_catering2.jpg');">1</a>

Cheers
0
Comment
Question by:coolispaul
3 Comments
 
LVL 15

Accepted Solution

by:
StealthyDev earned 2000 total points
ID: 30194222
0
 
LVL 7

Expert Comment

by:halfbloodprince
ID: 30201243
THIS WORKS:
<script>
function fadeMe()
{
    document.getElementById("imgSample").filters[0].opacity= 50//increase or decrease this value for fading.;
}
</script>
<body>
    <form id="form1" runat="server">
    <div>
       <img alt="" id="imgSample" src="logo.jpg" width="116" height="123"
        style="filter:alpha(opacity=100)"/>
        <input type="button" onclick="fadeMe();" />
    </div>

    </form>
</body>
0
 
LVL 4

Expert Comment

by:dwkd
ID: 30226466
isn't that filter only for ie?

jquery is the way to go
0

Featured Post

Receive 1:1 tech help

Solve your biggest tech problems alongside global tech experts with 1:1 help.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
Suggested Courses

591 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question