SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,510
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Changing images without refresh of page!



    Do you see how the numbers 1, 2, 3, 4 are being displayed on the page? How can you make the images change everytime the user clicks a different number to display different images?
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  2. #2
    SitePoint Addict
    Join Date
    Apr 2007
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you are referring to the logic behind it you can have an array of numbers and corresponding image source data and depending on the element clicked on change the source of the image to that corresponding to the number.

  3. #3
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,510
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by semantic7 View Post
    If you are referring to the logic behind it you can have an array of numbers and corresponding image source data and depending on the element clicked on change the source of the image to that corresponding to the number.
    Something like this?
    Code JavaScript:
    var images = new_array();
         images[0]="image1.jpg";
         images[1]="image1.jpg";
         images[2]="image2.jpg";
         images[3]="image3.jpg";
         images[4]="image4.jpg";
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  4. #4
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Actually, an agile way of achieving the effect would be to create a CSS image sprite made up of the top number list and the four panels, then use an image map with an unordered list and hover links over the four number states. Then you could have it so the user rolls over the number and the anchor sets the background position to the sprite image to which they can click on whatever they want inside it. It would be effective, JavaScript free and would reduce the clicks needed

  5. #5
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,510
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AlexDawson View Post
    Actually, an agile way of achieving the effect would be to create a CSS image sprite made up of the top number list and the four panels, then use an image map with an unordered list and hover links over the four number states. Then you could have it so the user rolls over the number and the anchor sets the background position to the sprite image to which they can click on whatever they want inside it. It would be effective, JavaScript free and would reduce the clicks needed
    Hmm, that is a good idea. It can be produced with Javascript though. Could you show me the JS version Alex?
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  6. #6
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    BlakeAnthony, why would you want to use a JavaScript version when you could do it in clean CSS without a single bit of scripting? Web design is about being unobtrusive, you don't want to start getting your site depending on scripting for something unless there is no other choice, if not for speed reasons, for the 8-12% of people who have scripting turned off or unavailable. The method I showed you would give you the effect you wanted, no dependency on JS required

  7. #7
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It looks like you want to show/hide.

    Here is a jQuery example:

    Code HTML4Strict:
    <ul id="nav">
    	<li id="item1"><a href="#">Image set</a></li>
    	<li id="item2"><a href="#">Image set</a></li>
    </ul>
     
    <div id="main">
    	<div id="module1">1 set of images here</div>  
    	<div id="module2">2 set of images here</div> 
    </div>
    Code JavaScript:
    $(function() {    
    	$("#nav li a").click(function() {
    		var item = $(this).attr("id");
    		var replace = "#" + item.replace("item","module");
    		$(replace).show();
    		$("#main div").not(replace).hide();
     
    		return false;
    	});
    });

  8. #8
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Also, you can add on to this by passing in an active state for highlighting the numbers.

  9. #9
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,510
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cooper.semantics View Post
    It looks like you want to show/hide.

    Here is a jQuery example:

    Code HTML4Strict:
    <ul id="nav">
        <li id="item1"><a href="#">Image set</a></li>
        <li id="item2"><a href="#">Image set</a></li>
    </ul>
     
    <div id="main">
        <div id="module1">1 set of images here</div>  
        <div id="module2">2 set of images here</div> 
    </div>
    Code JavaScript:
    $(function() {    
        $("#nav li a").click(function() {
            var item = $(this).attr("id");
            var replace = "#" + item.replace("item","module");
            $(replace).show();
            $("#main div").not(replace).hide();
     
            return false;
        });
    });
    Thanks Raffles - could you help me implement this? Im not quite sure what to do



    Code HTML4Strict:
    <!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" />
    <title>Untitled Document</title>
    <script type="text/javascript">
     
    $(function() {    
        $("#nav li a").click(function() {
            var item = $(this).attr("id");
            var replace = "#" + item.replace("item","module");
            $(replace).show();
            $("#main div").not(replace).hide();
     
            return false;
        });
    });
     
     
     
     
     
    </script>
    <style type="text/css">
    *{margin:0; padding:0;}
     
    /* GLOBAL RESET STYLE RULES */
    html, body, a, abbr, acronym, address, area, b, bdo, big, blockquote, button, caption, cite, code,
        col, colgroup, dd, del, dfn, div, dl, dt, em, fieldset, form, h1, h2, h3, h4, h5, h6, hr, i, img,
        ins, kbd, label, legend, li, map, object, ol, p, param, pre, q, samp, small, span, strong, sub,
        sup, table, tbody, td, textarea, tfoot, th, thead, tr, tt, ul, var { vertical-align: baseline; }
     
    body {
        color: #111111;
        font-size: 75%;
        font-size-adjust: none;
        font-stretch: normal;
        font-style: normal;
        font-variant: normal;
        font-weight: normal;
        line-height: 1.5;
        background: #fff none repeat scroll 0 0;
        font-family: verdana,arial,helvatica,sans-seriff; }
    #container {
        width:938px;
        margin:0px auto; 
    }
    #header {
        width:938px;
        float:left;
        height:150px;
        background: #a3c3d8 url('http://cssispoetry.com/Coghill/images/header.png') no-repeat top center ;
        text-align:center; 
    }
    #header p {
        padding-left:40px; 
    }
    #header ul {
        width:258px;
        margin:107px 0 0 340px;
    }
    #header li {
        display:inline;
    }
    #header a {
        color:#9cb2bf;
        font-weight:bold;
        text-decoration:none;
    }
    #header a:hover {
        color:#ffffff;
    }
    #left_column {
        width:219px;
        height:755px;
        float:left;
        background:#e3edf3;
        border-right:4px solid #9cb2bf;
    }
    #main_column {
        width:498px;
        float:left;
    }
    #main_column img {
        margin:5px 0 0 55px;
    }
    #main_column p {
        margin-left:30px;
        padding:6px;
    }
    #inner_content_navigation ul {
        width:356px;
    }
    #inner_content_navigation li {
        display:inline;
        margin-left:34px;
        padding-left:5px;
    }
    #inner_content_navigation a {
        color:#407f90;
        text-decoration:none;
        font-size:1.1em;
    }
    #inner_content_navigation a:hover {
        color:#00546b;
    }
    .contact_us  {
        text-align:center;
    }
    #footer ul {
        width:475px;
    }
    #footer li {
        display:inline;
        padding:0 3px 0 3px;
        font-size:9px;
        list-style-type:none;
        padding-left:5px;
    }
    #right_column {
        width:209px;
        height:755px;
        float:right;
        background:#e3edf3;
        border-left:4px solid #9cb2bf;
    }
    #right_column img {
        margin:15px 0 0 30px;
    }
    #right_column h3 {
        color:#00546c;
        padding-left:8px;
    }
    #right_column p {
        padding-left:8px;
    }
    #right_column a {
     
        padding-left:10px;
        text-decoration:none;
    }
    #icons ul {
        width:90px;
    }
    #icons li, a {
        display:inline;
        margin-top:10px;
    }
    </style>
    </head>
    <body> <div id="container">
                         <div id="header">
     
                                <p>
                                       Seo garbage text up here
                                </p>
                                                  <ul>
                                <li>
                                       <a href="">Portfolio</a>
                                </li>
                                <li>
     
                                       <a href="">Info</a>
                                </li>
                                <li>
                                       <a href="">Blog</a>
                                </li>
                                <li>
                                       <a href="">Contact</a>
     
                                </li>
                         </ul><!--end of header_navigation-->
                         </div><!--end of header-->
     
     
                         <div id="left_column">
    <ul id="nav">
        <li id="item1"><a href="#">Image set</a></li>
        <li id="item2"><a href="#">Image set</a></li>
    </ul>
     
    <div id="main">
        <div id="module1">1 set of images here</div>  
        <div id="module2">2 set of images here</div> 
    </div>
                         </div>
                         <div id="main_column">
                                <ul id="inner_content_navigation">
                                       <li>
     
                                              <a href="">Cartoon &amp;
                                              Illustration</a>
                                       </li>
                                       <li>
                                              <a href="">Design</a>
                                       </li>
                                       <li>
     
                                              <a href="">Logos</a>
                                       </li>
                                       <li>
                                              <a href="">Sketches</a>
                                       </li>
                                </ul>
                                <!--end of inner_content_navigation-->
                                <img src="http://cssispoetry.com/Coghill/images/main_column_image.jpg" alt="" width="" height=
                                "" />
     
                                <p>
                                       This illustration from a
                                       commissioned tattoo artwork
                                       piece. The tattoo-ee has a
                                       nickname, Yeti, and wanted a
                                       tattoo of a Yeti driving the '74
                                       Corvette he owns. The main
                                       requirement: he wanted in the
                                       Big Daddy Roth/Odd Rods style -
                                       big crazy looking monstar
                                       driving a hot rod with the eyes
                                       buggin out of the skull, tongue
                                       hanging out.
                                </p>
                                <p>
                                       After working out many sketches
                                       to get the right look and feel
                                       of a true 'hot rod freak'
                                       monstar, I began to have visions
                                       of Yeti (the person) as a
                                       cartoon version of himself as
                                       the hot rod monstar. One sketch
                                       was all it took, and the drawing
                                       was scanned and finalzed in
                                       Adobe Illustrator. The final art
                                       is quite hilarious if you know
                                       Yeti.
                                </p>
                                <p class="contact_us">
                                       Need a  custom cartoon illustration?
                                       <a href="#">Contact me now!</a>
                                </p>
     
                                <ul id="footer">
                                <li> All artwork  George Coghill</li>
                                       <li>
                                              <a href="">Contact</a>
                                       </li>
                                       <li>
                                              <a href="">Portfolio</a>
     
                                       </li>
                                       <li>
                                              <a href="">Facebook</a>
                                       </li>
                                       <li>
                                              <a href="">Twitter</a>
                                       </li>
                                       <li>
     
                                              <a href="">Blog</a>
                                       </li>
                                       <li>
                                              <a href="">RSS</a>
                                       </li>
                                       <li>
                                              <a href="">Mailing
                                              List</a>
     
                                       </li>
                                </ul><!--end of footer_navigation-->
                         </div><!--end of main_column-->
                         <div id="right_column">
                                <img src="http://cssispoetry.com/Coghill/images/george.jpg" width="" height="" alt=
                                "" />
                                <h3>
                                       Twitter
                                </h3>
                                <p>
     
                                       Lorem ipsum dolor sit amet,
                                       consectetur adipiscing elit. Sed
                                       tempus, sapien eu varius
                                       iaculis, elit arcu aliquam
                                       neque, a tincidunt dui tellus et
                                       purus.
                                </p><a href="">read more</a>
                                <h3>
                                       Blog
                                </h3>
                                <p>
                                       Lorem ipsum dolor sit amet,
                                       consectetur adipiscing elit. Sed
                                       tempus, sapien eu varius
                                       iaculis, elit arcu aliquam
                                       neque, a tincidunt dui tellus et
                                       purus.
                                </p><a href="">read more</a>
                                <h3>
     
                                       News
                                </h3>
                                <p>
                                       Lorem ipsum dolor sit amet,
                                       consectetur adipiscing elit. Sed
                                       tempus, sapien eu varius
                                       iaculis, elit arcu aliquam
                                       neque, a tincidunt dui tellus et
                                       purus.
                                </p><a href="">read more</a>
                                <ul id="icons">
                                       <li>
                                              <a href="">Twitter</a>
                                       </li>
     
                                       <li>
                                              <a href="">Facebook</a>
                                       </li>
                                       <li>
                                              <a href="">RSS </a>
                                       </li>
                                </ul><!--end of icons-->
                         </div><!--end of right_column-->
     
                  </div><!--end of container-->
     
    </body>
    </html>
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  10. #10
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm cooper, not raffles haha!

    You forgot the most important thing:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

    Add this before the JS example I posted:

    Quote Originally Posted by BlakeAnthony View Post
    Thanks Raffles - could you help me implement this? Im not quite sure what to do



    Code HTML4Strict:
    <!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" />
    <title>Untitled Document</title>
    <script type="text/javascript">
     
    $(function() {    
        $("#nav li a").click(function() {
            var item = $(this).attr("id");
            var replace = "#" + item.replace("item","module");
            $(replace).show();
            $("#main div").not(replace).hide();
     
            return false;
        });
    });
     
     
     
     
     
    </script>
    <style type="text/css">
    *{margin:0; padding:0;}
     
    /* GLOBAL RESET STYLE RULES */
    html, body, a, abbr, acronym, address, area, b, bdo, big, blockquote, button, caption, cite, code,
        col, colgroup, dd, del, dfn, div, dl, dt, em, fieldset, form, h1, h2, h3, h4, h5, h6, hr, i, img,
        ins, kbd, label, legend, li, map, object, ol, p, param, pre, q, samp, small, span, strong, sub,
        sup, table, tbody, td, textarea, tfoot, th, thead, tr, tt, ul, var { vertical-align: baseline; }
     
    body {
        color: #111111;
        font-size: 75%;
        font-size-adjust: none;
        font-stretch: normal;
        font-style: normal;
        font-variant: normal;
        font-weight: normal;
        line-height: 1.5;
        background: #fff none repeat scroll 0 0;
        font-family: verdana,arial,helvatica,sans-seriff; }
    #container {
        width:938px;
        margin:0px auto; 
    }
    #header {
        width:938px;
        float:left;
        height:150px;
        background: #a3c3d8 url('http://cssispoetry.com/Coghill/images/header.png') no-repeat top center ;
        text-align:center; 
    }
    #header p {
        padding-left:40px; 
    }
    #header ul {
        width:258px;
        margin:107px 0 0 340px;
    }
    #header li {
        display:inline;
    }
    #header a {
        color:#9cb2bf;
        font-weight:bold;
        text-decoration:none;
    }
    #header a:hover {
        color:#ffffff;
    }
    #left_column {
        width:219px;
        height:755px;
        float:left;
        background:#e3edf3;
        border-right:4px solid #9cb2bf;
    }
    #main_column {
        width:498px;
        float:left;
    }
    #main_column img {
        margin:5px 0 0 55px;
    }
    #main_column p {
        margin-left:30px;
        padding:6px;
    }
    #inner_content_navigation ul {
        width:356px;
    }
    #inner_content_navigation li {
        display:inline;
        margin-left:34px;
        padding-left:5px;
    }
    #inner_content_navigation a {
        color:#407f90;
        text-decoration:none;
        font-size:1.1em;
    }
    #inner_content_navigation a:hover {
        color:#00546b;
    }
    .contact_us  {
        text-align:center;
    }
    #footer ul {
        width:475px;
    }
    #footer li {
        display:inline;
        padding:0 3px 0 3px;
        font-size:9px;
        list-style-type:none;
        padding-left:5px;
    }
    #right_column {
        width:209px;
        height:755px;
        float:right;
        background:#e3edf3;
        border-left:4px solid #9cb2bf;
    }
    #right_column img {
        margin:15px 0 0 30px;
    }
    #right_column h3 {
        color:#00546c;
        padding-left:8px;
    }
    #right_column p {
        padding-left:8px;
    }
    #right_column a {
     
        padding-left:10px;
        text-decoration:none;
    }
    #icons ul {
        width:90px;
    }
    #icons li, a {
        display:inline;
        margin-top:10px;
    }
    </style>
    </head>
    <body> <div id="container">
                         <div id="header">
     
                                <p>
                                       Seo garbage text up here
                                </p>
                                                  <ul>
                                <li>
                                       <a href="">Portfolio</a>
                                </li>
                                <li>
     
                                       <a href="">Info</a>
                                </li>
                                <li>
                                       <a href="">Blog</a>
                                </li>
                                <li>
                                       <a href="">Contact</a>
     
                                </li>
                         </ul><!--end of header_navigation-->
                         </div><!--end of header-->
     
     
                         <div id="left_column">
    <ul id="nav">
        <li id="item1"><a href="#">Image set</a></li>
        <li id="item2"><a href="#">Image set</a></li>
    </ul>
     
    <div id="main">
        <div id="module1">1 set of images here</div>  
        <div id="module2">2 set of images here</div> 
    </div>
                         </div>
                         <div id="main_column">
                                <ul id="inner_content_navigation">
                                       <li>
     
                                              <a href="">Cartoon &amp;
                                              Illustration</a>
                                       </li>
                                       <li>
                                              <a href="">Design</a>
                                       </li>
                                       <li>
     
                                              <a href="">Logos</a>
                                       </li>
                                       <li>
                                              <a href="">Sketches</a>
                                       </li>
                                </ul>
                                <!--end of inner_content_navigation-->
                                <img src="http://cssispoetry.com/Coghill/images/main_column_image.jpg" alt="" width="" height=
                                "" />
     
                                <p>
                                       This illustration from a
                                       commissioned tattoo artwork
                                       piece. The tattoo-ee has a
                                       nickname, Yeti, and wanted a
                                       tattoo of a Yeti driving the '74
                                       Corvette he owns. The main
                                       requirement: he wanted in the
                                       Big Daddy Roth/Odd Rods style -
                                       big crazy looking monstar
                                       driving a hot rod with the eyes
                                       buggin out of the skull, tongue
                                       hanging out.
                                </p>
                                <p>
                                       After working out many sketches
                                       to get the right look and feel
                                       of a true 'hot rod freak'
                                       monstar, I began to have visions
                                       of Yeti (the person) as a
                                       cartoon version of himself as
                                       the hot rod monstar. One sketch
                                       was all it took, and the drawing
                                       was scanned and finalzed in
                                       Adobe Illustrator. The final art
                                       is quite hilarious if you know
                                       Yeti.
                                </p>
                                <p class="contact_us">
                                       Need a  custom cartoon illustration?
                                       <a href="#">Contact me now!</a>
                                </p>
     
                                <ul id="footer">
                                <li> All artwork  George Coghill</li>
                                       <li>
                                              <a href="">Contact</a>
                                       </li>
                                       <li>
                                              <a href="">Portfolio</a>
     
                                       </li>
                                       <li>
                                              <a href="">Facebook</a>
                                       </li>
                                       <li>
                                              <a href="">Twitter</a>
                                       </li>
                                       <li>
     
                                              <a href="">Blog</a>
                                       </li>
                                       <li>
                                              <a href="">RSS</a>
                                       </li>
                                       <li>
                                              <a href="">Mailing
                                              List</a>
     
                                       </li>
                                </ul><!--end of footer_navigation-->
                         </div><!--end of main_column-->
                         <div id="right_column">
                                <img src="http://cssispoetry.com/Coghill/images/george.jpg" width="" height="" alt=
                                "" />
                                <h3>
                                       Twitter
                                </h3>
                                <p>
     
                                       Lorem ipsum dolor sit amet,
                                       consectetur adipiscing elit. Sed
                                       tempus, sapien eu varius
                                       iaculis, elit arcu aliquam
                                       neque, a tincidunt dui tellus et
                                       purus.
                                </p><a href="">read more</a>
                                <h3>
                                       Blog
                                </h3>
                                <p>
                                       Lorem ipsum dolor sit amet,
                                       consectetur adipiscing elit. Sed
                                       tempus, sapien eu varius
                                       iaculis, elit arcu aliquam
                                       neque, a tincidunt dui tellus et
                                       purus.
                                </p><a href="">read more</a>
                                <h3>
     
                                       News
                                </h3>
                                <p>
                                       Lorem ipsum dolor sit amet,
                                       consectetur adipiscing elit. Sed
                                       tempus, sapien eu varius
                                       iaculis, elit arcu aliquam
                                       neque, a tincidunt dui tellus et
                                       purus.
                                </p><a href="">read more</a>
                                <ul id="icons">
                                       <li>
                                              <a href="">Twitter</a>
                                       </li>
     
                                       <li>
                                              <a href="">Facebook</a>
                                       </li>
                                       <li>
                                              <a href="">RSS </a>
                                       </li>
                                </ul><!--end of icons-->
                         </div><!--end of right_column-->
     
                  </div><!--end of container-->
     
    </body>
    </html>

  11. #11
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Also, here is a good reference that will get you on your feet, if you're an advocate of jQuery:

    http://visualjquery.com/


Bookmarks

Posting Permissions

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