Jump to content

Changing Images within a Separate Div


BabaFree
 Share

Recommended Posts

Hey Everyone.Ok, I've Googled, searched on this forum and others, and even tried to make stuff up (which generally doesn't work, but you never know), and I'm batting 0.000 so far. Chalk it up to Javascript ignorance. What I want to do is have the contents of a specific <div> change when I hover the mouse over an image that is in a separate div:I've gotten the closest with the following:

<img src="images/testbut1.png" onmouseover="document.getElementById('changing').innerHTML = 'hello'">

which works perfectly and I see "hello" show up in the target div! I get happy and start thinking that the last two hours have finally paid off. Then I put the following:

<img src="images/testbut2.png" onmouseover="document.getElementById('changing').innerHTML = '<img src="images/ad_sundaysermon.jpg">'">

Heart plummets and elation gone. Nothing happens and these characters are displayed after my testbut2.png:'">Can anyone tell me what I'm doing wrong? Or simply present a better way of doing what I'm trying? Any help would be greatly appreciated.Thanks,Brandon

Link to comment
Share on other sites

Check the quotes.To avoid the problems like this, you better use separate functions instead of inline javascript, like:

<script>function chenge() {document.getElementById('changing').innerHTML = '<img src="images/ad_sundaysermon.jpg">';}</script><img src="images/testbut2.png" onmouseover="change();">

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...