Web Analytics Made Easy - StatCounter fixing hover style - CodingForum

Announcement

Collapse
No announcement yet.

fixing hover style

Collapse
X
Collapse
 
  • Page of 2
  • Filter
  • Time
  • Show
Clear All
new posts
Previous 1 2 template Next
  • #1

    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
    Tags: None
  • #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:left; margin-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" />
                              <                              title> it'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><a 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><a 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><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> 
                              markaylward.co.uk

                              Comment

                              Previous 1 2 template Next
                              Working...
                              X