1 Reply Latest reply on May 1, 2010 12:18 AM by martcol

    Images not showing/linking in browser, fine in Dreamweaver

    ImageAsylum

      HI all!

       

      I am trying to rebuild my website and a usually simple process - ie inserting images and setting background images - just isn't working!

      The images show up in Dreamweaver but not in the browser.

       

      I have added Lightbox CSS/galleries to the pages (which previous to that worked fine) and I'm thinking this has caused the problem, but I spent hours and hours getting Lightbox to work so I'm hoping I won't have to undo any of that...

       

      I have tried putting the images in sub folders, using different file types (jpg/giff etc) but nothing works.

       

      Please help, code pasted below - pages have not yet been uploaded as I haven't got that far yet.

       

      Note the div tag near the bottom named "next" has an image inserted in it - this is not showing.

       

      <!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>fASHION|I</title>

       

          <script src="js/prototype.js" type="text/javascript"></script>
          <script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
          <script src="js/lightbox.js" type="text/javascript"></script>
          <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

       

      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title></title>
      <style type="text/css">
      <!--
      body {
          background-color: #000000;
          body{ margin: 0; padding: 0; }
          <body onload="MM_preloadImages(‘/images/menu_on.gif’)…;initLightbox()">
      }
      #wrapper {
          background-repeat: no-repeat;
          background-position: center center;
          height: 900px;
          width: 1100px;
          margin-top: auto;
          margin-right: auto;
          margin-left: auto;
          font-family: "Century Gothic";
          font-size: medium;
          color: #CCCCCC;
          text-align: right;
      }
      #header {
          height: 200px;
          width: 1100px;
      }
      #navigation {
          height: 50px;
          width: 1100px;
          padding-top: 15px;
      }
      #content {
          height: 490px;
          width: 1040px;
          padding-right: 30px;
          padding-left: 30px;
          color: #FFFFFF;
          background-repeat: no-repeat;
          background-position: center center;
          padding-top: 30px;
          background-image: url(/images/bg.jpg);
      }
      #BottomNav {
          height: 85px;
          width: 1100px;
      }
      #next {
          float: right;
          height: 60px;
          width: 140px;
          padding-top: 25px;
          font-size: large;
          text-transform: lowercase;
          color: #990000;
          padding-right: 30px;
      }
      #previous {
          height: 60px;
          width: 100px;
          float: left;
          font-size: large;
          font-weight: normal;
          text-transform: lowercase;
          color: #990000;
          text-align: left;
          padding-top: 25px;
          padding-left: 30px;
      }
      -->
      </style>
      <script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>

       

      <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/next_roll.png')">
      <div id="wrapper">
        <div id="header"></div>
        <div id="navigation"></div>
        <div id="content">
        <table width="1000" border="0" cellpadding="20" cellspacing="0" bgcolor="#141414">
        <tr>
          <td width="133"><a href="images/fashion/Aimee_1.jpg
      " rel="lightbox[fashion]"title="Aimee models for portfolio shoot, 2009"><img src="images/fashion/Aimee_1TH.jpg" border="0"/></td>
          <td width="133"><a href="images/fashion/Aimee_2.jpg
      " rel="lightbox[fashion]"title="Aimee models for portfolio shoot, 2009"><img src="images/fashion/Aimee_2_TH.jpg" border="0"/></td>
          <td width="133"><a href="images/fashion/Hexotica_2.jpg " rel="lightbox[fashion]"title="Karen wears accessories by Hexotica"> <img src="images/fashion/Hexotica_2_TH.jpg  " border="0"/></td>
          <td width="133"><a href="images/fashion/Hexotica_4.jpg " rel="lightbox[fashion]"title="Lydia wears accessories by Hexotica">
      <img src="images/fashion/Hexotica_4_TH.jpg  " border="0"/></td>
          <td width="114"><a href="images/fashion/Hexotica_3.jpg " rel="lightbox[fashion]"title="Christine wears accessories by Hexotica"> <img src="images/fashion/Hexotica_3_TH.jpg  " border="0"/></td>
          <td width="114"><a href="images/fashion/cn2010_3.jpg" rel="lightbox[fashion]"title="Steve wears Z`Entity, Circa Nocturna Fashion show 2010"> <img src="images/fashion/cn2010_3_TH.jpg" border="0"/></td>
        </tr>
        <tr>
          <td><a href="images/fashion/Ivan.jpg" rel="lightbox[fashion]"title="Ivan wears Z~Entity"> <img src="images/fashion/Ivan_TH.jpg" border="0"/></td>
          <td><a href="images/fashion/Jenna.jpg" rel="lightbox[fashion]"title="Jenna wears Z~Entity"> <img src="images/fashion/Jenna_TH.jpg" border="0"/></td>
          <td><a href="images/fashion/Kimmi_1.jpg" rel="lightbox[fashion]"title="Kim wears Z~Entity"> <img src="images/fashion/Kimmi_1_TH.jpg" border="0"/></td>
          <td><a href="images/fashion/ElliZ.jpg" rel="lightbox[fashion]"title="May-Z  wears Z~Entity"> <img src="images/fashion/ElliZ_TH.jpg" border="0"/></td>
          <td><a href="images/fashion/Shelle.jpg" rel="lightbox[fashion]"title="Shelle  wears Z~Entity"> <img src="images/fashion/Shelle_TH.jpg" border="0"/></td>
          <td><a href="images/fashion/Jossie.jpg" rel="lightbox[fashion]"title="Jossie  wears Z~Entity"> <img src="images/fashion/Jossie_TH.jpg" border="0"/></td>
        </tr>
      </table>
      </div>
      <div id="BottomNav">
      <div id="next"><a href="fashion2.html"><img src="/images/next.png" border="0" id="Image1" onmouseover="MM_swapImage('Image1','','/images/next_roll.png',1)" onmouseout="MM_swapImgRestore()" /></a></div>
      </div>
      ©All images copyright Image Asylum Photography|ABN 68 054 503 054
      </div>
      </body>
      </html>

       

       


      Pweese help - Thanks

        • 1. Re: Images not showing/linking in browser, fine in Dreamweaver
          martcol Level 4

          ImageAsylum wrote:

           

          ...<style type="text/css">

          <!--
          body {
              background-color: #000000;
              body{ margin: 0; padding: 0; }
              <body onload="MM_preloadImages(‘/images/menu_on.gif’)…;initLightbox()">
          }
          #wrapper {
              background-repeat: no-repeat;
              background-position: center center;

          ...

          Unless is some technique I know absolutely nothing about (which is a possiblity), I don't think that should be there.

           

          I realise that you say you haven't uploade your page yet but, if you could upload a link, it would help.

           

          Martin