using multipe events onmouseover

**John Books** · 10-06-2008, 05:56 PM

I would like to perform both a button .gif change and a .jpg change on the same page as users onmouseover each menu button.
I have the basic
<a href="#" onMouseover="dothis(); dothat()">Test</a>
but the .jpg is my title and I want it to return onmouseout and change as the different menu buttons are scrolled over.
please let me know if I am not being clear.

**magicyte** · 10-06-2008, 09:19 PM

You are not being as clear as you could be. Also, could you please leave a link to your site or at least provide some of your code? This way it is easier to see your problems. Also, my final request is that you provide your problem CLEARLY and also what you want US AS PROGRAMMERS to do. Thank you.

I am willing to help you out. 60% of me doesn't understand the question.

-magicyte

**codeexploiter** · 10-07-2008, 03:07 AM

Here is a demo page. The only things that you need to work this page correctly the image with the names I've used in the source. Hopefully you can arrange that at your end

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Untitled Document</title>
        <style type="text/css">
        </style>        
    </head>
    <body>
        <div id="container">
            <div id="links">
                <a href="http://www.google.com" id="a1">Google&nbsp;<img src="g.gif" border="0" id="m1"/></a><br/>
                <a href="http://www.yahoo.com" id="a2">Yahoo!&nbsp;<img src="y.gif" border="0" id="m2"/></a><br/>
                <a href="http://www.mozilla.com" id="a3">Mozilla&nbsp;<img src="mo.gif" border="0" id="m3"/></a><br/>                
            </div>
            <div id="imgs">
            	<div><img src="1.jpg" border="0" id="1"/></div>
				<div><img src="2.jpg" border="0" id="2"/></div>
				<div><img src="3.jpg" border="0" id="3"/></div>
            </div>
        </div>
		<script type="text/javascript">
			var $ = function(id){
				return document.getElementById(id);
			};
			(function(){				
				$('a1').onmouseover = function(){
					handleMouseOver({gifsource:"m1",gifdest:"g1.gif",gifalt:"new google gif",jpgsource:"3",jpgdest:"11.jpg",jpgalt:"new jpg 11"});
				};
				$('a2').onmouseover = function(){
					handleMouseOver({gifsource:"m2",gifdest:"y1.gif",gifalt:"new yahoo gif",jpgsource:"2",jpgdest:"22.jpg",jpgalt:"new jpg 22"});
				};
				$('a3').onmouseover = function(){
					handleMouseOver({gifsource:"m3",gifdest:"mo1.gif",gifalt:"new mozilla gif",jpgsource:"1",jpgdest:"33.jpg",jpgalt:"new jpg 33"});
				};				
			})();
			function handleMouseOver(obj){
				$(obj.gifsource).src = obj.gifdest;
				$(obj.gifsource).alt = obj.gifalt;
				$(obj.jpgsource).src = obj.jpgdest;
				$(obj.jpgsource).alt = obj.jpgalt;				
			}
        </script>
    </body>
</html>

Hope this helps.

**John Books** · 10-07-2008, 03:57 PM

My URL is www.nithon.com . I have a splash page with buttons around my logo.

When a user 'onmouseover' a button I can make the button change with Javascript; I want to make the logo in the center change to .jpg I have made as descriptions, then onmouseout change back both the button and the logo.

I am learning html and javascript and I thank you for your input.

If I am still not clear enough, please ask specific questions as I may not be able to use the proper terminology. I am not asking anyone to program for me, could you point me in the right direction?

**John Books** · 10-09-2008, 07:24 PM

here is my source- I am trying to have both the button and the center image change with a onmouseover.

SOURCE CODE

</SCRIPT>

</HEAD>
<BODY background="./art/leath02.jpg" text="blue">
<div align="center" >
<table >
<tr >
<td width="300" ></td>
<td width="70%" >
<a href="consult.html"
onMouseOver="centerimg('titleimg','title02')"
onMouseOut="centerimg('titleimg','title01')" />

<img src="art/buttons/bttn-consult.gif" border="0" />
</a></td>
</tr>

<tr >
<td ><a href="prsnnl.html"
onMouseOver="centerimg('titleimg','title03')"
onMouseOut="centerimg('titleimg','title01')" />
<img src="art/buttons/bttn-person.gif" align="right" border="0" />
</a></td>

</tr>

<tr align="center" >
<td ><a href="history.htm"
onMouseOver="centerimg('titleimg','title04')"
onMouseOut="centerimg('titleimg','title01')" />

