/    Sign up×
Community /Pin to ProfileBookmark

Opcity

Copy linkTweet thisAlerts:
Oct 29.2004

Can anyone please help me do this with Opcity and javaScript please.
I need to have one html file that displays the first picture when first opened if someone clicks on that picture it disappears and another takes its place. Click again and the second picture fades out and the first re-appears agan

Thanks

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@ExuroOct 30.2004 — Here's a script I came up with... Just stick it in some [FONT=courier new]<script>[/FONT] tags in your head section and it should work fine... Make sure and set [FONT=courier new]fadeImageID[/FONT] to the right value though...
[code=php]// Set the images
var images = new Array(2);
images[0] = new Image();
images[0].src = "1.jpg";
images[0].alt = "First Image";
images[1] = new Image();
images[1].src = "2.jpg";
images[1].alt = "Second Image";
// The ID of the image you want to fade
var fadeImageID = "fadeImage";
// The increment determines the quality of the fading
// Values must be between 0 and 1 (lower is better)
var inc = .05;
// The delay determines the speed of the fading
var delay = 50;

function toggleImage() {
var imgIndex;
// Figure out which image to switch to
if (this.src == images[1].src) {
imgIndex = 0;
}
else {
imgIndex = 1;
}
// Start the fading process
setTimeout("fadeOut(1,"+imgIndex+");",delay);
}

function fadeOut(opacity,imgIndex) {
if (opacity > 0) {
// Fade the image using CSS3 opacity
document.getElementById(fadeImageID).style.opacity = opacity;
// IE doesn't support CSS3 opacity, so we have to use the IE-only filters too
document.getElementById(fadeImageID).style.filter = "alpha(opacity="+opacity*100+")";
setTimeout("fadeOut("+(opacity-inc)+","+imgIndex+");",delay);
}
else {
// Swap the images
document.getElementById(fadeImageID).src = images[imgIndex].src;
document.getElementById(fadeImageID).alt = images[imgIndex].alt;
// Start fading the new one in
setTimeout("fadeIn(0);",delay);
}
}

function fadeIn(opacity) {
if (opacity < 1) {
// Fade the image using CSS3 opacity
document.getElementById(fadeImageID).style.opacity = opacity;
// IE doesn't support CSS3 opacity, so we have to use the IE-only filters too
document.getElementById(fadeImageID).style.filter = "alpha(opacity="+opacity*100+")";
setTimeout("fadeIn("+(opacity+inc)+");",delay);
}
else {
// Fade the image using CSS3 opacity
// Moz makes the image flicker if the opacity is set to 1, so we use .9999999
document.getElementById(fadeImageID).style.opacity = .9999999;
// IE doesn't support CSS3 opacity, so we have to use the IE-only filters too
document.getElementById(fadeImageID).style.filter = "alpha(opacity=100)";
}
}

// Set the document's onload function
onload = function () {
// Set the image's onclick function
document.getElementById(fadeImageID).onclick = toggleImage;
}[/code]
Copy linkTweet thisAlerts:
@mikemayauthorOct 30.2004 — Ok thanks alot Exuro that did the trick but the only thing is i would like the fade only to happen when the secound image is clicked this is what i have

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>Untitled Document</title>

<script type="text/javascript">

// Set the images

var images = new Array(2);

images[0] = new Image();

images[0].src = "xlionpair.jpg";

images[0].alt = "First Image";

images[1] = new Image();

images[1].src = "xlionsideways.jpg";

images[1].alt = "Second Image";

// The ID of the image you want to fade

var fadeImageID = "img2";

// The increment determines the quality of the fading

// Values must be between 0 and 1 (lower is better)

var inc = .05;

// The delay determines the speed of the fading

var delay = 50;

function toggleImage() {

var imgIndex;

// Figure out which image to switch to

if (this.src == images[1].src) {

imgIndex = 0;

}

else {

imgIndex = 1;

}

// Start the fading process

setTimeout("fadeOut(1,"+imgIndex+");",delay);

}

function fadeOut(opacity,imgIndex) {

if (opacity > 0) {

// Fade the image using CSS3 opacity

document.getElementById(fadeImageID).style.opacity = opacity;

// IE doesn't support CSS3 opacity, so we have to use the IE-only filters too

document.getElementById(fadeImageID).style.filter = "alpha(opacity="+opacity*100+")";

setTimeout("fadeOut("+(opacity-inc)+","+imgIndex+");",delay);

}

else {

// Swap the images

document.getElementById(fadeImageID).src = images[imgIndex].src;

document.getElementById(fadeImageID).alt = images[imgIndex].alt;

// Start fading the new one in

setTimeout("fadeIn(0);",delay);

}

}

function fadeIn(opacity) {

if (opacity < 1) {

// Fade the image using CSS3 opacity

document.getElementById(fadeImageID).style.opacity = opacity;

// IE doesn't support CSS3 opacity, so we have to use the IE-only filters too

document.getElementById(fadeImageID).style.filter = "alpha(opacity="+opacity*100+")";

setTimeout("fadeIn("+(opacity+inc)+");",delay);

}

else {

// Fade the image using CSS3 opacity

// Moz makes the image flicker if the opacity is set to 1, so we use .9999999

document.getElementById(fadeImageID).style.opacity = .9999999;

// IE doesn't support CSS3 opacity, so we have to use the IE-only filters too

document.getElementById(fadeImageID).style.filter = "alpha(opacity=100)";

}

}

// Set the document's onload function

onload = function () {

// Set the image's onclick function

document.getElementById(fadeImageID).onclick = toggleImage;

}




</script>

</head>

<body>

<div style="position:absolute"><img src="xlionpair.jpg" border="0"/></div>

<div style="position:absolute"><img src="xlionsideways.jpg" border="0" id="img2" /></div>

</body>

</html>
Copy linkTweet thisAlerts:
@mikemayauthorOct 30.2004 — Do i ahve to use a onclick function or something?
Copy linkTweet thisAlerts:
@ExuroOct 31.2004 — I tweaked the script a bit and attached the solution. I hope it works how you wanted it now!

[upl-file uuid=1f8b4453-ccf4-441f-aefa-dbca556a888d size=3kB]tweak.txt[/upl-file]
Copy linkTweet thisAlerts:
@mikemayauthorOct 31.2004 — Right on thanks alot for your time and help cool
×

Success!

Help @mikemay spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.6,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...