Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Change Images By Clicking On Links

    How do I change an image on a web page by clicking a numbered link below it?

    Here is the address to the preview:

    http://www.freewebsitetemplates.com/preview/template19/

    I am referring to the boxes numbered 1-5. I want to be able to click each box and have a different image appear in the same place. I've tried different codes for days and can't get it to change the images. I'm inexperienced with HTML, CSS and Javascript. Any help would be much appreciated. Thank you.

    Below is the code for the index.htm page and also the CSS.

    <!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">

    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
    <meta http-equiv="Content-Style-Type" content="text/css" />

    <title>
    Free Website Templates
    </title>

    <link href="style.css" rel="stylesheet" type="text/css" />

    </head>

    <body>

    <div id="page_header">
    <div id="logo">
    <h1><span>Model Agency</span></h1>
    </div>

    <div id="page_menu">
    <ul>
    <li><a href="http://www.freewebsitetemplates.com/"><img src="images/menu_home.gif" width="37" height="7" alt="HOME" /></a></li>
    <li><a href="http://www.freewebsitetemplates.com/"><img src="images/menu_aboutus.gif" width="69" height="7" alt="ABOUT US" /></a></li>
    <li><a href="http://www.freewebsitetemplates.com/"><img src="images/menu_portfolio.gif" width="74" height="7" alt="PORTFOLIO" /></a></li>
    <li><a href="http://www.freewebsitetemplates.com/"><img src="images/menu_gallery.gif" width="62" height="7" alt="GALLERY" /></a></li>
    <li><a href="http://www.freewebsitetemplates.com/"><img src="images/menu_contacts.gif" width="72" height="7" alt="CONTACTS" /></a></li>
    </ul>
    </div>

    <div class="clearthis">.</div>
    </div>

    <div id="page_bodybox">
    <div id="leftborder">
    <div id="top">&nbsp;</div>
    <div id="bot">&nbsp;</div>
    </div>


    <div id="bodyborder">
    <div id="page_content">

    <!-- BEGIN LEFT COLUMN -->

    <div id="leftcol">

    <h2><span>Optional Header</span></h2>

    <span>
    <img src="images/main_img.gif" width="300" height="399" alt="Model Name" />
    </span>


    <div id="nav">
    <b><span><a href="http://www.freewebsitetemplates.com/">1</a></span></b>
    <b><span><a href="http://www.freewebsitetemplates.com/">2</a></span></b>
    <b><span><a href="http://www.freewebsitetemplates.com/">3</a></span></b>
    <b><span><a href="http://www.freewebsitetemplates.com/">4</a></span></b>
    <b><span><a href="http://www.freewebsitetemplates.com/">5</a></span></b>
    <b><span><a href="http://www.freewebsitetemplates.com/">6</a></span></b>

    <div class="clearthis">.</div>
    </div>

    </div>

    <!--// END LEFT COLUMN -->


    <!-- BEGIN MAIN COLUMN -->

    <div id="maincol">

    <h3>About the gallery</h3>

    <p>
    This is a demo text. It will be replaced by the original. This is a demo text. It will be replaced by the original. This is a demo text. It will be replaced by the original. This is a demo text. It will be replaced by the original. This is a demo text. It will be replaced by the original.
    </p>

    <p>
    This is a demo text. It will be replaced by the original. This is a demo text. It will be replaced by the original. This is a demo text. It will be replaced by the original. This is a demo text. It will be replaced by the original. This is a demo text. It will be replaced by the original.
    </p>


    <h3>Special features</h3>

    <ul>
    <li><a href="http://www.freewebsitetemplates.com/">This is a demo text.</a></li>
    <li><a href="http://www.freewebsitetemplates.com/">You can replace it by your own text.</a></li>
    <li><a href="http://www.freewebsitetemplates.com/">Some links can go here.</a></li>
    <li><a href="http://www.freewebsitetemplates.com/">This text can be replaced.</a></li>
    <li><a href="http://www.freewebsitetemplates.com/">Put your content here by replacing.</a></li>
    </ul>

    <div id="maincol_nav">

    <h3><span>Navigate</span></h3>

    <a href="http://www.freewebsitetemplates.com/">Prev</a>
    <a href="http://www.freewebsitetemplates.com/"><img src="images/arrow_left.gif" width="3" height="5" alt="Previous" /></a>

    &nbsp;

    <a href="http://www.freewebsitetemplates.com/">3</a>
    |
    <a href="http://www.freewebsitetemplates.com/">4</a>

    &nbsp;

    <a href="http://www.freewebsitetemplates.com/"><img src="images/arrow_right.gif" width="3" height="5" alt="Next" /></a>
    <a href="http://www.freewebsitetemplates.com/">Next</a>
    </div>

    <div class="clearthis">.</div>

    </div>

    <!--// END MAIN COLUMN -->


    <!-- BEGIN RIGHT COLUMN -->

    <div id="rightcol">
    <h2><span>Optional Header</span></h2>

    <div id="rightcol_top">
    <div class="arrow">
    <a href="http://www.freewebsitetemplates.com/"><img src="images/arrow_up.gif" width="5" height="3" alt="Up" /></a>
    </div>
    </div>

    <div id="rightcol_main">

    <div class="model_thumbnail">
    <a href="http://www.freewebsitetemplates.com/"><img src="images/model01.gif" width="130" height="107" alt="Model Name" /></a>
    </div>

    <div class="model_nametag">
    <a href="http://www.freewebsitetemplates.com/">Sophia Jones</a>
    </div>


    <div class="model_thumbnail">
    <a href="http://www.freewebsitetemplates.com/"><img src="images/model02.gif" width="130" height="107" alt="Model Name" /></a>
    </div>

    <div class="model_nametag">
    <a href="http://www.freewebsitetemplates.com/">Anna Stone</a>
    </div>


    <div class="model_thumbnail">
    <a href="http://www.freewebsitetemplates.com/"><img src="images/model03.gif" width="130" height="107" alt="Model Name" /></a>
    </div>

    <div class="model_nametag_bot">
    <a href="http://www.freewebsitetemplates.com/">Rick Stuart</a>
    </div>

    </div>

    <div id="rightcol_bot">
    <div class="arrow">
    <a href="http://www.freewebsitetemplates.com/"><img src="images/arrow_down.gif" width="5" height="3" alt="Down" /></a>
    </div>
    </div>
    </div>

    <!--// END RIGHT COLUMN -->


    <div class="clearthis">.</div>

    </div>
    </div>

    <div class="clearthis">.</div>
    </div>
    <!-- Do not remove read http://www.freewebsitetemplates.com/termsofuse/ -->
    <div id="page_footer">
    <br />
    Powered by <a href="http://www.freewebsitetemplates.com">Free Website Templates</a>
    </div>

    </body>
    </html>

    -----------------CSS------------------

    * {
    margin : 0px;
    padding : 0px;
    }

    body {
    background-color : #2F2F2E;
    color : #CECEC2;
    text-align : center;
    font-family : tahoma, sans-serif;
    font-size : 9px;
    }


    /* PAGE HEADER & MENU */

    #page_header {
    margin : 40px auto 0px;
    width : 689px;
    height : 24px;
    }

    #page_header #logo {
    width : 200px;
    height : 24px;
    background : url('images/companylogo.gif') no-repeat 20px 0px;
    float : left;
    }

    #page_menu {
    padding-top : 10px;
    width : 489px;
    height : 7px;
    float : left;
    }

    #page_menu ul {
    margin-left : 50px;
    height : 7px;
    list-style-position: inside;
    list-style-image: url('none');
    }

    #page_menu li {
    padding-left : 20px;
    height : 7px;
    float : left;
    list-style-position: inside;
    list-style-image: url('none');
    }


    /* PAGE BODY */

    #page_bodybox {
    margin : 0px auto;
    width : 689px;
    height : 430px;
    background-color : #A15B2E;
    }

    #leftborder {
    width : 14px;
    height : 430px;
    background : url('images/box_left.gif') repeat-y 0px 0px;
    float : left;
    }

    #leftborder #top {
    width : 14px;
    height : 15px;
    background : url('images/box_topleft.gif') no-repeat left top;
    overflow : hidden;
    }

    #leftborder #bot {
    width : 14px;
    height : 415px;
    background : url('images/box_botleft.gif') no-repeat left bottom;
    overflow : hidden;
    }

    #bodyborder {
    padding : 14px 11px 14px 0px;
    border-top : #7F624E 1px solid;
    border-bottom : #7F624E 1px solid;
    border-right : #7F624E 1px solid;
    float : left;
    }

    #page_content {
    width : 663px;
    height : 400px;
    overflow : hidden;
    }


    /* CONTENT LEFT COLUMN */

    #leftcol {
    width : 300px;
    height : 400px;
    background : url('images/main_img.gif') no-repeat 0px 0px;
    float : left;
    text-align : right;
    font-weight : bold;
    }

    #leftcol a {
    color : #E2E0E0;
    text-decoration : none;
    line-height : 13px;
    }

    #leftcol #nav {
    margin-top : 379px;
    margin-right : 7px;
    float : right;
    }

    #leftcol #nav span {
    display : block;
    margin : 0px 1px 0px 2px;
    }

    #leftcol #nav b {
    margin-left : 1px;
    border : #CCCCCC 1px solid;
    display : block;
    float : left;
    }


    /* CONTENT CENTER COLUMN */

    #maincol {
    margin : 0px 12px 0px 10px;
    width : 190px;
    height : 400px;
    float: left;
    overflow : hidden;
    text-align : justify;
    }

    #maincol h2, #maincol h3 {
    font-size : 12px;
    margin-bottom : 15px;
    }

    #maincol p {
    padding-top : 0px;
    padding-bottom : 19px;
    }


    #maincol ul {
    padding-top : 2px;
    padding-bottom : 10px;
    display : block;
    }

    #maincol li {
    padding-left : 8px;
    padding-bottom : 6px;
    background : url('images/bullet_arrow.gif') no-repeat 0px 2px;
    font-weight : bold;
    display : block;
    }

    #maincol_nav {
    margin-top : 8px;
    color : #2F2F2E;
    text-align : center;
    }

    #maincol_nav a {
    color : #2F2F2E;
    text-decoration : none;
    font-weight : bold;
    }

    #maincol_nav a:hover {
    color : #3D3D3D;
    }


    /* CONTENT RIGHT COLUMN */

    #rightcol {
    width : 148px;
    height : 400px;
    background-color : #333331;
    float: left;
    }

    #rightcol_top {
    width : 148px;
    height : 7px;
    display : block;
    background : url('images/rightcol_top.gif') #333331 no-repeat 0px 0px;
    overflow : hidden;
    }

    #rightcol_bot {
    width : 148px;
    height : 7px;
    display : block;
    background : url('images/rightcol_bot.gif') #333331 no-repeat 0px 0px;
    }

    #rightcol_main {
    margin : 0px 9px;
    width : 130px;
    height : 386px;
    overflow : hidden;
    }

    #rightcol .arrow a {
    margin-top : 2px;
    display : block;
    font-size : 3px;
    line-height : 1px;
    height : 3px;
    }

    .model_thumbnail {
    margin-bottom : 1px;
    width : 130px;
    height : 107px;
    display : block;
    overflow : hidden;
    }

    .model_nametag {
    margin-bottom : 5px;
    border : #60605D 1px solid;
    color : #90908E;
    }

    .model_nametag a {
    display : block;
    padding-top : 2px;
    padding-bottom : 2px;
    width : 128px;
    color : #90908E;
    font-weight : bold;
    text-decoration : none;
    }

    .model_nametag_bot {
    width : 130px;
    height : 17px;
    background : url('images/rightcol_tagbg.gif') no-repeat 0px 0px;
    color : #90908E;
    }

    .model_nametag_bot a {
    display : block;
    padding-top : 3px;
    padding-bottom : 2px;
    width : 128px;
    color : #90908E;
    font-weight : bold;
    text-decoration : none;
    }


    /* PAGE FOOTER */

    #page_footer {
    margin : 2px auto 0px;
    width : 689px;
    height : 20px;
    color : #6C6C69;
    font-weight : bold;
    }

    #page_footer a {
    color : #6C6C69;
    text-decoration : none;
    }

    #page_footer a:hover {
    text-decoration : none;
    color : #797977;
    }



    a {
    color : #D0D0C9;
    }

    a:hover {
    color : #E9E9E5;
    }

    span {
    display : none;
    }

    img {
    border: 0px;
    }

    p {
    text-align : justify;
    line-height : 13px;
    }

    ul {
    list-style-type: none;
    display : block;
    }

    li {
    text-indent: 0px;
    list-style-type: none;
    display : block;
    }

    .clearthis {
    margin : 0px;
    display : none;
    clear : both;
    float : none;
    font-size : 1px;
    line-height : 0px;
    }
    Last edited by o87rT63; 12-02-2009 at 02:49 PM.


 

Posting Permissions

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