SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    onclick imageswap then use swapped image as a link to a xl image

    This is a simple thumbnail image swap setup. when you click on one of the 4 thuimbnails the meduim size pic changes. I would like to make it so I can click on the medium picture and it will open a new x-large pic of each corresponding picture in a new window or same window it doesent matter.

    here is a link to the javascript imageswap version
    http://www.sifterbox.com/onclick-swap-test.html

    I originally did this without javascript and it works clicking each xl picture if you are using ie6 but not mozilla? this is my problem so I am trying to do the same thing with javascript so It is compatible with both browsers. If you know a fix for this version to work on both broswers let me know also.
    http://www.sifterbox.com/onclick.html

    notice that in internet explorer you can click on all 4 thumbs and the medium pictures change then you can click on all 4 medium pictures and they open x-large pics up. This is what I want to duplicate using javascript.

    Note:I dont know much about javascript I just used dreamweaver image swap function.

    The code below is the onclick-swap-test.html and is the javascript version I have to work with right now

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <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 MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
    
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
    
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    //-->
    </script>
    </head>
    
    <body onload="MM_preloadImages('images/33-1-400.jpg','images/33-2-400.jpg','images/33-3-400.jpg','images/33-4-400.jpg')">
    <table border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td><table width="100" border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td><a href="javascript:;" onclick="MM_swapImage('main','','images/33-1-400.jpg',1)"><img src="images/33-1-100.jpg" alt="1" width="100" height="75" id="s1" /></a></td>
            </tr>
            <tr>
              <td><a href="javascript:;" onclick="MM_swapImage('main','','images/33-2-400.jpg',1)"><img src="images/33-2-100.jpg" alt="2" width="100" height="75" id="s2" /></a></td>
            </tr>
            <tr>
              <td><a href="javascript:;" onclick="MM_swapImage('main','','images/33-3-400.jpg',1)"><img src="images/33-3-100.jpg" alt="3" width="100" height="75"  id="s3" /></a></td>
            </tr>
            <tr>
              <td><a href="javascript:;" onclick="MM_swapImage('main','','images/33-4-400.jpg',1)"><img src="images/33-4-100.jpg" alt="4" width="100" height="75"  id="s4" /></a></td>
            </tr>
        </table></td>
        <td><table width="100%"  border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td><img src="images/33-1-400.jpg" alt="bigmain" width="400" height="300" id="main" /></td>
            </tr>
        </table></td>
      </tr>
    </table>
    </body>
    </html>

  2. #2
    SitePoint Wizard chris_fuel's Avatar
    Join Date
    May 2006
    Location
    Ventura, CA
    Posts
    2,750
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why not try something like Lightbox instead?

  3. #3
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well I am lookinig for someone to tell me how to make each (4) larger picture here clickable,linkable, etc. is it possible using javascript I mean comeone its supported by document.all and document.getElementById

    http://www.sifterbox.com/onclick-fixed.html here is a model of it working with validated xhtml I was wondering if there was a way to do it using javascript so I can validate it strict xhtml. when I go strict and take the name="sifter33lg" id out so it validates it wont work using id="sifter33lg"
    so if you can fix that instead that would be cool too.

    In the code below I repaced the document.all with document.getElementById so you dont see document.all, it wasnt supported in firefox etc so I changed to getelementbyid method.

    Is there a javascript replacement for the onclick="document.sifter33lg.src= part of the code I am pretty new to this part of it and was wondering if there was a javascript command like the onswap or getimg or something it shouldbe simple for someone out there. otherwise I think its pretty lame that you can do it and validate xhtml 1.0 and you cant replicate it using javascript.



    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    
    </head>
    
    <body>
    <table width="500"  border="0" cellpadding="0" cellspacing="0" id="picbox">
      <tr>
        <td width="100" height="75"><a  href='http://www.sifterbox.com/images/33-1-400.jpg' onclick="document.sifter33lg.src='http://www.sifterbox.com/images/33-1-400.jpg'; 
     document.getElementById('sifter33xl').href='http://www.sifterbox.com/images/33-1-720.jpg'; return false;"> <img src='http://www.sifterbox.com/images/33-1-100.jpg' alt="111" /></a></td>
        <td rowspan="4"><a href='http://www.sifterbox.com/images/33-1-720.jpg'  name="sifter33xl" id="sifter33xl"> <img src='http://www.sifterbox.com/images/33-1-400.jpg' alt="bb" name="sifter33lg" id="sifter33lg"/></a></td>
      </tr>
      <tr>
        <td width="100" height="75"><a  href='http://www.sifterbox.com/images/33-2-400.jpg' onclick="document.sifter33lg.src='http://www.sifterbox.com/images/33-2-400.jpg'; 
     document.getElementById('sifter33xl').href='http://www.sifterbox.com/images/33-2-720.jpg'; return false;"> <img src='http://www.sifterbox.com/images/33-2-100.jpg' alt="222" /></a></td>
      </tr>
      <tr>
        <td width="100" height="75"><a  href='http://www.sifterbox.com/images/33-3-400.jpg' onclick="document.sifter33lg.src='http://www.sifterbox.com/images/33-3-400.jpg'; 
     document.getElementById('sifter33xl').href='http://www.sifterbox.com/images/33-3-720.jpg'; return false;"> <img src='http://www.sifterbox.com/images/33-3-100.jpg' alt="333" /></a></td>
      </tr>
      <tr>
        <td width="100" height="75"><a  href='http://www.sifterbox.com/images/33-4-400.jpg' onclick="document.sifter33lg.src='http://www.sifterbox.com/images/33-4-400.jpg'; 
     document.getElementById('sifter33xl').href='http://www.sifterbox.com/images/33-4-720.jpg'; return false;"> <img src='http://www.sifterbox.com/images/33-4-100.jpg' alt="444" /></a></td>
      </tr>
    </table>
    </body>
    </html>


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
  •