PDA

View Full Version : onmouseup event handler

collie
03-05-2003, 10:21 PM
I have a small thumbnail picture that I would want to open up to a large picture on the same page and I use the code below, what seems to be missing? I think I'M telling it what to do but it dont know where to go to finish.

<img src="xxx.jpg" onmouseup="xxxx.setImageValue('xxx.jpg');border=0 width=100 height=100>

thank you
ashleypower
03-06-2003, 12:04 AM
Here's a code I use:

Put this in the HEAD:

<SCRIPT LANGUAGE="JavaScript">

browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);

ns3up = (browserName == "Netscape" && browserVer >= 3);
ie4up = (browserName.indexOf("Microsoft") >= 0 && browserVer >= 4);

function doPic(imgName) {
if (ns3up || ie4up) {
imgOn = ("" + imgName);
document.mainpic.src = imgOn;
}
}
</script>

==============================

Put this in the body:

<TABLE WIDTH = "360" BORDER = "1" CELLSPACING = "0" CELLPADDING = "0">
<TR>
<TD><CENTER><A HREF = "javascript:doPic('../images/land.jpg');"><IMG SRC = "../images/land.jpg" WIDTH = "90" HEIGHT = "60" BORDER = "0"></A></TD>
<TD><CENTER><A HREF = "javascript:doPic('../images/lamp.jpg');"><IMG SRC = "../images/lamp.jpg" WIDTH = "90" HEIGHT = "60" BORDER = "0"></A></TD>
<TD><CENTER><A HREF = "javascript:doPic('../images/pig.jpg');"><IMG SRC = "../images/pig.jpg" WIDTH = "90" HEIGHT = "60" BORDER = "0"></A></TD>
<TD><CENTER><A HREF = "javascript:doPic('../images/lighter.jpg');"><IMG SRC = "../images/lighter.jpg" WIDTH = "90" HEIGHT = "60" BORDER = "0"></A></TD>
</TR>

<TR>
<TD COLSPAN = 4 ALIGN = CENTER><IMG NAME = "mainpic" SRC = "../images/black.gif" WIDTH = "520" HEIGHT = "390" BORDER = "1"></TD>
</TR>

<TR>
<TD><CENTER><A HREF = "javascript:doPic('../images/birdsm.gif');"><IMG SRC = "../images/birdsm.gif" WIDTH = "90" HEIGHT = "60" BORDER = "0"></A></TD>
<TD><CENTER><A HREF = "javascript:doPic('../images/boxing.gif');"><IMG SRC = "../images/boxing.gif" WIDTH = "90" HEIGHT = "60" BORDER = "0"></A></TD>
</TR>

</TABLE>

of course you could mess with the table attributes to make it appear the way you want, and of course you would change the image names! This works great for me, should help!
collie
03-06-2003, 01:58 AM
I gave it a try with code below. Unable to see any of the pictures anyplace. Must be missing something again.
<html>
<head>
<title>slideshow</title>

<body>
<SCRIPT LANGUAGE="JavaScript">

browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);

ns3up = (browserName == "Netscape" && browserVer >= 3);
ie4up = (browserName.indexOf("Microsoft") >= 0 && browserVer >= 4);

function doPic(imgName) {
if (ns3up || ie4up) {
imgOn = ("" + imgName);
document.mainpic.src = imgOn;
}
}
</script>
</head>

<center>


<TABLE WIDTH = "360" BORDER = "1" CELLSPACING = "0" CELLPADDING = "0">
<TR>
<TD><CENTER><A HREF = "javascript:doPic('../images/cody.jpg');"><IMG SRC = "../images/cody.jpg" WIDTH = "90" HEIGHT = "60" BORDER = "0"></A></TD>
<TD><CENTER><A HREF = "javascript:doPic('../images/collin.jpg');"><IMG SRC = "../images/collin.jpg" WIDTH = "90" HEIGHT = "60" BORDER = "0"></A></TD>
<TD><CENTER><A HREF = "javascript:doPic('../images/john.jpg');"><IMG SRC = "../images/john.jpg" WIDTH = "90" HEIGHT = "60" BORDER = "0"></A></TD>
<TD><CENTER><A HREF = "javascript:doPic('../images/kas.jpg');"><IMG SRC = "../images/kas.jpg" WIDTH = "90" HEIGHT = "60" BORDER = "0"></A></TD>
</TR>

<TR>
<TD COLSPAN = 4 ALIGN = CENTER><IMG NAME = "mainpic" SRC = "../images/cody.jpg" WIDTH = "520" HEIGHT = "390" BORDER = "1"></TD>
</TR>

<TR>
<TD><CENTER><A HREF = "javascript:doPic('../images/kyle.jpg');"><IMG SRC = "../images/kyle.jpg" WIDTH = "90" HEIGHT = "60" BORDER = "0"></A></TD>
<TD><CENTER><A HREF = "javascript:doPic('../images/malis.jpg');"><IMG SRC = "../images/malis.jpg" WIDTH = "90" HEIGHT = "60" BORDER = "0"></A></TD>
</TR>

</TABLE> </body>

</html>
collie
03-06-2003, 02:27 AM
thank you ashley power. I managed to figure what I was doing wrong. Thanks again.