PDA

View Full Version : 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



<!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

<!--
// pre-load image:
if (document.images)
{
title01 = new Image(112,400); title02 = new Image(112,400);
title03 = new Image(112,400); title04 = new Image(112,400);
title05 = new Image(112,400); title06 = new Image(112,400);
title07 = new Image(112,400); title08 = new Image(112,400);
title01.src = "title.gif"; title02.src = "wrds-cnslt.gif";
title03.src = "wrds-nws.gif"; title04.src = "wrds-hstry.gif";
title05.src = "wrds-cntct.gif"; title06.src = "wrds-prsnl.gif";
title07.src = "wrds-lnks.gif"; title08.src = "wrds-store.gif";
}

// note-function to change any img with another

function centerimg(imgName,imgObjName)
{
if (document.images) {
document.images[imgName].src = eval(imgObjName + ".src");
}}

//--></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:


<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:


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:


<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 (http://www.codehelp.co.uk/html/deprecated.html). Highlighted in red (from above snippet) are among them.

Hope it helps.