View Single Post

Paramiliar · #6 (**permalink**) Jul 28th, 2007, 11:09

ah its because i missread the code this is a 2 second fix The DIV was missing the ID tag, i saw the CLASS tag instead (btw you really should incase all HTML attributes in either "" or '')

here is the full code

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <meta name="author" content="Jonathan Mortimer" />
    <meta name="keywords" content="graphic design, photography, photograph, gallery, wildlife" />
    <meta name="description" content="Wildlife Photography in Yorkshire" />

    <title>Nature Photography in Yorkshire by Jonathan Mortimer</title>
    
    <style type="text/css" media="all">
        @import "styles/stylesheet_nature.css";
    </style>
    

    <script type="text/javascript" langauge="Javascript">
        function thefunction(NEWTEXT, NEWIMAGE) {
             document.getElementById("thecontainer").innerHTML = '<img name="mainimage" src="'+NEWIMAGE+'" alt="Main image" style="background-color: rgb(221, 221, 221);" height="450" width="600"><p id="description">'+NEWTEXT+'</p>';
        }
    </script>

    
</head>

<body>
<div id="shadow_outer">

<div id="container">
 <div id="header">
     
    <div id="headings">
        <h1>Nature photography in Yorkshire</h1>
         <h2>by Jonathan Mortimer</h2>
     </div>
 </div>


 
 <div id="leftarea">
         
       <div id="links">
             <a href="insects.html">Insects</a>
             <a href="beasties.html">Beasties</a>
             <a href="fauna.html">Fauna</a>
             <a href="scenery.html">Scenery</a>
             <a href="ponds.html">Ponds</a>
               

       </div>

      <div class="imagecontainer" id="thecontainer">
        <img name="mainimage" src="images/tortoiseshell.jpg" width="600" height="450" alt="Main image" style="background-color: #dddddd" />
          <p id="description">Tortoise Shell butterfly</p>
      </div>

 </div>
 
 <div id="rightarea">
       <div class="scroll">  
                <!-- list of links begins here. There will be no more than 8 links per page -->
                <div class="thumbnails" id="swap">
                    <div id="thumbnails_border">
                    <a href="javascript:void(0);" title="Tortoise Shell butterfly" onclick="thefunction('Tortoise Shell butterfly', 'images/toroiseshell.jpg');">
                        <img name="tortoiseshell" src="images/tb_tortoiseshell.jpg" width="100" height="75" border="none" alt="Butterfly"/>
                    </a>
                    </div>
                    
                    <div id="thumbnails_border">
                    <a href="javascript:void(0);" title="Hawker dragonfly" onclick="thefunction('Hawker dragonfly', 'images/hawker_leaves.jpg');">
                        <img name="hawker" src="images/tb_hawker_leaves.jpg" width="100" height="75" border="none" alt="Dragonfly"/>
                    </a>
                    </div>
                    
                    <div id="thumbnails_border">
                    <a title="Tortoise Shell butterfly" onmousedown="document.mainimage.src='images/tortoiseshell.jpg'">
                        <img name="tortoiseshell" src="images/tb_tortoiseshell.jpg" width="100" height="75" border="none" alt="Tortoise Shell butterfly"/>
                    </a>
                    </div>
                    
                    <div id="thumbnails_border">
                    <a title="Tortoise Shell butterfly" onmousedown="document.mainimage.src='images/tortoiseshell.jpg'">
                        <img name="tortoiseshell" src="images/tb_tortoiseshell.jpg" width="100" height="75" border="none" alt="Tortoise Shell butterfly"/>
                    </a>
                    </div>
                    
                    <div id="thumbnails_border">
                    <a title="Tortoise Shell butterfly" onmousedown="document.mainimage.src='images/tortoiseshell.jpg'">
                        <img name="hawker" src="images/tb_hawker_leaves.jpg" width="100" height="75" border="none" alt="Tortoise Shell butterfly"/>
                    </a>
                    </div>
                    
                    <div id="thumbnails_border">
                    <a title="Tortoise Shell butterfly" onmousedown="document.mainimage.src='images/tortoiseshell.jpg'">
                        <img name="hawker" src="images/tb_hawker_leaves.jpg" width="100" height="75" border="none" alt="Tortoise Shell butterfly"/>
                    </a>
                    </div>
                    
                    <div id="thumbnails_border">
                    <a title="Tortoise Shell butterfly" onmousedown="document.mainimage.src='images/tortoiseshell.jpg'">
                        <img name="hawker" src="images/tb_hawker_leaves.jpg" width="100" height="75" border="none" alt="Tortoise Shell butterfly"/>
                    </a>
                    </div>
               </div>  
        </div>                 

 </div>
 
</div><!--end container div -->

</div>

</body>