If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Need help changing HTML elements with JavaScript!

So basically, what I want to do is use JavaScript so when a user hovers over an image inside a div element, the image is replaced by a p element, part of which is also inside an a element. I have tried looking through the tutorials on w3schools.com and tried the "Try it yourself" examples, yet I can't make this work. I have tried using the innerHTML thing, but I can't get it to work properly with HTML tags inside it. Does anybody know how to do this? Can provide more details or explanation if needed.

A small sample then. This isn't the exact image and text that I want because for privacy reasons I don't want to display the actual content, but same layout and orientation and, most importantly, same tags in the same places.

when the mouse hovers over it, and change back again when the mouse leaves the object. Is this possible? The CSS can be shoved into the head if it makes things easier to code, but for demonstrative purposes, if you want to check out what it would look like on an actual page, the basic CSS is there.

That works great... for when the mouse goes over the div, that is. It doesn't change back again, though, after the mouse has moved off. Is there any way it can be changed or adjusted so that it only changed while the mouse is over it, but returns to its previous state as soon as the mouse leaves?

(PS, sorry if this double posts. After looking back here after a few hours, I don't see what I wrote before. I'm not sure if that's just because the admins haven't gotten round to checking my post yet or if I didn't send it properly, so I'm replying again just in case.)

That works perfectly for when the mouse goes over it! But it stays after the mouse leaves the object. Is there any way you could make it to return to its original state after the mouse leaves it?

Sure. I'm sure there are many different ways to achieve that, but what I would do is already have both pieces of code on the page already (so there is no reflow of the page), but hide what shouldn't be shown until you hover over the main div.

So, essentially, add the main div with 2 divs each, one with the original content and one with the modified (hover) content.
Then, we can show *only* the hover content when you hover over the main div, and show *only* the original content when you hover off the main div.