Mouse-Over pop-up image somewhere else on the page? 1

DParker · Oct 29, 2001

How do I make an image pop up on another part of a web page when you mouse over another image or link?

Regards,

David Parker
David Parker
TPA Web Design

http://www.tpawebdesign.com

DeZiner · Nov 1, 2001

Javascript. 1st define your images:

Code:

if document.images(){
1st = new Image
2nd = new Image

1st and 2nd can be any name you like for easy reference. No spaces like dogOn and dogOff to help you remember which is mouse over and which is mouse off. Next define the image path or the actual picture.

Code:

1st.src=&quot;images/pic1.gif&quot;
2nd.src=&quot;images/pic2.jpg&quot;

Now define with an else statement if the browser doesn't understand the initial document.images.

Code:

else {
1st=&quot;&quot;
2nd=&quot;&quot;

The whole javascript code in the header of your page should now look something like this:

Code:

<script language=&quot;javascript&quot; type=&quot;text/javascript&quot;>

	<!-- Hide
if document.images(){
1st = new Image
2nd = new Image

1st.src=&quot;images/pic1.gif&quot;
2nd.src=&quot;images/pic2.jpg&quot;
}
else{
1st=&quot;&quot;
2nd=&quot;&quot;
document.affectedArea=&quot;&quot; //This specifies the object to affect.
}
//End-->
</script>

In the body of your page, with the text or image you want to activate the rollover do this:

Code:

<a href=&quot;newpage.htm&quot; onMouseover=&quot;document.affectedArea.src=2nd.src&quot; onMouseout=&quot;document.affectedArea.src=1st.src&quot;>Next Page</a>

The area this affects can be any where on the page. All you have to do is associate the name of the area. In this case the name we gave it was affectedArea. But this can be anything.

Code:

<img border=&quot;0&quot; src=&quot;images/anotherPic&quot; name=&quot;affectedArea&quot;>

This is the picture that will change on the link rollover.
Hope this makes sense. Try coping the script from here. Paste into notepad first. Then you can paste into the HTML view of frontpage.

DeZiner
Never be afraid to try something new.
Remember that amateurs built the Ark.
Professionals built the Titanic

DParker · Nov 4, 2001

Thank you DeZiner, I could not have done it without you! It did not work but I figured out why, after programming for a couple of days.

Put THIS before the </head> statement:

<script language="javascript" type="text/javascript">

You do not have to do all of this:

</script>

And THIS between <body> and </body>:

<a href="newpage.htm" onMouseover="document.affectedArea.src=2nd.src" onMouseout="document.affectedArea.src=1st.src">Next Page</a>

must be like THIS between <body> and </body>:

<a href="newpage.htm" onMouseover=document.affectedArea.src="imageon.jpg" onMouseout=document.affectedArea.src="imageoff.jpg"><img border="0" src="animage.gif"</a>

and THIS is correct:

<img border="0" src="images/anotherPic" name="affectedArea">

Thank you again. This has help more than you know. David Parker
TPA Web Design

http://www.tpawebdesign.com

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Mouse-Over pop-up image somewhere else on the page? 1

DParker

Technical User

DeZiner

Programmer

DParker

Technical User

Similar threads

Part and Inventory Search

Sponsor