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