mouse over to have an image appear elsewhere

[Guest mascaliente]

How do i produce a mouse over button that will make an image appear elsewhere in the window?

[Skemcin]

Here is an example I did years ago:http://www.prosthodontics.org/java script:

<script language="JavaScript1.2">function SwitchImage(locat,name)  {        newBar = eval(name + ".src");  document [locat].src = newBar;	  }  im = new Array();{	StudentsOn = new Image();	StudentsOn.src = "cf-dbm/rollovers/students-on.gif";	StudentsOff = new Image();	StudentsOff.src = "cf-dbm/rollovers/students-off.gif";		ConsumersOn = new Image();	ConsumersOn.src = "cf-dbm/rollovers/consumers-on.gif";	ConsumersOff = new Image();	ConsumersOff.src = "cf-dbm/rollovers/consumers-off.gif";		ProfessionalsOn = new Image();	ProfessionalsOn.src = "cf-dbm/rollovers/professionals-on.gif";	ProfessionalsOff = new Image();	ProfessionalsOff.src = "cf-dbm/rollovers/professionals-off.gif";		TechnicianOn = new Image();	TechnicianOn.src = "cf-dbm/rollovers/technician-on.gif";	TechnicianOff = new Image();	TechnicianOff.src = "cf-dbm/rollovers/technician-off.gif";		MembersOn = new Image();	MembersOn.src = "cf-dbm/rollovers/members-on.gif";	MembersOff = new Image();	MembersOff.src = "cf-dbm/rollovers/members-off.gif";		FoundationOn = new Image();	FoundationOn.src = "cf-dbm/rollovers/foundation-on.gif";	FoundationOff = new Image();	FoundationOff.src = "cf-dbm/rollovers/foundation-off.gif";	BlankText = new Image();	BlankText.src = "cf-dbm/rollovers/text-blank.gif";	StudentsText = new Image();	StudentsText.src = "cf-dbm/rollovers/text-students.gif";		ConsumersText = new Image();	ConsumersText.src = "cf-dbm/rollovers/text-consumers.gif";		ProfessionalsText = new Image();	ProfessionalsText.src = "cf-dbm/rollovers/text-professionals.gif";		MembersText = new Image();	MembersText.src = "cf-dbm/rollovers/text-members.gif";		TechnicianText = new Image();	TechnicianText.src = "cf-dbm/rollovers/text-Technician.gif";		FoundationText = new Image();	FoundationText.src = "cf-dbm/rollovers/text-foundation.gif"; } </script>

HTML:

<tr><td width="108" height="105" valign="top"><img src="cf-dbm/rollovers/choose-off.gif" width="108" height="105" alt="" border="0"><br></td><td width="112" height="105" valign="top"><a href="cf-dbm/includes/sectionentry-view.cfm?appname=consumers"	onmouseover="SwitchImage('Consumers','ConsumersOn'),SwitchImage('Text','ConsumersText')"	onmouseout="SwitchImage('Consumers','ConsumersOff'),SwitchImage('Text','BlankText')"><img src="cf-dbm/rollovers/consumers-off.gif" width="112" height="105" alt="" border="0" name="Consumers"></a><br></td><td width="112" height="105" valign="top"><a href="cf-dbm/includes/sectionentry-view.cfm?appname=students"	onmouseover="SwitchImage('Students','StudentsOn'),SwitchImage('Text','StudentsText')"	onmouseout="SwitchImage('Students','StudentsOff'),SwitchImage('Text','BlankText')"><img src="cf-dbm/rollovers/students-off.gif" width="112" height="105" alt="" border="0" name="Students"></a><br></td><td width="112" height="105" valign="top"><a href="cf-dbm/includes/sectionentry-view.cfm?appname=professionals"	onmouseover="SwitchImage('Professionals','ProfessionalsOn'),SwitchImage('Text','ProfessionalsText')"	onmouseout="SwitchImage('Professionals','ProfessionalsOff'),SwitchImage('Text','BlankText')"><img src="cf-dbm/rollovers/professionals-off.gif" width="112" height="105" alt="" border="0" name="Professionals"></a><br></td><td width="112" height="105" valign="top"><a href="cf-dbm/technicians/technicians-intro.cfm"	onmouseover="SwitchImage('Technician','TechnicianOn'),SwitchImage('Text','TechnicianText')"	onmouseout="SwitchImage('Technician','TechnicianOff'),SwitchImage('Text','BlankText')"><img src="cf-dbm/rollovers/technician-off.gif" width="112" height="105" alt="" border="0" name="Technician"></a><br></td><td width="112" height="105" valign="top"><a href="cf-dbm/includes/sectionentry-view.cfm?appname=members"	onmouseover="SwitchImage('Members','MembersOn'),SwitchImage('Text','MembersText')"	onmouseout="SwitchImage('Members','MembersOff'),SwitchImage('Text','BlankText')"><img src="cf-dbm/rollovers/members-off.gif" width="112" height="105" alt="" border="0" name="Members"></a><br></td><td width="112" height="105" valign="top"><a href="cf-dbm/includes/sectionentry-view.cfm?appname=foundation"	onmouseover="SwitchImage('Foundation','FoundationOn'),SwitchImage('Text','FoundationText')"	onmouseout="SwitchImage('Foundation','FoundationOff'),SwitchImage('Text','BlankText')"><img src="cf-dbm/rollovers/foundation-off.gif" width="112" height="105" alt="" border="0" name="Foundation"></a><br></td></tr><tr><td colspan="7" width="780" height="81" valign="top"><img src="cf-dbm/rollovers/text-blank.gif" width="780" height="81" alt="" border="0" name="Text"><br></td></tr>

How It Works:The first row of images are programmed with the mouseover attributes. In stead of having them replace themselves, they all are programmed to replace the blank image in the second row. This technique is called Disjointed Mouseover.Its the same principle of a regular mouse over but instead of replacing itself, your just telling it to replace a different image - by way of the name attribute.

[Guest killertofu]

wow Skemcin alot of code for veary little.<html><head><script type="text/javascript">function imageappear(){document.getElementById("id").style.visibility="visible"}</script></head><body><!-- change the position absolut to where you want it to appear --><img id="id" style="position:absolute; left:100px; top:150px; visibility:hidden;" src="img.jpg" /><input type="button" onmouseover="imageappear()" /><body /></html>