[Date Prev][Date Next][Thread Prev][Thread Next][Minivend by date
][Minivend by thread
]
Re: Using IMAGE MAPS during a MV session
****** message to minivend-users from Barry Treahy <treahy@mmaz.com> ******
Thanks Ryan, but this is based on a lot of help from the this...
As for the backward compatibility, our site states a minimum browser recommendation of 4
and have no interest in supporting older browsers. Initial hits agains our site
demonstrate that 90% are NS/IE 4 or newer, 9% is NS 3, 1% is NS2, non-GUI, or browsers
that I'm not familiar with. Since making sites with with IE & NS is a chore, for out
site and based on the hits, I'm not interested in creating more work than necesary...
Barry
Ryan Hertz wrote:
> ****** message to minivend-users from Ryan Hertz <rhertz@gyb.baits.com> ******
>
> Great example Barry! However, I'd like to recommend HTML comments around the
> script to keep old browsers from freaking out. ;-)
>
> At 04:35 PM 3/18/99 , Barry Treahy wrote:
> >
> > I've got a working test below that uses image maps and roll-overs on the
> > image areas
> >
> > Barry
> >
> > <HTML>
> >
> >
> > <HEAD>
> >
> >
> > <META HTTP-EQUIV="Expires" CONTENT="Thu, 18 Sep 1997 00:00:00 EST">
> >
> >
> > <TITLE>__COMPANY__ - Part Number Selection Wizard</TITLE>
> >
> >
> > <script language="JavaScript">
>
> <!--
>
> >
> > if (document.images) {
> >
> >
> > var Nshell_up = new Image(450,300);
> >
> >
> > Nshell_up.src = "/midwest-mi/images/WIZARDshell.gif";
> >
> > var NshellCA_over = new Image(450,300);
> >
> >
> > NshellCA_over.src = "/midwest-mi/images/WIZARDshellCA.gif";
> >
> > var NshellT_over = new Image(450,300);
> >
> >
> > NshellT_over.src = "/midwest-mi/images/WIZARDshellT.gif";
> >
> > var NshellDC_over = new Image(450,300);
> >
> >
> > NshellDC_over.src = "/midwest-mi/images/WIZARDshellDC.gif";
> >
> > var NshellC_over = new Image(450,300);
> >
> >
> > NshellC_over.src = "/midwest-mi/images/WIZARDshellC.gif";
> >
> > var NshellPD_over = new Image(450,300);
> >
> >
> > NshellPD_over.src = "/midwest-mi/images/WIZARDshellPD.gif";
> >
> > var NshellE_over = new Image(450,300);
> >
> >
> > NshellE_over.src = "/midwest-mi/images/WIZARDshellE.gif";
> >
> > var NshellEO_over = new Image(450,300);
> >
> >
> > NshellEO_over.src = "/midwest-mi/images/WIZARDshellEO.gif";
> >
> > var NshellPS_over = new Image(450,300);
> >
> >
> > NshellPS_over.src = "/midwest-mi/images/WIZARDshellPS.gif";
> >
> > var NshellA_over = new Image(450,300);
> >
> >
> > NshellA_over.src = "/midwest-mi/images/WIZARDshellA.gif";
> >
> > var NshellCCQ_over = new Image(450,300);
> >
> >
> > NshellCCQ_over.src = "/midwest-mi/images/WIZARDshellCCQ.gif";
> >
> >
> > }
> >
> >
> > // functions that swap images
> >
> >
> > function showtext(name){
> >
> >
> > if (document.images) {
> >
> >
> > if (navigator.appName == 'Netscape') {
> >
> >
> > document.layers['Layer3'].document.WIZARDShell.src=eval(name+".src");
> >
> >
> > } else {
> >
> >
> > document.WIZARDShell.src=eval(name+".src");
> >
> >
> > }
> >
> >
> > }
> >
> >
> > }
>
> // -->
>
> >
> > </script>
> >
> >
> > </HEAD>
> >
> >
> > <BODY>
> >
> >
> > <div id="Layer1" style="position:absolute; left:0px; top:0px; width:600px;
> > height:110px; z-index:1">
> >
> >
> > <table align="center" cellpadding="0" cellspacing="0" border="0"
> vspace="0"
> > hspace="0">
> >
> >
> > <TR>
> >
> >
> > <TD COLSPAN="7" ALIGN="CENTER">
> >
> >
> > <img src="midwest6.gif" border="0" width="480" height="74">
> >
> >
> > </TD>
> >
> >
> > </TR>
> >
> >
> > <tr>
> >
> >
> > <td align="center" valign="MIDDLE"><b><font font="helvetica"
> > face="Arial, Helvetica, sans-serif">Components</font> </b></td>
> >
> >
> > <td align="center" valign="MIDDLE"><img
> > src="/midwest-mi/images/bullets/blue/bbul9.gif" alt="*" border="0" width="9"
> > height="9"> </td>
> >
> >
> > <td align="center" valign="MIDDLE"><b><font font="helvetica"
> > face="Arial, Helvetica, sans-serif">Adapters</font> </b></td>
> >
> >
> > <td align="center" valign="MIDDLE"><img
> > src="/midwest-mi/images/bullets/blue/bbul9.gif" alt="*" border="0" width="9"
> > height="9"> </td>
> >
> >
> > <td align="center" valign="MIDDLE"><b><font font="helvetica"
> > face="Arial, Helvetica, sans-serif">Cable Assemblies</font> </b></td>
> >
> >
> > <td align="center" valign="MIDDLE"><img
> > src="/midwest-mi/images/bullets/blue/bbul9.gif" alt="*" border="0" width="9"
> > height="9"> </td>
> >
> >
> > <td align="center" valign="MIDDLE"><b><font font="helvetica"
> > face="Arial, Helvetica, sans-serif">Connectors</font> </b></td>
> >
> >
> > </tr>
> >
> >
> > </table>
> >
> >
> > <font face="Arial, Helvetica, sans-serif" size="+1">Part Number
> > Wizard</font> </div>
> >
> >
> > <div id="Layer2" style="position:absolute; left:0px; top:115px; width:150px;
> > height:300px; z-index:2"> <img src="/midwest-mi/images/WIZARDindex.gif"
> > width="150" height="300" border="0" usemap="#WIZARDindex">
> >
> >
> > <map name="WIZARDindex">
> >
> >
> > <area shape="rect" coords="0,0,150,15" href="[area ord/wizardatt]"
> > target="_top" onMouseOver="showtext('NshellCA_over');"
> > onMouseOut="showtext('Nshell_up');">
> >
> >
> > <area shape="rect" coords="0,15,150,29" href="[area ord/wizardadp]"
> > target="_top" onMouseOver="showtext('NshellCA_over');"
> > onMouseOut="showtext('Nshell_up');">
> >
> >
> > <area shape="rect" coords="0,29,150,43" href="[area ord/wizardsta]"
> > target="_top" onMouseOver="showtext('NshellCA_over');"
> > onMouseOut="showtext('Nshell_up');">
> >
> >
> > <area shape="rect" coords="0,43,150,68" href="[area ord/wizardcva]"
> > target="_top" onMouseOver="showtext('NshellCA_over');"
> > onMouseOut="showtext('Nshell_up');">
> >
> >
> > <area shape="rect" coords="0,68,150,93" href="[area ord/wizardcsv]"
> > target="_top" onMouseOver="showtext('NshellCA_over');"
> > onMouseOut="showtext('Nshell_up');">
> >
> >
> > <area shape="rect" coords="0,93,150,106" href="[area ord/wizardtrm]"
> > target="_top" onMouseOver="showtext('NshellT_over');"
> > onMouseOut="showtext('Nshell_up');">
> >
> >
> > <area shape="rect" coords="0,106,150,119" href="[area ord/wizardopn]"
> > target="_top" onMouseOver="showtext('NshellT_over');"
> > onMouseOut="showtext('Nshell_up');">
> >
> >
> > <area shape="rect" coords="0,119,150,129" href="[area ord/wizardsht]"
> > target="_top" onMouseOver="showtext('NshellT_over');"
> > onMouseOut="showtext('Nshell_up');">
> >
> >
> > <area shape="rect" coords="0,129,150,144" href="[area ord/wizarddcb]"
> > target="_top" onMouseOver="showtext('NshellDC_over');"
> > onMouseOut="showtext('Nshell_up');">
> >
> >
> > <area shape="rect" coords="0,144,150,158" href="[area ord/wizardcpl]"
> > target="_top" onMouseOver="showtext('NshellC_over');"
> > onMouseOut="showtext('Nshell_up');">
> >
> >
> > <area shape="rect" coords="0,158,150,171" href="[area ord/wizardhyb]"
> > target="_top" onMouseOver="showtext('NshellC_over');"
> > onMouseOut="showtext('Nshell_up');">
> >
> >
> > <area shape="rect" coords="0,171,150,183" href="[area ord/wizardpwd]"
> > target="_top" onMouseOver="showtext('NshellPD_over');"
> > onMouseOut="showtext('Nshell_up');">
> >
> >
> > <area shape="rect" coords="0,183,150,195" href="[area ord/wizardeql]"
> > target="_top" onMouseOver="showtext('NshellE_over');"
> > onMouseOut="showtext('Nshell_up');">
> >
> >
> > <area shape="rect" coords="0,195,150,208" href="[area ord/wizardopt]"
> > target="_top" onMouseOver="showtext('NshellEO_over');"
> > onMouseOut="showtext('Nshell_up');">
> >
> >
> > <area shape="rect" coords="0,208,150,221" href="[area ord/wizardphs]"
> > target="_top" onMouseOver="showtext('NshellPS_over');"
> > onMouseOut="showtext('Nshell_up');">
> >
> >
> > <area shape="rect" coords="0,221,150,244" href="[area ord/wizardwga]"
> > target="_top" onMouseOver="showtext('NshellA_over');"
> > onMouseOut="showtext('Nshell_up');">
> >
> >
> > <area shape="rect" coords="0,244,150,257" href="[area ord/wizardadtb]"
> > target="_top" onMouseOver="showtext('NshellA_over');"
> > onMouseOut="showtext('Nshell_up');">
> >
> >
> > <area shape="rect" coords="0,257,150,260" href="[area ord/wizardadti]"
> > target="_top" onMouseOver="showtext('NshellA_over');"
> > onMouseOut="showtext('Nshell_up');">
> >
> >
> > <area shape="rect" coords="0,260,150,300" href="[area ord/wizardccq]"
> > target="_top" onMouseOver="showtext('NshellCCQ_over');"
> > onMouseOut="showtext('Nshell_up');">
> >
> >
> > </map>
> >
> >
> > </div>
> >
> >
> > <div id="Layer3" style="position:absolute; left:150px; top:115px;
> > width:450px; height:300px; z-index:3"> <img name="WIZARDShell" border="0"
> > src="/midwest-mi/images/WIZARDshell.gif" width="450" height="300">
> >
> >
> > </div>
> >
> > <div id="Layer4" style="position:absolute; left:0px; top:415px; width:600px;
> > height:50px; z-index:4"> <INSERT FILE="footer.htm"> </div>
> >
> >
> > </BODY>
> >
> >
> > </HTML>
> >
> > Brian Walters wrote:
> >>
> >> ****** message to minivend-users from "Brian Walters"
> >> <Brian@TexasComputers.com> ******
> >>
> >> Mike, can you expand on this using an image in a form topic? That's
> exactly
> >> what I want to do.
> >>
> >> Brian Walters
> >> ------------------------------------------------------------------------
> >> R&B Consulting <http://www.TexasComputers.com
> 281-494-UNIX
> >> 281-494-4FAX
> >> ------------------------------------------------------------------------
> >> Providing unique solutions for your unique business> -----Original
> >> Message----- > From: owner-minivend-users@minive"
> >> eudora="autourl">http://www.TexasComputers.com
> >> 281-494-UNIX 281-494-4FAX
> >> ------------------------------------------------------------------------
> >>
> >> Providing unique solutions for your unique business
> >>
> >> > -----Original Message-----
> >> > From: owner-minivend-users@minivend.com
> >> > [mailto:owner-minivend-users@minivend.com]On Behalf Of
> >> > mikeh@minivend.com
> >> > Sent: Monday, March 15, 1999 5:23 PM
> >> > To: minivend-users@minivend.com
> >> > Subject: Re: Using IMAGE MAPS during a MV session
> >> >
> >> >
> >> > ****** message to minivend-users from mikeh@minivend.com ******
> >> >
> >> > Quoting Christopher Thompson (Thompson-Jordan@mindspring.com):
> >> > >
> >> > > Use the [area] tag. I prefer this tag to [page]. You can use it
> >> > either of
> >> > > the below:
> >> > >
> >> > > <A HREF="[area mypage]">My Page</A>
> >> > >
> >> > > <MAP NAME="mymap">
> >> > > <AREA ... HREF="[area mypage]">
> >> > > </MAP>
> >> > >
> >> >
> >> > And now it may be clear why the tag was called [area]....8-)
> >> >
> >> > Actually MiniVend will do most anything based on image maps.
> >> > You can even do form submits based on an image map; there is
> >> > a special Vend::Imagemap module just for that.
> >> >
> >> > --
> >> > Mike Heins
> >> <http://www.minivend.com/>http://www.minivend.com/ ___
> >> > Internet Robotics |_ _|____
> >> > Fast, reliable, cheap. 131 Willow Lane, Floor 2 | || _ \
> >> > Pick two and we'll talk. Oxford, OH 45056 | || |_) |
> >> > -- unknown <mikeh@minivend.com> |___| _ <
> >> > 513.523.7621 FAX 7501 |_| \_\
> >> > -
> >> > To unsubscribe from the list, DO NOT REPLY to this message. Instead,
> send
> >>
> >> > email with 'UNSUBSCRIBE minivend-users' in the body to
> >> > Majordomo@minivend.com.
> >> > Archive of past messages:
> >> <http://www.minivend.com/>http://www.minivend.com/minivend/minivend-list
> >> >
> >>
> >> -
> >> To unsubscribe from the list, DO NOT REPLY to this message. Instead, send
> >> email with 'UNSUBSCRIBE minivend-users' in the body to
> >> Majordomo@minivend.com.
> >> Archive of past messages:
> >> <http://www.minivend.com/>http://www.minivend.com/minivend/minivend-list
> >
> >
>
> Ryan Hertz tel 520-645-3812
> Webmaster tel 800-645-BAIT
> Advertising Director fax 520-645-2588
> Gary Yamamoto Custom Baits, Inc. http://www.yamamoto.baits.com
> -
> To unsubscribe from the list, DO NOT REPLY to this message. Instead, send
> email with 'UNSUBSCRIBE minivend-users' in the body to Majordomo@minivend.com.
> Archive of past messages: http://www.minivend.com/minivend/minivend-list
-
To unsubscribe from the list, DO NOT REPLY to this message. Instead, send
email with 'UNSUBSCRIBE minivend-users' in the body to Majordomo@minivend.com.
Archive of past messages: http://www.minivend.com/minivend/minivend-list