MouseOver-MouseOut

JDU · Sep 20, 2004

Hi I am very naive at this, never written a javascript.

This is my problem. I have 7 small images which when clicked changes the pages in the iframe of the body. I currently have Mouseover and Mouseout events for these images which change these images from black/white to color. This is what I want to happen:

When someone clicks on image "X" I want the Mouseout event to not occur so that the image remains in color.

When image "Y" is clicked I want the Mouseout event to not occur for image "Y" but the Mouseout event for image "X" to occur.

I know that this may involve setting a flag to be checked etc. but I have no clue about syntax so code examples would be much appreciated.

Thanks,
JD

JDU · Sep 21, 2004

This is the script that I am using for Mouseover/Mouseout.

<SCRIPT language="javascript1.1">
gifHome = new Image(54,18)
gifHome.src = "test2.jpg"
gifHome2 = new Image(54,18)
gifHome2.src = "about_us.jpg"

function changeImg(cImg,ref) {
document.images[cImg].src = ref.src
}
</SCRIPT>

<A href="smbc_index1.htm" target="dynamic" onMouseOver="changeImg('imgHome',gifHome2)" onMouseOut="changeImg('imgHome',gifHome)" >
<img src="test2.jpg" name="imgHome"></a>

cLFlaVA · Sep 21, 2004

JD-

Your question interested me. However, without the images, it would take a lot more work for me to create images, create the script, etc.

Here is a functional script that does the same thing you request, but with text links. You could take a look at this code and, hopefully, combine it with yours to get to your result.

Good luck

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style type="text/css">
a {
	color: blue;
}
</style>

<script language="javascript">
<!--
function doSomething(ignore) {
	var link_name = '';
	for (var i = 1; i < 5; i++) {
		link_name = 'link' + i.toString();
		if (link_name != ignore) {
			document.getElementById(link_name).style.color = 'blue';
			document.getElementById(link_name).onmouseout = function () {this.style.color = 'blue';};
		} else {
			document.getElementById(link_name).style.color = 'red';
			document.getElementById(link_name).onmouseout = null;
		}
	}
	return false;
}
-->
</script>
</HEAD>

<BODY>
<a href="#"
   id="link1"
   onclick="doSomething('link1');"
   onmouseover="this.style.color='red';" 
   onmouseout="this.style.color='blue';">Link 1</a>
<a href="#" 
   id="link2"
   onclick="doSomething('link2');"
   onmouseover="this.style.color='red';" 
   onmouseout="this.style.color='blue';">Link 2</a>
<a href="#" 
   id="link3"
   onclick="doSomething('link3');"
   onmouseover="this.style.color='red';" 
   onmouseout="this.style.color='blue';">Link 3</a>
<a href="#" 
   id="link4"
   onclick="doSomething('link4');"
   onmouseover="this.style.color='red';" 
   onmouseout="this.style.color='blue';">Link 4</a>
</BODY>
</HTML>

*cLFlaVA
----------------------------
When will I be able to see what other members can see about myself? It's been like, a freakin' month already!

JDU · Sep 22, 2004

Thanks this is how I modified it. What I have noticed is that once I click on an image, the onmouseout is cancelled for all of the other images.

Also upon clicking image "X" (ie. image changes and onmouseout gets cancelled for it), when I click on image "Y", image "X" doesn't go back to its original image (ie. it remains in an onclicked state). Thanks.

<script language="javascript">

</script>

<a href="smbc_index1.htm" target="dynamic" onMouseOver="changeImg('imgHome1',gifHome1a)" onMouseOut="changeImg('imgHome1',gifHome1)" onclick="doSomething('link1')" id="link1" >
<img src="bwaboutus.jpg" name="imgHome1"></a><br>

<a href= "purpose.html" target="dynamic" onMouseOver="changeImg('imgHome2',gifHome2a)" onMouseOut="changeImg('imgHome2',gifHome2)" onclick="doSomething('link2')" id="link2">
<img src="bwpurpose.jpg" name="imgHome2"> </a><br>

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!

MouseOver-MouseOut

JDU

Technical User

JDU

Technical User

cLFlaVA

Programmer

JDU

Technical User

Similar threads

Part and Inventory Search

Sponsor