<img src="art/buttons/bttn-history.gif" border="0" />
</a></td>
<td rowspan="3">
<a href="index.html"
onMouseOver="centerimg('titleimg','title01')"
onMouseOut="centerimg('titleimg','title01')" />
<img name="art/buttons/titleimg" src="art/title.gif"
height="112" width="400" border="0" />
</a></td>
</tr>

<tr >
<td ><a href="contact.html"
onMouseOver="centerimg('titleimg','title05')"
onMouseOut="centerimg('titleimg','title01')" />
<img src="art/buttons/bttn-contact.gif" border="0" />
</a></td>

</tr>

<tr align="center" >
<td ><a href="intrst.htm"
onMouseOver="centerimg('titleimg','title06')"
onMouseOut="centerimg('titleimg','title01')" />
<img src="art/buttons/bttn-intrst.gif" border="0" />
</a></td>
</tr>

<tr >
<td ><a href="lnk.htm"
onMouseOver="centerimg('titleimg','title07')"
onMouseOut="centerimg('titleimg','title01')" />
<img src="art/buttons/bttn-links.gif" align="right" border="0" >
</a></td>
<td align="center"><b>Quality Through Experience</b></td>

</tr>

<tr >
<td ></td>
<td ><a href="prdt.html"
onMouseOver="centerimg('titleimg','title08')"
onMouseOut="centerimg('titleimg','title01')" />
<img src="art/buttons/bttn-products.gif" border="0" >
</a></td>
</tr>
</table>
</div>

**rangana** · 10-10-2008, 01:06 AM

Another example:

HTML Code:

<style type="text/css">
/* CSS to control the look and feel of the images
This is independent from the script if it confuses you.
*/
#test{
list-style-type:none;
float:left;
width:150px;
}
#test img{width:100px;height:100px;border:1px solid #222;}
#large{float:left;width:550px;height:520px;
border:3px double #222;
}
</style>
<script type="text/javascript">
// This function runs when being triggered via mouseover event
// Accepts two parameters. First is the target element and the image source
function changeImg(el,imageSource)
{
var src=imageSource; // Pass the parameter to src variable. I'm tired of long words.
document.getElementById(el).src=src;
}
</script>
<ul id="test">
<li><img src="http://rangana.moonylist.com/images/Picture2.jpg" alt="myimage" onmouseover="changeImg('large',this.src);"></li>
<li><img src="http://rangana.moonylist.com/images/Picture3.jpg" alt="myimage" onmouseover="changeImg('large',this.src);"></li>
<li><img src="http://rangana.moonylist.com/images/Picture4.jpg" alt="myimage" onmouseover="changeImg('large',this.src);"></li>
<li><img src="http://rangana.moonylist.com/images/Picture5.jpg" alt="myimage" onmouseover="changeImg('large',this.src);"></li>
<li><img src="http://rangana.moonylist.com/images/Picture6.jpg" alt="myimage" onmouseover="changeImg('large',this.src);"></li>
</ul>
<img src="http://rangana.moonylist.com/images/Picture8.jpg" alt="default" id="large">

If you intend to run another function, you can just add it like this:

Code:

onmouseover="changeImg('large',this.src);newFunc();"

Hope that makes sense to you.

Get back if your'e still stumped.

**John Books** · 10-16-2008, 04:34 PM

I am trying to see how this might work, but I am unable to grasp the-

onmouseover "funct()"; "funct"()" onmouseout "backtooriginal()"; "original()"

please be patient as I a bit slow on this code.

**rangana** · 10-17-2008, 12:01 AM

Please show us what you've gone so far, or better a link.

**John Books** · 10-23-2008, 05:17 PM

Look up for my link and the code I am working on.

**rangana** · 10-24-2008, 12:40 AM

Change highlighted into titleimg:

Code:

<img name="art/buttons/titleimg" src="art/title.gif" 
	   height="112" width="400" border="0" />

...also, you might find it useful to read on deprecated attributes. Highlighted in red (from above snippet) are among them.

Hope it helps.

Thread: using multipe events onmouseover

Thread Tools

Search Thread

using multipe events onmouseover

The Following User Says Thank You to magicyte For This Useful Post:

The Following User Says Thank You to codeexploiter For This Useful Post:

trying to be more clear

this is my source

The Following User Says Thank You to rangana For This Useful Post:

still feeling idiotic

my link and code

The Following User Says Thank You to rangana For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions