Web Analytics Made Easy -
StatCounter fixing hover style - CodingForum

Announcement

Collapse
No announcement yet.

fixing hover style

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • fixing hover style

    How can I make the full picture of the thumbnails appear if I click on the thumbnails instead of hovering over the image?

    Any help will be appreciated


    here is the example from the tutorial

    http://www.webreference.com/programm...les/twelve.htm
    Get Mozilla Firefox

  • #2
    You'll be looking at a javascript solution.

    Have a look at this -

    http://webdeveloper.com/javascript/j...ng_images.html

    Basically you'd need to modify it so instead having onMouseOver, you'd have onClick.

    http://www.webdeveloper.com/javascri...e_example.html
    markaylward.co.uk

    Comment


    • #3
      Thanks for the rapid responce. Is there any way I can do it without JS?
      Get Mozilla Firefox

      Comment


      • #4
        I don't think so, it's not something CSS could do.
        markaylward.co.uk

        Comment


        • #5
          Can you show me how to do it as i find it hard to understand the tutorials.

          Thanks for your help so far and for the rapid responce.
          Get Mozilla Firefox

          Comment


          • #6
            Here (I used images I found on Google) -

            PHP Code:
            <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd"
            >

            <
            html>
            <
            head>
            <
            meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
            <
            title>Untitled Document</title>
            <
            style type="text/css">
            img.ImageOnly float:leftmargin-right:100px }
            </
            style>
            </
            head>

            <
            body>
            <
            img class="ImageOnly" name="ImageOnly" src="http://www.birthdaycraftsandsupplies.com/birthday/images/Pinatas/Number%201%20Pull.jpg">

            <
            a href="#" onclick="ImageOnly.src='http://www.birthdaycraftsandsupplies.com/birthday/images/Pinatas/Number%201%20Pull.jpg'">
            <
            img src="http://www.birthdaycraftsandsupplies.com/birthday/images/Pinatas/Number%201%20Pull.jpg" height="150" width="100">
            </
            a>

            <
            a href="#" onclick="ImageOnly.src='http://www.birthdaycraftsandsupplies.com/birthday/images/Pinatas/Number%202%20Pull.jpg'">
            <
            img src="http://www.birthdaycraftsandsupplies.com/birthday/images/Pinatas/Number%202%20Pull.jpg" height="150" width="100">
            </
            a>

            <
            a href="#" onclick="ImageOnly.src='http://www.birthdaycraftsandsupplies.com/birthday/images/Pinatas/Number%203%20Pull.jpg'">
            <
            img src="http://www.birthdaycraftsandsupplies.com/birthday/images/Pinatas/Number%203%20Pull.jpg" height="150" width="100">
            </
            a>

            </
            body>
            </
            html
            markaylward.co.uk

            Comment


            • #7
              Thanks
              Last edited by mw2005; Jul 30, 2005, 11:53 AM.
              Get Mozilla Firefox

              Comment


              • #8
                Thats what i am looking for but can i do the same thing with the template that I already have?
                Get Mozilla Firefox

                Comment


                • #9
                  Of course.

                  For the image you want to change, give it the name 'ImageOnly'. Then use this for the hyperlink on the images you want to change it to -

                  <a href="#" onclick="ImageOnly.src='imagetochangeto.jpg'">
                  <img src="imagetochangeto.jpg"></a>
                  markaylward.co.uk

                  Comment


                  • #10
                    Can you show me what you mean in the code below:

                    Code:
                    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
                        "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
                    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
                    <head>
                    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
                    <title> it's a dogs life - example #12</title>
                    <meta name="Author" content="Stu Nicholls" />
                    
                    <style type="text/css">
                    /* choose a suitable font and center the #container div in Internet Explorer */
                    body {text-align:center; font-family: tahoma; arial, sans-serif; font-size:76%; letter-spacing:0.05em;}
                    
                    /* The containing box for the gallery. */
                    #container {position:relative; width:770px; height:396px; margin:20px auto 0 auto; border:1px solid #aaa; background:#fff url(../images/back.jpg) 75px 10px no-repeat;}
                    
                    /* Removing the list bullets and indentation - add size - and position */
                    #container ul {width:198px; height:386px; padding:0;  margin:5px; list-style-type:none; float:right;}
                    
                    #container li {float:left;}
                    
                    /* Remove the images and text from sight */
                    #container a.gallery span {position:absolute; width:1px; height:1px; top:5px; left:5px; overflow:hidden; background:#fff;}
                    
                    /* Adding the thumbnail images */
                    #container a.gallery, #container a.gallery:visited {display:block; color:#000; text-decoration:none; border:1px solid #000; margin:1px 2px 1px 2px; text-align:left; cursor:default;}
                    #container a.slidea {background:url(../images/p1_t.jpg); height:93px; width:60px;}
                    #container a.slideb {background:url(../images/p2_t.jpg); height:93px; width:60px;}
                    #container a.slidec {background:url(../images/p3_t.jpg); height:93px; width:60px;}
                    #container a.slided {background:url(../images/p4_t.jpg); height:60px; width:93px;}
                    * html #container a.slided {width:91px; w\idth:93px;}
                    #container a.slidee {background:url(../images/p5_t.jpg); height:60px; width:93px;}
                    #container a.slidef {background:url(../images/p6_t.jpg); height:60px; width:93px;}
                    * html #container a.slidef {width:91px; w\idth:93px;}
                    #container a.slideg {background:url(../images/p7_t.jpg); height:60px; width:93px;}
                    #container a.slideh {background:url(../images/p8_t.jpg); height:93px; width:60px;}
                    #container a.slidei {background:url(../images/p9_t.jpg); height:93px; width:60px;}
                    #container a.slidej {background:url(../images/p10_t.jpg); height:93px; width:60px;}
                    #container a.slidek {background:url(../images/p11_t.jpg); height:60px; width:93px;}
                    * html #container a.slidek {width:91px; w\idth:93px;}
                    #container a.slidel {background:url(../images/p12_t.jpg); height:60px; width:93px;}
                    
                    /* styling the hovers */
                    #container a.gallery:hover {border:1px solid #fff;}
                    #container a.gallery:hover span {position:absolute; width:372px; height:372px; top:10px; left:75px; color:#000; background:#fff;}
                    #container a.gallery:hover img {border:1px solid #fff; float:left; margin-right:5px;}
                    #container a.slideb:hover img, #container a.slidei:hover img {float:right;}
                    
                    </style>
                    </head>
                    
                    <body>
                    
                    <div id="container">
                    <ul>
                    <li><a class="gallery slidea" href=""><span><img src="image.jpg" alt="Title" title="title"><br>TITLE<br>CAPTION</span></a></li>
                    <li><a class="gallery slideb" href="#nogo"><span><img src="image.jpg" alt="title" title="title"><br>TITLE<br>CAPTION</span></a></li>
                    <li><a class="gallery slidec" href="#nogo"><span><img src="image.jpg" alt="title" title="title"><br>TITLE<br>CAPTION</span></a></li>
                    <li><a class="gallery slided" href="#nogo"><span><img src="image.jpg" alt="title" title="title"><br>TITLE<br>CAPTION</span></a></li>
                    <li><a class="gallery slidee" href="#nogo"><span><img src="image.jpg" alt="title" title="title"><br>TITLE<br>CAPTION</span></a></li>
                    <li><a class="gallery slidef" href="#nogo"><span><img src="image.jpg" alt="title" title="title"><br>TITLE<br>CAPTION</span></a></li>
                    <li><a class="gallery slideg" href="#nogo"><span><img src="image.jpg" alt="title" title="title"><br>TITLE<br>CAPTION</span></a></li>
                    <li><a class="gallery slideh" href="#nogo"><span><img src="image.jpg" alt="title" title="title"><br>TITLE<br>CAPTION</span></a></li>
                    <li><a class="gallery slidei" href="#nogo"><span><img src="image.jpg" alt="title" title="title"><br>TITLE<br>CAPTION</span></a></li>
                    <li><a class="gallery slidej" href="#nogo"><span><img src="image.jpg" alt="title" title="title"><br>TITLE<br>CAPTION</span></a></li>
                    <li><a class="gallery slidek" href="#nogo"><span><img src="image.jpg" alt="title" title="title"><br>TITLE<br>CAPTION</span></a></li>
                    <li><a class="gallery slidel" href="#nogo"><span><img src="image.jpg" alt="title" title="title"><br>TITLE<br>CAPTION</span></a></li>
                    </ul>
                    </div>
                    
                    
                    </body>
                    </html>


                    Thanks for the rapid response again
                    Get Mozilla Firefox

                    Comment


                    • #11
                      Well remove the hovers under /* styling the hovers */ .

                      Then change each link like so -

                      <li><a class="gallery slidea" href="#" onclick="ImageOnly.src='newimage.jpg'">
                      <span><img src="image.jpg" alt="Title" title="title"><br>TITLE<br>CAPTION</span></a></li>

                      Then add an image to change in the container div -

                      <div id="container">
                      <img src="image.jpg" name="ImageOnly" style="float:left">
                      markaylward.co.uk

                      Comment


                      • #12
                        Thanks for that. I don't understand what you mean by:
                        Then add an image to change in the container div -

                        <div id="container">
                        <img src="image.jpg" name="ImageOnly" style="float:left">
                        Here is the code:

                        Code:
                        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
                            "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
                        <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
                        <head>
                        <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
                        <title> it's a dogs life - example #12</title>
                        <meta name="Author" content="Stu Nicholls" />
                        
                        <style type="text/css">
                        /* choose a suitable font and center the #container div in Internet Explorer */
                        body {text-align:center; font-family: tahoma; arial, sans-serif; font-size:76%; letter-spacing:0.05em;}
                        
                        /* The containing box for the gallery. */
                        #container {position:relative; width:770px; height:396px; margin:20px auto 0 auto; border:1px solid #aaa; background:#fff url(../images/back.jpg) 75px 10px no-repeat;}
                        
                        /* Removing the list bullets and indentation - add size - and position */
                        #container ul {width:198px; height:386px; padding:0;  margin:5px; list-style-type:none; float:right;}
                        
                        #container li {float:left;}
                        
                        /* Remove the images and text from sight */
                        #container a.gallery span {position:absolute; width:1px; height:1px; top:5px; left:5px; overflow:hidden; background:#fff;}
                        
                        /* Adding the thumbnail images */
                        #container a.gallery, #container a.gallery:visited {display:block; color:#000; text-decoration:none; border:1px solid #000; margin:1px 2px 1px 2px; text-align:left; cursor:default;}
                        #container a.slidea {background:url(../images/p1_t.jpg); height:93px; width:60px;}
                        #container a.slideb {background:url(../images/p2_t.jpg); height:93px; width:60px;}
                        #container a.slidec {background:url(../images/p3_t.jpg); height:93px; width:60px;}
                        #container a.slided {background:url(../images/p4_t.jpg); height:60px; width:93px;}
                        * html #container a.slided {width:91px; w\idth:93px;}
                        #container a.slidee {background:url(../images/p5_t.jpg); height:60px; width:93px;}
                        #container a.slidef {background:url(../images/p6_t.jpg); height:60px; width:93px;}
                        * html #container a.slidef {width:91px; w\idth:93px;}
                        #container a.slideg {background:url(../images/p7_t.jpg); height:60px; width:93px;}
                        #container a.slideh {background:url(../images/p8_t.jpg); height:93px; width:60px;}
                        #container a.slidei {background:url(../images/p9_t.jpg); height:93px; width:60px;}
                        #container a.slidej {background:url(../images/p10_t.jpg); height:93px; width:60px;}
                        #container a.slidek {background:url(../images/p11_t.jpg); height:60px; width:93px;}
                        * html #container a.slidek {width:91px; w\idth:93px;}
                        #container a.slidel {background:url(../images/p12_t.jpg); height:60px; width:93px;}
                        
                        
                        </style>
                        </head>
                        
                        <body>
                        
                        <div id="container">
                        <ul>
                        <li><a class="gallery slidea" href="#" onclick="ImageOnly.src='newimage.jpg'">
                        <span><img src="image.jpg" alt="Title" title="title"><br>TITLE<br>CAPTION</span></a></li>
                        <li><a class="gallery slideb" href="#" onclick="ImageOnly.src='newimage.jpg'">
                        <span><img src="image.jpg" alt="Title" title="title"><br>TITLE<br>CAPTION</span></a></li>
                        <li><a class="gallery slidec" href="#" onclick="ImageOnly.src='newimage.jpg'">
                        <span><img src="image.jpg" alt="Title" title="title"><br>TITLE<br>CAPTION</span></a></li>
                        <li><a class="gallery slided" href="#" onclick="ImageOnly.src='newimage.jpg'">
                        <span><img src="image.jpg" alt="Title" title="title"><br>TITLE<br>CAPTION</span></a></li>
                        <li><a class="gallery slidee" href="#" onclick="ImageOnly.src='newimage.jpg'">
                        <span><img src="image.jpg" alt="Title" title="title"><br>TITLE<br>CAPTION</span></a></li>
                        <li><a class="gallery slidef" href="#" onclick="ImageOnly.src='newimage.jpg'">
                        <span><img src="image.jpg" alt="Title" title="title"><br>TITLE<br>CAPTION</span></a></li>
                        <li><a class="gallery slideg" href="#" onclick="ImageOnly.src='newimage.jpg'">
                        <span><img src="image.jpg" alt="Title" title="title"><br>TITLE<br>CAPTION</span></a></li>
                        <li><a class="gallery slideh" href="#" onclick="ImageOnly.src='newimage.jpg'">
                        <span><img src="image.jpg" alt="Title" title="title"><br>TITLE<br>CAPTION</span></a></li>
                        <li><a class="gallery slidei" href="#" onclick="ImageOnly.src='newimage.jpg'">
                        <span><img src="image.jpg" alt="Title" title="title"><br>TITLE<br>CAPTION</span></a></li>
                        <li><a class="gallery slidej" href="#" onclick="ImageOnly.src='newimage.jpg'">
                        <span><img src="image.jpg" alt="Title" title="title"><br>TITLE<br>CAPTION</span></a></li>
                        <li><a class="gallery slidek" href="#" onclick="ImageOnly.src='newimage.jpg'">
                        <span><img src="image.jpg" alt="Title" title="title"><br>TITLE<br>CAPTION</span></a></li>
                        <li><a class="gallery slidel" href="#" onclick="ImageOnly.src='newimage.jpg'">
                        <span><img src="image.jpg" alt="Title" title="title"><br>TITLE<br>CAPTION</span></a></li>
                        </ul>
                        
                        </body>
                        </html>
                        Get Mozilla Firefox

                        Comment


                        • #13
                          Add -

                          <img src="image.jpg" name="ImageOnly" style="float:left">

                          Under -

                          <div id="container">

                          That will be the image which changes.
                          markaylward.co.uk

                          Comment


                          • #14
                            I can't make it work

                            Code:
                            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
                                "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
                            <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
                            <head>
                            <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
                            <title> it's a dogs life - example #12</title>
                            <meta name="Author" content="Stu Nicholls" />
                            
                            <style type="text/css">
                            /* choose a suitable font and center the #container div in Internet Explorer */
                            body {text-align:center; font-family: tahoma; arial, sans-serif; font-size:76%; letter-spacing:0.05em;}
                            
                            /* The containing box for the gallery. */
                            #container {position:relative; width:770px; height:396px; margin:20px auto 0 auto; border:1px solid #aaa; background:#fff url(../images/back.jpg) 75px 10px no-repeat;}
                            
                            /* Removing the list bullets and indentation - add size - and position */
                            #container ul {width:198px; height:386px; padding:0;  margin:5px; list-style-type:none; float:right;}
                            
                            #container li {float:left;}
                            
                            /* Remove the images and text from sight */
                            #container a.gallery span {position:absolute; width:1px; height:1px; top:5px; left:5px; overflow:hidden; background:#fff;}
                            
                            /* Adding the thumbnail images */
                            #container a.gallery, #container a.gallery:visited {display:block; color:#000; text-decoration:none; border:1px solid #000; margin:1px 2px 1px 2px; text-align:left; cursor:default;}
                            #container a.slidea {background:url(logo.gif); height:93px; width:60px;}
                            #container a.slideb {background:url(); height:93px; width:60px;}
                            #container a.slidec {background:url(); height:93px; width:60px;}
                            #container a.slided {background:url(../images/p4_t.jpg); height:60px; width:93px;}
                            * html #container a.slided {width:91px; w\idth:93px;}
                            #container a.slidee {background:url(../images/p5_t.jpg); height:60px; width:93px;}
                            #container a.slidef {background:url(../images/p6_t.jpg); height:60px; width:93px;}
                            * html #container a.slidef {width:91px; w\idth:93px;}
                            #container a.slideg {background:url(../images/p7_t.jpg); height:60px; width:93px;}
                            #container a.slideh {background:url(../images/p8_t.jpg); height:93px; width:60px;}
                            #container a.slidei {background:url(../images/p9_t.jpg); height:93px; width:60px;}
                            #container a.slidej {background:url(../images/p10_t.jpg); height:93px; width:60px;}
                            #container a.slidek {background:url(../images/p11_t.jpg); height:60px; width:93px;}
                            * html #container a.slidek {width:91px; w\idth:93px;}
                            #container a.slidel {background:url(../images/p12_t.jpg); height:60px; width:93px;}
                            
                            
                            </style>
                            </head>
                            
                            <body>
                            
                            <div id="container">
                            <img src="logo.gif" name="ImageOnly" style="float:left">
                            <ul>
                            <li><a class="gallery slidea" href="#" onclick="ImageOnly.src='newimage.jpg'">
                            <span><img src="logo.gif" alt="Title" title="title"><br>TITLE<br>CAPTION</span></a></li>
                            <li><a class="gallery slideb" href="#" onclick="ImageOnly.src='newimage.jpg'">
                            <span><img src="image.jpg" alt="Title" title="title"><br>TITLE<br>CAPTION</span></a></li>
                            <li><a class="gallery slidec" href="#" onclick="ImageOnly.src='newimage.jpg'">
                            <span><img src="image.jpg" alt="Title" title="title"><br>TITLE<br>CAPTION</span></a></li>
                            <li><a class="gallery slided" href="#" onclick="ImageOnly.src='newimage.jpg'">
                            <span><img src="image.jpg" alt="Title" title="title"><br>TITLE<br>CAPTION</span></a></li>
                            <li><a class="gallery slidee" href="#" onclick="ImageOnly.src='newimage.jpg'">
                            <span><img src="image.jpg" alt="Title" title="title"><br>TITLE<br>CAPTION</span></a></li>
                            <li><a class="gallery slidef" href="#" onclick="ImageOnly.src='newimage.jpg'">
                            <span><img src="image.jpg" alt="Title" title="title"><br>TITLE<br>CAPTION</span></a></li>
                            <li><a class="gallery slideg" href="#" onclick="ImageOnly.src='newimage.jpg'">
                            <span><img src="image.jpg" alt="Title" title="title"><br>TITLE<br>CAPTION</span></a></li>
                            <li><a class="gallery slideh" href="#" onclick="ImageOnly.src='newimage.jpg'">
                            <span><img src="image.jpg" alt="Title" title="title"><br>TITLE<br>CAPTION</span></a></li>
                            <li><a class="gallery slidei" href="#" onclick="ImageOnly.src='newimage.jpg'">
                            <span><img src="image.jpg" alt="Title" title="title"><br>TITLE<br>CAPTION</span></a></li>
                            <li><a class="gallery slidej" href="#" onclick="ImageOnly.src='newimage.jpg'">
                            <span><img src="image.jpg" alt="Title" title="title"><br>TITLE<br>CAPTION</span></a></li>
                            <li><a class="gallery slidek" href="#" onclick="ImageOnly.src='newimage.jpg'">
                            <span><img src="image.jpg" alt="Title" title="title"><br>TITLE<br>CAPTION</span></a></li>
                            <li><a class="gallery slidel" href="#" onclick="ImageOnly.src='newimage.jpg'">
                            <span><img src="image.jpg" alt="Title" title="title"><br>TITLE<br>CAPTION</span></a></li>
                            </ul>
                            
                            </body>
                            </html>
                            Get Mozilla Firefox

                            Comment


                            • #15
                              Try this...

                              PHP Code:
                              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
                                  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"
                              >
                              <
                              html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
                              <
                              head>
                              <
                              meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
                              <
                              titleit's a dogs life - example #12</title>
                              <meta name="Author" content="Stu Nicholls" />

                              <style type="text/css">

                              body {text-align:center; font-family: tahoma; arial, sans-serif; font-size:76%; letter-spacing:0.05em;}

                              img { border: none }

                              #container {position:relative; width:770px; height:396px; margin:20px auto 0 auto; border:1px solid #aaa; background: #fff 75px 10px no-repeat;}

                              #container ul {width:198px; height:386px; padding:0;  margin:5px; list-style-type:none; float:right;}

                              #container li {float:left;}

                              #container a.gallery span {position:absolute; width:1px; height:1px; top:5px; left:5px; overflow:hidden; background:#fff;}

                              #container a.gallery, #container a.gallery:visited {
                              display:block;
                              color:#000;
                              text-decoration:none;
                              border:1px solid #000;
                              margin:1px 2px 1px 2px;
                              text-align:left;
                              }

                              #container img.ImageOnly { margin: 30px }

                              #container a.slidea {height:93px; width:60px;}
                              #container a.slideb {height:93px; width:60px;}
                              #container a.slidec {height:93px; width:60px;}
                              #container a.slided {height:60px; width:93px;}
                              * html #container a.slided {width:91px; w\idth:93px;}
                              #container a.slidee {height:60px; width:93px;}
                              #container a.slidef {height:60px; width:93px;}
                              * html #container a.slidef {width:91px; w\idth:93px;}
                              #container a.slideg {height:60px; width:93px;}
                              #container a.slideh {height:93px; width:60px;}
                              #container a.slidei {height:93px; width:60px;}
                              #container a.slidej {height:93px; width:60px;}
                              #container a.slidek {height:60px; width:93px;}
                              * html #container a.slidek {width:91px; w\idth:93px;}
                              #container a.slidel {height:60px; width:93px;}

                              </style>
                              </head>

                              <body>

                              <div id="container">
                              <img class="ImageOnly" src="http://www.birthdaycraftsandsupplies.com/birthday/images/Pinatas/Number%201%20Pull.jpg" name="ImageOnly" style="float:left">
                              <ul>

                              <li><a class="gallery slidea" href="#" onclick="ImageOnly.src='
                              http://www.birthdaycraftsandsupplies.com/birthday/images/Pinatas/Number%201%20Pull.jpg'">
                              <img src="http://www.birthdaycraftsandsupplies.com/birthday/images/Pinatas/Number%201%20Pull.jpg" alt="Title" title="title" height="93" width="60"></a></li>
                              <
                              li><class="gallery slideb" href="#" onclick="ImageOnly.src='http://www.birthdaycraftsandsupplies.com/birthday/images/Pinatas/Number%202%20Pull.jpg'">
                              <
                              img src="http://www.birthdaycraftsandsupplies.com/birthday/images/Pinatas/Number%202%20Pull.jpg" alt="Title" title="title" height="93" width="60"></a></li>
                              <
                              li><class="gallery slidec" href="#" onclick="ImageOnly.src='http://www.birthdaycraftsandsupplies.com/birthday/images/Pinatas/Number%203%20Pull.jpg'">
                              <
                              img src="http://www.birthdaycraftsandsupplies.com/birthday/images/Pinatas/Number%203%20Pull.jpg" alt="Title" title="title" height="93" width="60"></a></li>

                              <
                              li><class="gallery slided" href="#" onclick="ImageOnly.src='newimage.jpg'">
                              <
                              span><img src="image.jpg" alt="Title" title="title"><br>TITLE<br>CAPTION</span></a></li>
                              <
                              li><class="gallery slidee" href="#" onclick="ImageOnly.src='newimage.jpg'">
                              <
                              span><img src="image.jpg" alt="Title" title="title"><br>TITLE<br>CAPTION</span></a></li>
                              <
                              li><class="gallery slidef" href="#" onclick="ImageOnly.src='newimage.jpg'">
                              <
                              span><img src="image.jpg" alt="Title" title="title"><br>TITLE<br>CAPTION</span></a></li>
                              <
                              li><class="gallery slideg" href="#" onclick="ImageOnly.src='newimage.jpg'">
                              <
                              span><img src="image.jpg" alt="Title" title="title"><br>TITLE<br>CAPTION</span></a></li>
                              <
                              li><class="gallery slideh" href="#" onclick="ImageOnly.src='newimage.jpg'">
                              <
                              span><img src="image.jpg" alt="Title" title="title"><br>TITLE<br>CAPTION</span></a></li>
                              <
                              li><class="gallery slidei" href="#" onclick="ImageOnly.src='newimage.jpg'">
                              <
                              span><img src="image.jpg" alt="Title" title="title"><br>TITLE<br>CAPTION</span></a></li>
                              <
                              li><class="gallery slidej" href="#" onclick="ImageOnly.src='newimage.jpg'">
                              <
                              span><img src="image.jpg" alt="Title" title="title"><br>TITLE<br>CAPTION</span></a></li>
                              <
                              li><class="gallery slidek" href="#" onclick="ImageOnly.src='newimage.jpg'">
                              <
                              span><img src="image.jpg" alt="Title" title="title"><br>TITLE<br>CAPTION</span></a></li>
                              <
                              li><class="gallery slidel" href="#" onclick="ImageOnly.src='newimage.jpg'">
                              <
                              span><img src="image.jpg" alt="Title" title="title"><br>TITLE<br>CAPTION</span></a></li>
                              </
                              ul>

                              </
                              body>
                              </
                              html
                              markaylward.co.uk

                              Comment

                              Working...
                              X