apply fade effect on innerHTML

[pt36]

Hi

I have a small script

function photo(a){
var photo = a ;
document.getElementById(photoID).innerHTML = photo;
}

and on the body
.... onclick="photo('image.jpg')"

I liked to have a fadeIn when the image.jpg appear.
I try with different manners without result.
Some suggestions please ?

Regards

 

[pt36]

......
the code is correct, I forgot to write commas
document.getElementById("photoID").innerHTML = photo;

obviously on the body this is also

<div id="photoID"></div>

 

[RobG]

Hi

I have a small script

function photo(a){
var photo = a ;
document.getElementById(photoID).innerHTML = photo;

}

and on the body
... onclick="photo('image.jpg')"

I liked to have a fadeIn when the image.jpg appear.
I try with different manners without result.
Some suggestions please ?

Your code suggests that the text "image.jpg" will fade in, not the
image itself. To do that, create a graded colour scale from #ffffff
to whatever the text colour should eventually be over the duration of
the fade in steps of say 20ms. On each step, set that as the value
for the div's style.color property. Ideally, you have now set it to
the original value of the div's style.color property and so can end
with '' (empty string).

How you do that will range in complexity depending on your
requirements - perhaps you want to read the color value for the div,
maybe you want to set it in the call or perhaps you just want to
assume black.

Over to you.

 

[pt36]

Your code suggests that the text "image.jpg" will fade in, not the
image itself.  To do that, create a graded colour scale from #ffffff
to whatever the text colour should eventually be over the duration of
the fade in steps of say 20ms.  On each step, set that as the value
for the div's style.color property.  Ideally, you have now set it to
the original value of the div's style.color property and so can end
with '' (empty string).

How you do that will range in complexity depending on your
requirements - perhaps you want to read the color value for the div,
maybe you want to set it in the call or perhaps you just want to
assume black.

Over to you.

Hi Rob
thanks for your answer and your time
Sorry.
You are right, I write not correct
my code is
onclick="photo('<img src=image.jpg>')"

 

[RobG]

Hi Rob
thanks for your answer and your time
Sorry.
You are right, I write not correct
my code is
onclick="photo('<img src=image.jpg>')"

Rather than setting the innerHTML, use DOM methods instead. It's poor
form to have a local variable that has the same name as the function
itself and variable names should be meaningful and reflect what they
do, so:

function showPhoto(imgSrc)
{
var el = document.getElementById('photoID');
var img = document.createElement('img');
img.src = imgSrc;

// Clear out child nodes
while (el.firstChild) {
el.removeChild(el.firstChild);
}

// Insert image
el.appendChild(img);

fade(image, true);

}

function fade(el, direction) {

/* Set the image's opacity to zero or 1 based on
** direction (true == in, otherwise out) then fade
** it using setTimeout to keep calling fade until
** it's fully visible (or not). Look in the archives
** for an opacity setting function - good ones are
** quite a bit of code.
*/

}