SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast gunbound_boy's Avatar
    Join Date
    Oct 2004
    Location
    Singapore
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problems with MM_swapImage for some browsers

    Hihi,

    I tried using this function to swap images by using onClick but some older browsers are unable to show the picture after clicking. I tried this function at home with my XP home, IE 6 and it works nicely but when i tried it in school using an IE 5 browser it doesn't work...

    here is my code:
    <a href="javascript:;" class="style71" onClick="MM_swapImage('Image20','','Shirts%20Archive/blank%20shirt.jpg',1)" >

    is it something wrong somewhere in my code?
    SaintVida.com
    An online clothing store for the image conscious
    men and women of the modern era.

    http://www.saintvida.com.

  2. #2
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well Id really have to see the code BUT the use of image names with spaces in them can reak havoc in ANY code.. I see you have this:

    onClick="MM_swapImage('Image20','','Shirts%20Archive/blank%20shirt.jpg',1)"

    that %20 means a space in the name ....... not good in any server environment! (except windows of course)

    post some more code and we'll see what we can do!

  3. #3
    SitePoint Enthusiast gunbound_boy's Avatar
    Join Date
    Oct 2004
    Location
    Singapore
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thks for the reply, but I dont understand why it works on the browser on my laptop and not for others. Sry, but I am just a self-taught web designer so I just try things out here and there. If it works, then good. If not, then I look for help (like now :>)

    Okay, I have made a copy of the page on a test server.
    The link is http://www.saintvida.com/problem.htm

    It works perfectly fine for mi now. But the problem happens only for older browsers. I haven't tried with other browsers like Firefox though.

    I dont think its the way I name the files, cos there are some files that I name with simple names that also have the same problem.

    Thks.

    Weiming.
    SaintVida.com
    An online clothing store for the image conscious
    men and women of the modern era.

    http://www.saintvida.com.

  4. #4
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Your page needs a heavy clean up

    Like DC Dalton mentioned get the spaces out of your links
    Use lowercase only in links for your one comfort

    Shirts%20Archive no
    Shirts Archive no
    Shirts-Archive yes
    ShirtsArchive yes
    shirts-archive better
    shirtsarchive best?

    There is a preload of images in your body tag and first td tag of
    Table??

    On validating your page it runs up to 213 errors some big oneís
    Try to validate it

  5. #5
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To fix that space problem just do a universal find an replace to something like shirts_archive/ and then make sure you change you folders name accordingly ..

    The extra onload all4 is talking about is here:

    Code:
    <td height="252" colspan="3" valign="top" bordercolor="#999999"><img src="Shirts%20Archive/American.jpg" name="Image10" width="250" height="250" border="0" id="Image10" onload="MM_preloadImages('Shirts%20Archive/American.jpg','Shirts%20Archive/Anchor.jpg','Shirts%20Archive/Pelican.jpg','Shirts%20Archive/Bird.jpg','Shirts%20Archive/Hollywood.jpg','Shirts%20Archive/Cursive.jpg')"></td>
    that going to confuse the heck out of most browsers as there is no onload event for an image tag. Onload can only be applied to the body tag, which you already have coded. Im only getting 5 errors on validation now so Im assuming you have worked on it.. fix those things and if you atill have a problem let us know..

  6. #6
    SitePoint Enthusiast gunbound_boy's Avatar
    Join Date
    Oct 2004
    Location
    Singapore
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thks to all of you!

    i will try your suggestions and see if it works when i go to school tml...

    cheers
    SaintVida.com
    An online clothing store for the image conscious
    men and women of the modern era.

    http://www.saintvida.com.

  7. #7
    SitePoint Enthusiast gunbound_boy's Avatar
    Join Date
    Oct 2004
    Location
    Singapore
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello, I'm back...and sadly with the same problem.

    I dont really understand why. I realise that my school uses win XP as well and has IE6, exactly the same as what I have at home. How is it that I am able to do the swapping at home but not here in school (where I am now).

    I was wondering could it be that the MM_swapImage can only be used with an onMouseover call and not an onMouseclick command. I realise the other images that I coded with the onMouseover command dont have the same problem.

    Maybe I should just change all of it to onMouseover to save the hassle.

    Pls advise.
    Thks.

    Weiming
    SaintVida.com
    An online clothing store for the image conscious
    men and women of the modern era.

    http://www.saintvida.com.

  8. #8
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Its a little better now but you have to look at the HTML CSS code

    colspan="3" ? in your first td tag

    <a href="javascript:;" maybe better <a href="##Ē

    <a href="javascript:;" class="style65" style65 is for text and thatís overwritten by your next
    CSS class in the following span tag, so itís useless

    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    Why do you need these long lines of space code??

    spanclass Oops! Must be: span class

    <span class="style23"></span></a> empty? Why, empty its useless its needs Text or an IMG

    <a href="http://www.saintvida.com/polos_productID=01.htm" class="style65" onmouseover="MM_swapImage('Image10','','shirts/American.jpg',1)"><span class="style23"></span></a>
    so there is no onmouseover swapimage?

    I use Homeside as HTML editor and misuse Dreamweaver only when I have to
    Maybe its better to learn a little bit of HTML

    I validate with CSE HTML Validator http://www.htmlvalidator.com/

    Unfortunately this is all software where you have to pay for

    Final validating is with the W3Corg validatorís, use FireFox and Web Developer menu Tool bar its free and very good and ezy to use.

    I try to work your page later if I have a little time.

    <div align="left"> </div> Oops found in table

    OK NEW CODE

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Test Problem 12345 12345 12345 12345</title><style type="text/css">
    <!--
    td,a,.style64,.style67{
    	font-family: Georgia, "Times New Roman", Times, serif;
    	color: #000033;
    	font-size: 12px;
    	font-style: normal;
    	line-height: normal;
    	font-weight: normal;
    	background-color: #FFFFFF;
    }
    .style67{color:#996600;font-weight:bold;}
    -->
    </style>
    <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('shirts/American.jpg','shirts/Anchor.jpg','shirts/Pelican.jpg','shirts/Bird.jpg','shirts/Hollywood.jpg','shirts/Cursive.jpg')">
    <table border="0">
    <tbody>
    	<tr>
    		<td><img src="shirts/American.jpg" name="Image10" id="Image10" border="0" height="250" width="250" alt="altxxx"></td>
    		<td valign="top">
    		<p class="style67">Polos</p>
    		-------------------------------------------<br>
    		<a href="##" onClick="MM_swapImage('Image10','','shirts/American.jpg',1)">
    		Stars and Stripes</a><br>
    		-------------------------------------------<br>
    		<a href="##" onclick="MM_swapImage('Image10','','shirts/Anchor.jpg',1)">
    		AnchorDown</a><br>
    		-------------------------------------------<br>
    		<a href="##" onclick="MM_swapImage('Image10','','shirts/Pelican.jpg',1)">
    		Pelican Brief</a><br>
    		-------------------------------------------<br>
    		<a href="##" onclick="MM_swapImage('Image10','','shirts/Bird.jpg',1)">
    		Bird's Eye View</a><br>
    		-------------------------------------------<br>
    		<a href="##" onclick="MM_swapImage('Image10','','shirts/Hollywood.jpg',1)">
    		Retro Hollywood</a><br>
    		-------------------------------------------<br>
    		<a href="##" onclick="MM_swapImage('Image10','','shirts/Cursive.jpg',1)">
    		Classic Saint Vida</a><br>
    		-------------------------------------------</td>
    		
    		
    		<td valign="top"><p class="style67">Ringer Tees </p>
    		-------------------------------------------<br>
    		<a href="##" onclick="MM_swapImage('Image10','','shirts/American.jpg',1)">
    		Stars and Stripe</a><br>
    		-------------------------------------------<br>
    		<a href="##" onclick="MM_swapImage('Image10','','shirts/Anchor.jpg',1)">
    		Anchor Down</a><br>
    		-------------------------------------------<br>
    		<a href="##" onclick="MM_swapImage('Image10','','shirts/Pelican.jpg',1)">
    		Pelican Brief</a><br>
    		-------------------------------------------<br>
    		<a href="##" onclick="MM_swapImage('Image10','','shirts/Bird.jpg',1)">
    		Bird's Eye View</a><br>
    		-------------------------------------------<br>
    		<a href="##" onclick="MM_swapImage('Image10','','shirts/Hollywood.jpg',1)">
    		Retro Hollywood</a><br>
    		-------------------------------------------<br>
    		<a href="##" onclick="MM_swapImage('Image10','','shirts/Cursive.jpg',1)">
    		Classic Saint Vida</a><br>
    		-------------------------------------------</td>
    		
    		
    		<td valign="top"><p class="style67">Short Sleeve Tees</p>
    		-------------------------------------------<br>
    		
    		<a href="##" onclick="MM_swapImage('Image10','','shirts/American.jpg',1)">
    		Stars and Stripes</a><br>
    		-------------------------------------------<br>
    		<a href="##" onclick="MM_swapImage('Image10','','shirts/Anchor.jpg',1)">
    		Anchor Down</a><br>
    		-------------------------------------------<br>
    		<a href="##" onclick="MM_swapImage('Image10','','shirts/Pelican.jpg',1)">
    		Pelican Brief</a><br>
    		-------------------------------------------<br>
    		<a href="##" onclick="MM_swapImage('Image10','','shirts/Bird.jpg',1)">
    		Bird's Eye View</a><br>
    		-------------------------------------------<br>
    		<a href="##" onclick="MM_swapImage('Image10','','shirts/Hollywood.jpg',1)">
    		Retro Hollywood</a><br>
    		-------------------------------------------<br>
    		<a href="##" onclick="MM_swapImage('Image10','','shirts/Cursive.jpg',1)">
    		Classic Saint Vida</a><br>
    		-------------------------------------------</td>
    	</tr>
    </tbody>
    </table>
    </body>
    </html>
    Last edited by all4nerds; Mar 8, 2005 at 08:16.

  9. #9
    SitePoint Enthusiast gunbound_boy's Avatar
    Join Date
    Oct 2004
    Location
    Singapore
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey, thks man...really appreciate your help.

    Looks like I have really relied too much on dreamweaver.

    I thought dreamweaver would be able to handle the programming for me while I just create my site based on my creativity.

    Didn't realise the coding made a lot of difference.

    Guess I learnt something new today. Going to go figure things out. Hopefully I will find a better soln.

    Once again, thks man.

    Cheers,

    Weiming
    SaintVida.com
    An online clothing store for the image conscious
    men and women of the modern era.

    http://www.saintvida.com.


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
  •