timothy1982
Technical User
- Jul 22, 2008
- 1
Hello,
I mainly use Php, but I am trying to learn some Javascript. I am tinkering with this simple mouse over script that takes a small picture within a div, and enlarges it (Actually, swaps it, 2 separate pics) on mouse over. I have installed the script below once, and it worked great. The problem is, I don't know how to duplicate it on the same page. I tried just duplicating the code, changing just the unique images, but couldn't get that to work...
It keeps telling me "document.getElementById is null". I assume thats because the second script is overwriting the first.
Can anyone lend me a hand....?
I put this in the heading:
Code:
<script language="javascript" type="text/javascript">
function into_image () {
document.getElementById ( "img1" ).outerHTML = '<img id="img2" onmouseout="outof_image()" src="solar_hands_l.png" >' ;
}
function outof_image () {
document.getElementById ( "img2" ).outerHTML = '<img id="img1" onmouseover="into_image()" src="solar_hands_s.png" >' ;
}
</script>
Then I put this where I want the smaller image to go:
Code:
<p>
<img id="img1" onmouseover="into_image()" src="solar_hands_s.png" >
</p>
I mainly use Php, but I am trying to learn some Javascript. I am tinkering with this simple mouse over script that takes a small picture within a div, and enlarges it (Actually, swaps it, 2 separate pics) on mouse over. I have installed the script below once, and it worked great. The problem is, I don't know how to duplicate it on the same page. I tried just duplicating the code, changing just the unique images, but couldn't get that to work...
It keeps telling me "document.getElementById is null". I assume thats because the second script is overwriting the first.
Can anyone lend me a hand....?
I put this in the heading:
Code:
<script language="javascript" type="text/javascript">
function into_image () {
document.getElementById ( "img1" ).outerHTML = '<img id="img2" onmouseout="outof_image()" src="solar_hands_l.png" >' ;
}
function outof_image () {
document.getElementById ( "img2" ).outerHTML = '<img id="img1" onmouseover="into_image()" src="solar_hands_s.png" >' ;
}
</script>
Then I put this where I want the smaller image to go:
Code:
<p>
<img id="img1" onmouseover="into_image()" src="solar_hands_s.png" >
</p>