apply fade effect on innerHTML

[pt36]

Hi

I have a small script

function photo(a){
var photo = a ;
document.getEle mentById(photoI D).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]

Re: apply fade effect on innerHTML

......
the code is correct, I forgot to write commas
document.getEle mentById("photo ID").innerHTM L = photo;

obviously on the body this is also

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

[RobG]

Re: apply fade effect on innerHTML

On Aug 5, 9:13 am, pt36 <key.albe...@gm ail.comwrote:

Hi
>
I have a small script
>
function photo(a){
var photo = a ;
document.getEle mentById(photoI D).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.


--
Rob

[pt36]

Re: apply fade effect on innerHTML

On 5 Ago, 03:42, RobG <rg...@iinet.ne t.auwrote:

On Aug 5, 9:13 am, pt36 <key.albe...@gm ail.comwrote:
>
>
>
>
>

Hi

>

I have a small script

>

function photo(a){
var photo = a ;
document.getEle mentById(photoI D).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.
>
--
Rob- Nascondi testo citato
>
- Mostra testo citato -

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]

Re: apply fade effect on innerHTML

On Aug 5, 12:46 pm, pt36 <key.albe...@gm ail.comwrote:
[...]

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(imgSr c)
{
var el = document.getEle mentById('photo ID');
var img = document.create Element('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.
*/

}


--
Rob