www.webdeveloper.com
Results 1 to 5 of 5

Thread: [RESOLVED] change default image

  1. #1
    Join Date
    Nov 2011
    Posts
    145

    resolved [RESOLVED] change default image

    I copied this gallery code and I need to change there default image to one of mine in my image folder. How can this be done. I code in question is in red.


    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=utf-8" />
    <link rel="stylesheet" href="nav_files/css3menu1/style.css" type="text/css" />
    <title>Patio's</title>
    
    <style type="text/css">
    body {
    	background: #00546b;
    	margin-top: 20px;
    }
    h2 {
    	color: #eee;
    	font-family: Verdana;
    }
    .gallery {
    	width: 816px;
    	margin: 0 auto;
    	text-align: center;
    }
    #scroll_box {
    	width: 816px;
    	margin: 25px 0;
    	overflow: auto;
    }
    .thumbnails {width: 2520px;}
    .thumbnails img {
    	height: 80px;
    	border: 4px solid #000;
    	padding: 1px;
    	margin: 0 10px 10px 0;
    }
    .thumbnails img:hover {
    	border: 4px solid #00ccff;
    	cursor:pointer;
    }
    .preview img {
    	border: 4px solid #000;
    	padding: 1px;
    	height: 500px;
    }
    </style>
    
    
    
    <script type="text/javascript">
      var GB_ROOT_DIR = "./patio/";
    </script>
    <script type="text/javascript" src="./patio/ajs.js"></script>
    <script type="text/javascript" src="./patio/ajs_fx.js"></script>
    <script type="text/javascript" src="./patio/gb_scripts.js"></script>
    <script type="text/javascript" src="./patio/iwebalbumpics.js"></script>
    <link href="./patio/gb_styles.css" rel="stylesheet" type="text/css" />
    <link href="./patio/style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    
    <table width="770" border="0" align="center" cellpadding="4" cellspacing="4">
      <tr>
        <td width="750"><img src="images/new banner.gif" width="755" height="173" alt="banner" /></td>
      </tr>
      <tr>
        <td><div align="center"><center><ul id="css3menu1" class="topmenu">
    	<li class="topfirst"><a href="index.html" title="Home" style="width:51px;height:16px;line-height:16px;">Home</a></li>
    	<li class="topmenu"><a style="width:159px;height:16px;line-height:16px;"><span>Interlocking stone </span></a>
    	<ul>
    		<li class="subfirst"><a href="retaining_walls.html" title="Retaining Walls">Retaining Walls</a></li>
    		<li><a href="sidewalks.html" title="Sidewalks">Sidewalks</a></li>
    		<li><a href="drive_ways.html" title="Driveways">Driveways</a></li>
            <li><a href="patio.html" title="Patio's">Patio's</a></li>
     
    	</ul>
    	</li>
    	<li class="topmenu"><a  style="width:114px;height:16px;line-height:16px;"><span>Landscaping</span></a>
    	<ul>
    		<li class="subfirst"><a href="boulders.html" title="Boulders">Boulders</a></li>
    		<li><a href="yard_leveling.html" title="Yard Levelling">Yard Levelling</a></li>
    		<li><a href="hauling.html" title="Hauling">Hauling</a></li>
            <li><a href="window_wells.html" title="Window Well & Foundation Dig">Window Well & Foundation Dig</a></li>
            
            
            
    	</ul>
    	</li>
    	<li class="topmenu"><a  style="width:89px;height:16px;line-height:16px;"><span>Demoliton</span></a>
    	<ul>
    		
             <li class="subfirst"><a href="step_demo.html" title="Step demo">Step Demo</a></li>
            <li><a href="commercial.html" title="Commercial Concrete Floors & excavation">Commercial Concrete Floors & excavation</a></li>
            <li><a href="driveway_demo.html" title="Driveway Demo">Driveway Demo</a></li>
            <li><a href="garage.html" title="Garages">Garages</a></li>
            <li><a href="interiorgutouts.html" title="Interior Gutouts">Interior Gutouts</a></li>
            <li><a href="specialty.html" title="Specialty">Specialty</a></li>
            
            
    	</ul>
    	</li>
    	<li class="topfirst"><a href="testimonials.html" title="Testimonials" style="width:114px;height:16px;line-height:16px;">Testimonials</a></li>
        <li class="topmenu"><a  style="width:96px;height:16px;line-height:16px;"><span>Contact us</span></a>
    	<ul>
    		
             <li class="subfirst"><a href="contactus.html" title="">Contact</a></li>
            <li><a href="about.html" title="About us">About us</a></li>
        
        
            
    	</ul>
    	</li>
        
    </ul></center>
    </div></td>
      </tr>
      
     
    </table>
    
    <div class="gallery">
            <h3>Patio</h3>
                <div id="scroll_box">
                    <div class="thumbnails"> 
    <img onmouseover="preview.src=img1.src" id="img1"img src="patio1/patio1.jpg" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=img2.src" id="img2"img src="patio1/patio2.jpg" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=img3.src" id="img3"img src="patio1/patio3.jpg" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=img4.src" id="img4"img src="patio1/patio4.jpg" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=img5.src" id="img5"img src="patio1/patio5.jpg" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=img6.src" id="img6"img src="patio1/patio6.jpg" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=img7.src" id="img7"img src="patio1/patio7.jpg" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=img8.src" id="img8"img src="patio1/patio8.jpg" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=img9.src" id="img9"img src="patio1/patio9.jpg" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=img10.src" id="img10"img src="patio1/patio10.jpg" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=img11.src" id="img11"img src="patio1/patio11.jpg" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=img12.src" id="img12"img src="patio1/patio12.jpg" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=img13.src" id="img13"img src="patio1/patio13.jpg" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=img14.src" id="img14"img src="patio1/patio14.jpg" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=img15.src" id="img15"img src="patio1/patio15.jpg" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=img16.src" id="img16"img src="patio1/patio16.jpg" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=img17.src" id="img17"img src="patio1/patio17.jpg" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=img18.src" id="img18"img src="patio1/patio18.jpg" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=img19.src" id="img19"img src="patio1/patio19.jpg" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=img20.src" id="img20"img src="patio1/patio20.jpg" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=img21.src" id="img21"img src="patio1/patio21.jpg" alt="Image Not Loaded"/>
                    <!--end .thumbnails--></div>
                <!--end scroll_box--></div>
            <div class="preview"> <img id="preview" src="http://bit.ly/2rz3hy" alt="No Image Loaded"/> </div>
        <!--end gallery--></div>
    
    <div>
    <center>
    <p>Copyright 2011 REN Hauling</p>
                      <h4>Website designed by <a href="http://www.cjwebconsulting.com" target="_blank">CJ Web Consulting</a>              </h4>
                  </center></div> 
    
    </body>
    </html>

  2. #2
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,143
    What image is it currently defaulting to?

  3. #3
    Join Date
    Nov 2011
    Posts
    145
    some blue image with a 7 in the middle. it has to do with this code. i tryed puting my own image but then my thumbnails don't work.


    Code:
    <div class="preview"> <img id="preview" src="http://bit.ly/2rz3hy" alt="No Image Loaded"/> </div>

  4. #4
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,143
    Do you have a live example?

  5. #5
    Join Date
    Nov 2011
    Posts
    145
    Here is an image. I want my first thumbnail to show. Not the big blue image. It ddisapeas when i hover over a thumbnail.
    Attached Images Attached Images

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles