SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot
    Join Date
    Apr 2003
    Location
    Perth W.A.
    Posts
    131
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image swap script

    Hi folks,
    I'm looking for a working script for an image swap routine, i.e. Image appears in a table cell 'on click' of text link from another table cell.

    Any help appreciated.

    Colin

  2. #2
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Colin...why not post what you have - or a demo - to give a better idea of what you need? Sample images (online, if possible) would be great. Are the images all the same size? Any info helps.
    ::: certified wild guess :::

  3. #3
    SitePoint Zealot
    Join Date
    Apr 2003
    Location
    Perth W.A.
    Posts
    131
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Adios,
    The script at the following link works on my Mac. Does it work on your machine?; click 'toy police set' and an image should appear to the right, together with some text below the image
    http://www.aw-wholesalers.com.au/compliance.htm
    If not I'm back to square one again.

  4. #4
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Are you using DW? As I mentioned a few threads back, the html file you linked to is all over the place: multiple <head>s, <body>s, scripts - completely invalid HTML, even though it sort of works in a browser. The image rollover is nothing to worry about, a simple script. First, before doing anything else, you need to get your page in order and clean up the clutter. As before, here's a sample, minus the debris and the timeline stuff, which isn't working anyway.
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>
    <head>
    <title>Compliance &amp; Recall Information</title>
    <meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1' />
    <link rel="stylesheet" href="styles.css" type="text/css">
    <link rel="stylesheet" href="bodytext.css" type="text/css">
    <script type="text/javascript">
    
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    
    function swapImg(img_name, img_src)
    {
    	document.images[img_name].src = img_src;
    	return false;
    }
    
    </script>
    </head>
    <body bgcolor="#FFFFFF" text="#000000" onLoad="MM_preloadImages('images/buttons/test_on.gif','images/buttons/ready_on.gif','images/buttons/credit_on.gif','images/buttons/home_on.gif','images/buttons/new_suppliers_on.gif','images/buttons/n_board_on.gif','images/buttons/about_on.gif','images/buttons/loc_on.gif')">
    <table width="791" border="0" cellpadding="0" cellspacing="0">
      <tr> 
        <td width="31" height="110"></td>
        <td valign="top" colspan="2"> 
          <div align="center"><img src="images/aw_logo.gif" width="200" height="101"></div>
        </td>
        <td valign="top" colspan="5" bgcolor="#000000"><img src="images/banner.jpg" width="560" height="110"></td>
      </tr>
      <tr> 
        <td height="10"></td>
        <td width="109"></td>
        <td width="91"></td>
        <td width="56"></td>
        <td width="195"></td>
        <td width="100"></td>
        <td width="59"></td>
        <td width="150"></td>
      </tr>
      <tr> 
        <td height="31" colspan="3" valign="top" bgcolor="#666666">&nbsp;</td>
        <td colspan="3" valign="middle" bgcolor="#666666"><font color="#FFFFFF" face="Verdana, Arial, Helvetica, sans-serif"><b><font size="1">WHOLESALERS 
          OF QUALITY RETAIL MERCHANDISE</font></b></font></td>
        <td colspan="2" valign="middle" bgcolor="#666666"> 
          <div align="right"><a href="index.htm" 
    onmouseover="return swapImg('home','images/buttons/home_on.gif')" 
    onmouseout="return swapImg('home','images/buttons/home_off.gif')"><img name="home" border="0" src="images/buttons/home_off.gif" width="23" height="23" hspace="20"></a></div>
        </td>
      </tr>
      <tr> 
        <td height="25" colspan="2" valign="middle" bgcolor="#CCCCCC"> 
          <div align="center"><a href="#" 
    onmouseover="return swapImg('about_off','images/buttons/about_on.gif')"
    onmouseout="return swapImg('about_off','images/buttons/about_off.gif')"><img src="images/buttons/about_off.gif" width="49" height="18" border="0" class="links" name="about_off"></a></div>
        </td>
        <td colspan="2" valign="middle" bgcolor="#CCCCCC"> 
          <div align="center"><a href="new_suppliers.htm" 
    onmouseover="return swapImg('new_suppliers','images/buttons/new_suppliers_on.gif')" 
    onmouseout="return swapImg('new_suppliers','images/buttons/new_suppliers_off.gif')"><img name="new_suppliers" border="0" src="images/buttons/new_suppliers_off.gif" width="67" height="18"></a></div>
        </td>
        <td valign="middle" bgcolor="#CCCCCC"> 
          <div align="center"><a href="credit_app.htm" 
    onmouseover="return swapImg('credit','images/buttons/credit_on.gif')" 
    onmouseout="return swapImg('credit','images/buttons/credit_off.gif')"><img name="credit" border="0" src="images/buttons/credit_off.gif" width="95" height="18" hspace="20"></a></div>
        </td>
        <td colspan="2" valign="middle" bgcolor="#CCCCCC"> 
          <div align="center"><a href="#" 
    onmouseover="return swapImg('notice','images/buttons/n_board_on.gif')" 
    onmouseout="return swapImg('notice','images/buttons/n_board_off.gif')"><img name="notice" border="0" src="images/buttons/n_board_off.gif" width="71" height="18"></a></div>
        </td>
        <td valign="middle" bgcolor= "#CCCCCC"> 
          <div align="center"><a href="#" 
    onmouseover="return swapImg('Image1','images/buttons/loc_on.gif')" 
    onmouseout="return swapImg('Image1','images/buttons/loc_off.gif')><img src="images/buttons/loc_off.gif" width="52" height="19" border="0" name="Image1"></a></div>
        </td>
      </tr>
    </table>
    <table border="0" cellpadding="0" cellspacing="0">
      <tr> 
        <td class="red">&nbsp;</td>
      </tr>
    </table>
    <div id="submenu" style="position:absolute; left:11px; top:201px; width:789px; height:18px; z-index:2; visibility: visible"></div>
    <table width="791" border="0" cellpadding="0" cellspacing="0">
      <tr> 
        <td width="84" height="24"></td>
        <td width="553"></td>
      </tr>
      <tr> 
        <td height="746"></td>
        <td valign="top"> 
          <p align="left" class="copyheading">COMPLIANCE AND RECALL INFORMATION</p>
          <p align="left" class="body">Austwide Wholesalers is committed to an on 
            going compliance program which ensures all products supplied are free 
            of defects and safe for consumers.<br>
            The compliance program requires a series of checks and procedures that 
            are completed by Austwide staff in the purchasing, importation and distribution 
            of all stock items. These checks include testing to Australian Standards 
            where applicable, and compliance with all mandatory trading standards 
            as gazetted by both Federal and State Government bodies.<br>
            In the event that a product already in the market is deemed to be unsafe 
            or poses a risk to consumers, Austwide will conduct a voluntary recall 
            of these products from both retailers and consumers.<br>
            The purpose of this web page is to provide information on products that 
            Austwide is currently recalling or has previously recalled due to safety 
            risks. We strongly suggest you check this page regularly to keep abreast 
            with any new safety issues or recalls.</p>
          <table width="737" border="1" cellpadding="3" bordercolor="#666666" align="center" height="489">
            <tr> 
              <td class="tableheading" width="81" bgcolor="#CCCCCC" height="46">DATE</td>
              <td class="tableheading" width="146" bgcolor="#CCCCCC">PRODUCT NAME</td>
              <td class="tableheading" width="174" bgcolor="#CCCCCC">DESCRIPTION<br>
                (Click for Image)</td>
              <td class="tableheading" width="275" bgcolor="#CCCCCC">IMAGE</td>
            </tr>
            <tr> 
              <td class="body" height="53" width="81">June 2002</td>
              <td class="body" width="146">Police Force Jumbo</td>
              <td width="174"><a href="#" 
    onmouseover="return swapImg('police','images/products/text_r_overs/toy_police_on.gif')" 
    onmouseout="return swapImg('police','images/products/text_r_overs/toy_police_off.gif')" 
    onclick="return swapImg('blank1','images/products/product.jpg');return swapImg('blank2','images/products/police_text.gif')"><img src="images/products/text_r_overs/toy_police_off.gif" width="186" height="53" name="police" border="0"></a></td>
              <td rowspan="8" valign="middle" align="center"> 
                <p align="center"><img src="images/products/blank1.gif" width="255" height="338" name="blank1"></p>
              </td>
            </tr>
            <tr> 
              <td class="body" height="53" width="81">Dec 2002</td>
              <td class="body" width="146">Musical Instrument play set</td>
              <td class="body" width="174"><a href="#" 
    onmouseover="return swapImg('music','images/products/text_r_overs/music_set_on.gif')" 
    onmouseout="return swapImg('music','images/products/text_r_overs/music_set_off.gif')" 
    onclick="return swapImg('blank1','images/products/product_copy.jpg');return swapImg('blank2','images/products/police_text.gif')"><img src="images/products/text_r_overs/music_set_off.gif" width="186" height="53" name="music" border="0"></a>
            </tr>
            <tr> 
              <td class="body" height="33" width="81">Dec 2002</td>
              <td class="body" width="146">Shake and Spin Toy</td>
              <td class="body" width="174">Toy that rattles</td>
            </tr>
            <tr> 
              <td class="body" height="33" width="81">Dec 2002</td>
              <td class="body" width="146">Drill Fun Train</td>
              <td class="body" width="174">Multi coloured train</td>
            </tr>
            <tr> 
              <td class="body" height="53" width="81">April 2003</td>
              <td class="body" width="146">Fantastic Engineering Trucks</td>
              <td class="body" width="174">High plastic tip cement truck with coloured 
                parts</td>
            </tr>
            <tr> 
              <td class="body" height="53" width="81">April 2003</td>
              <td class="body" width="146">Musical Instrument</td>
              <td class="body" width="174">Brightly Coloured Guitar</td>
            </tr>
            <tr> 
              <td class="body" height="33" width="81">July 2003</td>
              <td class="body" width="146">Super Launcher</td>
              <td class="body" width="174">Orange Gun 30cm long</td>
            </tr>
            <tr> 
              <td class="body" height="33" width="81">July 2003</td>
              <td class="body" width="146">Special Mission Team</td>
              <td class="body" width="174">Small Black Gun </td>
            </tr>
            <tr> 
              <td class="body" height="33" width="81">Dec 2003</td>
              <td class="body" width="146">Turtle Tambourine</td>
              <td class="body" width="174">Plastic Turtle with mallet</td>
              <td valign="top" rowspan="2"><img src="images/products/blank2.gif" width="286" height="75" name="blank2"></td>
            </tr>
            <tr> 
              <td class="body" height="40" width="81">Dec 2003</td>
              <td class="body" width="146">Puzzle Park</td>
              <td class="body" width="174">Bucket containing blocks</td>
            </tr>
          </table>
          <p align="left" class="body">&nbsp;</p>
        </td>
      </tr>
    </table>
    <table width="791" border="0" cellpadding="0" cellspacing="0">
      <tr> 
        <td width="791" height="46" valign="middle" bgcolor="#000000" class="whitetext"> 
          <p>Austwide Wholesalers PTY LTD<br>
            14 - 22 Magnet Road, Canning Vale, Western Australia 6155 A.C.N. 009 438 
            153</p>
        </td>
      </tr>
    </table>
    <table border="0" cellpadding="0" cellspacing="0">
      <tr> 
        <td class="red">&nbsp;</td>
      </tr>
    </table>
    </body>
    </html>
    
    ::: certified wild guess :::

  5. #5
    SitePoint Zealot
    Join Date
    Apr 2003
    Location
    Perth W.A.
    Posts
    131
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks so much for your help, that appears to work ;-)
    You know I think the problem was that I had included a header file which contained all the timeline stuff and I think this was conflicting with the basic image swap script, so I've deleted the main nav banner (header file). Would you mind just having a final check for me please? http://www.aw-wholesalers.com.au/index.htm > notice board > Recall information
    Thanks again adios ;-)

  6. #6
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well...yes - and no. Your other pages - at least index.htm - have the same
    problems as the one we just tidied up did: invalid HTML. I would guess you're testing in MSIE only, and, since it works,
    leaving it at that; however, it doesn't work properly in mozilla - not only troubling as far as coverage is involved,
    but an indication that some repair is needed. Download Firefox if you haven't done so already (great soft, btw)
    and enable the JS console (under Tools) so you can get some feedback. I'd help you with the timeline thing, which appears to be involved,
    but I've learned to avoid MM_specifics as a rule. Again: tidy up those files before proceeding!
    Much easier than trying to track down browser-specific errors one by one. cheers....
    ::: certified wild guess :::

  7. #7
    SitePoint Zealot
    Join Date
    Apr 2003
    Location
    Perth W.A.
    Posts
    131
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again, I understand the coverage issue and I've heard of Firefox (requires an upgrade of 0S) - one more step in the learning curve. This has got me over the major hurdle.
    Cheers
    Colin


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •