Link to home
Create AccountLog in
Avatar of kjohnson530
kjohnson530

asked on

change image inside Iframe on mouseover

I have a simple web page in which I have an Iframe with an image in it and five thumbnails outside of it.  Using Dreamweaver I have been able to chnage the image inside of the iframe on click,.  My problem now is that I would like to  change the image on mouseover as well.  Anyone have any ideas that would help out?
<td width="47%" rowspan="6"><div align="center">
          <br><p><IFRAME HEIGHT="360"  WIDTH="520" marginheight="0px" src="/images/home/manx.jpg" srcname="MPic"  frameborder= "1" scrolling = no NAME="Pics" > 
    </IFRAME>
        <br><br><hr width="520">

        
  </a>


		  <a href="/images/home/Manx.jpg" Target="Pics"><img src="/images/home/tbManx.jpg" name="Img1" onmouseover="document.Pics.src='/images/home/pool.jpg" width="104" height="72" border="0"></a>
		  <a href="/images/home/Pool.jpg" Target="Pics"><img src="/images/home/tbPool.jpg" name="img2" width="104" height="72" border="0" id="img2"></a>
		  <a href="/images/home/Computers.jpg" target="Pics"><img src="/images/home/tbComputers.jpg" name="img3"  width="104" height="72" border="0" id="img3"></a>
		  <a href="/images/home/Manx.jpg" Target="Pics"><img src="/images/home/tbManx.jpg" name="image4" border="0" id="img4"></a>
		  <a href="/images/home/Manx.jpg" Target="Pics"><img src="/images/home/tbManx.jpg" name="image5" border="0" id="img5"></a>
		 </p>
        </div>
        </td>

Open in new window

Avatar of te-edu
te-edu
Flag of Serbia image

<IFRAME HEIGHT="360"  WIDTH="520" marginheight="0px" src="/images/home/manx.jpg" srcname="MPic"  frameborder= "1" scrolling = no NAME="Pics"  ID="FRAME"> 
    </IFRAME>


onmouseover = "document.getElementById(FRAME).src ='/images/home/pool.jpg'";

Open in new window



also you missed  onmouseover="document.Pics.src='/images/home/pool.jpg'"
Avatar of kjohnson530
kjohnson530

ASKER

Sorry this is a learning experience for me.

So I'm a little slow, bear with me.  I changed the Ifram line to include the missing items. then I'm to change the link items to be similar to the following?


<a href="/images/home/Manx.jpg" Target="Pics"><img src="/images/home/tbManx.jpg" name="Img1" onmouseover = "document.getElementById(FRAME).src ='/images/home/pool.jpg'"; width="104" height="72" border="0"></a>

Open in new window

<td width="47%" rowspan="6"><div align="center">
          <br><p><iframe height="360"  width="520" marginheight="0px" src="/images/home/manx.jpg" srcname="MPic"  frameborder= "1" scrolling = no name="Pics" id="Pics" > 
    </iframe >
        <br><br><hr width="520">

        
  </a>


<a href="#" onmouseover="document('Pics').src='/images/home/Manx.jpg" >
    <img src="/images/home/tbManx.jpg" name="Img1" width="104" height="72" border="0">
</a>

<a href="#" onmouseover="document('Pics').src='/images/home/Pool.jpg">
    <img src="/images/home/tbPool.jpg" name="img2" width="104" height="72" border="0" id="img2">
</a>

<a href="#"onmouseover="document('Pics').src='/images/home/Computers.jpg">
  <img src="/images/home/tbComputers.jpg" name="img3"  width="104" height="72" border="0" id="img3">
</a>

<a href="#"onmouseover="document('Pics').src='/images/home/Manx.jpg">
   <img src="/images/home/tbManx.jpg" name="image4" border="0" id="img4">
</a>

		 </p>
        </div>
        </td>

Open in new window




So I'm still a brick on this one.  I see what you've done with it and placed your code in my doc I'm still not getting the end result.  When I mouse over the icons they are still not changing the image in the Iframe.
ASKER CERTIFIED SOLUTION
Avatar of te-edu
te-edu
Flag of Serbia image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Ahh I have another issue with my page thank you so much that is exactly what I was looking for.