www.webdeveloper.com
Results 1 to 5 of 5

Thread: [RESOLVED] change default image

  1. #1
    Join Date
    Nov 2011
    Posts
    118

    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,111
    What image is it currently defaulting to?
    I'm always up for networking with fellow web professionals. Connect with me on LinkedIn if you like!

  3. #3
    Join Date
    Nov 2011
    Posts
    118
    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,111
    Do you have a live example?
    I'm always up for networking with fellow web professionals. Connect with me on LinkedIn if you like!

  5. #5
    Join Date
    Nov 2011
    Posts
    118
    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