Combining two mouseOver events?

[JohnHartman]

Hello, I'm very new to this, so excuss me if the solution is obvious but I'm really struggling with combining two mouseOver events.

I've created a picture gallery and I'd like the thumbs to turn grey when the mouse is over them, and have a caption displayed in a textarea. I've gotten both to work fine on their own but cannot get both to work to save my life.

here's the code for the caption:

<a href="#"
onMouseOver ="change('Vannesa Swesniks\' Bridgestone Spica');" onMouseOut="change('')";
<IMG name="img1" BORDER=0 alt="Vanessa Swesniks' Bridgestone Spica" src="MbikeDir/Georgia.JPG" name="georgia" HEIGHT=100 WIDTH=100 SRC="MbikeDir/Georgia.JPG" ></A>

and this swaps the color thumb for the grey scale:
<a href="#"
onMouseOver="imgOn('img2')"
onMouseOut="imgOff('img2')">
<IMG name="img2" BORDER=0 alt="John Hatmanns' Cinelli Supercorsa" src="MbikeDir/The_Cinelli.png" name="cinelli" HEIGHT=100 WIDTH=100 SRC="MbikeDir/The_Cinelli.png" ></A>

Can you help me combine them?

[Trinithis]

First off, don't put capitals in your tag names or attributes, such as "onMouseOut". Attributes and tag names should be all lowercase. Your height, width, and border attributes should have quotes around them, and close your img tag with " />". Doing things this way is a good habit, as it is the right way to write your markup and the only way to write valid XML. (Browsers tend to fix these mistakes automatically, so you might not have realized this.)

There are a couple ways to do it. One way is to use addEventListener (or IE's attachEvent), but I think using a containing function would be easier for you. (Plus, you don't need to worry about getting the element by id or whatnot.)

Try changing your onevents to look like this:

onevent="function(e){func1();func2();funcN();}"

So your mouseout in this example would be:

onmouseout="function(e){imgOn('img2');change('Vannesa Swesniks\' Bridgestone Spica');}"

[JohnHartman]

Thank you for all your help, I've tried to apply the changes you suggest as well as prune the redundancies and vestigial code and I've unccovered some bugs that I'd like to straighten out before adding the containing function.

Here is my code for a photo with a caption that appears(element1), next to the same photo that turns gray scale on mouse over(element2):

<span id="element1">
<a href="#"
onmouseover ="change('John Hartmans\' Cinelli Supercorsa')",
onmouseout="change('')",
<img border="0" alt="#" src="MbikeDir/the_cinelli.png" name="cinelli" height="100" width="100"/>
</a>
</span>

<span id="element2">
<a href="#"
onmouseover="imgOn('img2')"
onmouseout="imgOff('img2')">
<img name="img2" border="0" alt="#" src="MbikeDir/the_cinelli.png" name="cinelli" height="100" width="100"/>
</a>

And these are my bugs: if I add a </span> at the end of element2(or delete the code for element2 altogether), the caption no longer works for element1. Likewise if I include, name="img2", in the img tag of element1 it will no longer switch to the grey scale picture.

If I delete all the code for element2, element1




If someone can help clear up these bugs, I'll try to insert the containing function that I've written like this:

onmouseon="function(e){imgOn('img2');change('John Hartmans\' Cinelli Supercorsa');}"
onmouseout="function(e){imgOff('img2');change('');}"

[Trinithis]

You span issue might be that you did not close your span tag. Also, I'm pretty sure that that the values in the name attribute need to be unique, or at least outside of forms. Using the id attribute for certain should be unique, and personally, I prefer using id's over names.

[Trinithis]

Here is some sample code that works: (Just change the image sources.)

<script type="text/javascript">
function change(str) {
	document.getElementById("myTextarea").value = str;
	}
function imgOn(el) {
	img = el.firstChild;
	while(String(img.tagName).toLowerCase()!=="img") img = img.nextSibling;
	var src = img.src.replace(/(\.\w+)$/, "");
	img.src = src.substring(0, src.length-1)+2+RegExp.$1;
	}
function imgOff(el) {
	img = el.firstChild;
	while(String(img.tagName).toLowerCase()!=="img") img = img.nextSibling;
	var src = img.src.replace(/(\.\w+)$/, "");
	img.src = src.substring(0, src.length-1)+1+RegExp.$1;
	}
</script>

<span id="element1">
<a href="#"
onmouseover="(function(el){change('John Hartmans\' Cinelli Supercorsa'); imgOn(el)})(this)",
onmouseout="(function(el){change(''); imgOff(el)})(this)">
<img border="0" alt="#" src="MbikeDir/the_cinelli1.png" name="cinelli" height="100" width="100"/>
</a>
</span>

<span id="element2">
<a href="#"
onmouseover="(function(el){change('Jon Foster\'s Crowbot'); imgOn(el)})(this)",
onmouseout="(function(el){change(''); imgOff(el)})(this)">
<img border="0" alt="#" src="foster/crowbot1.png" name="foster" height="100" width="100"/>
</a>
</span>

<span id="element3">
<a href="#"
onmouseover="(function(el){change('Keith Parkinson\'s North Patrol'); imgOn(el)})(this)",
onmouseout="(function(el){change(''); imgOff(el)})(this)">
<img border="0" alt="#" src="parkinson/northPatrol1.png" name="parkinson" height="100" width="100"/>
</a>
</span>

<textarea id="myTextarea"></textarea>

The imgOn() changes xxx/yyy1.zzz to xxx/yyy2.zzz, and the imgOff() changes xxx/yyy2.zzz to xxx/yyy1.zzz.

In other words, it gives it the same source file, except instead of making the new source something like test1.bmp, it makes it test2.bmp.

Oh, and there was a mistake in my containing function. Instead of

function(e){func1()....}

It should be

(function(el){func1()....}(this))

[JohnHartman]

I really appreciate all the help but I saw my first bit of html code a week ago, and I don't even know where to put my image sources in that.

I've been using this:

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

if (document.images) {

img1on = new Image(); // The onmouseover image
img1on.src = "MbikeDir/The_CinelliGrey.png";
img2on = new Image();
img2on.src = "MbikeDir/The_CinelliGrey.png";

img1off = new Image(); // The normally seen image
img1off.src = "MbikeDir/The_Cinelli.png";
img2off = new Image();
img2off.src = "MbikeDir/The_Cinelli.png";
} //This function changes the image when over.
function imgOn(imgName) {
if (document.images) {
document[imgName].src = eval(imgName + "on.src");
}
} //This function changes the image back when off.
function imgOff(imgName) {
if (document.images) {
document[imgName].src = eval(imgName + "off.src");
}
}