PDA

View Full Version : wanting to have numerous mouse-over affects on one page

wendymaree
07-01-2003, 09:26 AM
Hello,

I'm trying to have multiple mouseover effects happening on one page, using the same script for each, but none of the mouse-overs are working. If I remove all of the scripts, but one, then the remaining one works.

This code is not exactly a java script, but it does the work of one. It was automatically generated by PSP. I'd greatly appreciate any advice.

Here is the script:


<!-- Begin Table -->
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="556" HEIGHT="166">

<TR>
<TD ROWSPAN="3" COLSPAN="1" WIDTH="39" HEIGHT="166">
<IMG NAME="title0" SRC="title_1x1.jpg" WIDTH="39" HEIGHT="166" BORDER="0"></TD>
<TD ROWSPAN="1" COLSPAN="1" WIDTH="478" HEIGHT="9">
<IMG NAME="title1" SRC="title_1x2.jpg" WIDTH="478" HEIGHT="9" BORDER="0"></TD>
<TD ROWSPAN="3" COLSPAN="1" WIDTH="39" HEIGHT="166">
<IMG NAME="title2" SRC="title_1x3.jpg" WIDTH="39" HEIGHT="166" BORDER="0"></TD>
</TR>

<TR>
<TD ROWSPAN="1" COLSPAN="1" WIDTH="478" HEIGHT="88">
<A HREF="#" onMouseOver="if(document.images) document.title3.src='welcome_home.gif';"
onMouseOut="if(document.images) document.title3.src='title_2x1.jpg';"><IMG NAME="title3" SRC="title_2x1.jpg" WIDTH="478" HEIGHT="88" BORDER="0" ALT="Welcome Home!"></A></TD>
</TR>

<TR>
<TD ROWSPAN="1" COLSPAN="1" WIDTH="478" HEIGHT="69">
<IMG NAME="title4" SRC="title_3x1.jpg" WIDTH="478" HEIGHT="69" BORDER="0"></TD>
</TR>

</TABLE>
<!-- End Table -->





Thank you!!! :confused:
requestcode
07-01-2003, 03:03 PM
This one might work better:
<html>
<head>
<title>Multi Image Flip</title>
<script language="JavaScript">
function swap(image,imgname)
{
eval("document."+imgname+".src=image")
}
</script>
</head>
<body>
<center>
<br>
<br>
<a href="page.html" onmouseover="swap('0.gif','img1')" onmouseout="swap('1.gif','img1')"><img src="1.gif" name="img1" border="0"></a><br>
<a href="page.html" onmouseover="swap('3.gif','img2')" onmouseout="swap('2.gif','img2')"><img src="2.gif" name="img2" border="0"></a><br>
</body>
</html>

When you mouse over or out it calls the function called swap and passes to values to it. The first value is the image that you want to display and the second value is the name of the img tag.
Choopernickel
07-01-2003, 03:21 PM
NOT EVAL! NOOOO!

function swap(newSrc,whichImg) {
document.images[whichImg].src = newSrc;
}

is a much better dynamic evaluation, especially in terms of processing overhead.

remember: EVAL looks a lot like EVIL.
wendymaree
07-02-2003, 05:50 AM
thank you both very much for offering suggestions. so cool of you to take the time.


:thumbsup:


the problem is, I think that the new script, even if I could configure it, will conflict with other java scripts on the page. It's a children's ebook, you see, so I've gone a bit overboard with the efx. :-)

I might take out the mouse-overs and concentrate on animations and design. heh

thanks for sharing your skills,
Kor
07-02-2003, 11:10 AM
Seems easier to my to use getElementById method and style atributes to build roll-overs
<script>
function objectSetup() {

zoff = new layerSetup("jpg1","visible");
zon = new layerSetup("jpg2","hidden");

}

function layerSetup(id,visibility) {
this.obj = document.getElementById(id).style;
this.obj.visibility = visibility;
return this.obj;
}

function rollon(){
zoff.visibility = "hidden";
zon.visibility = "visible";
}

function rolloff(){
objectSetup();
}
</script>

And in body

<a href="#" onmouseover="rollon()" onmouseout="rolloff()"><img src=01.jpg id="jpg1"></a>.........<img src=02.jpg id="jpg2">.........
..........well... the content you want

This is a simple one, but adding elements in objectSetup() and ading new functions rollon2(), rollon3() (or, better, using the same function with parameters onmouseover rollon('pameter')) you can have as many effects as you want on the page using a single script.

NOTE, it is a simplified script, for new browsers (IE >= 5, NS >=6), but, with a broswer detect function, there is a posibility to make it working for IE 4 and NS 4 also.
:thumbsup:
wendymaree
07-03-2003, 03:39 PM
That's my kind of script :-)

Appreciate your help, Kor. I'll try it tomorrow and let you know how it goes.