Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts

    Exclamation How to put pictures in the thumbnails.

    This program was written for me by a respected member of this forum. I want to leave it exactly as it is functionally but substuting a thumbnail image for the text in the thumbnail block.

    I have tried all I can think of with no success. Any help gratefully received.

    For your information, most of the images have thumbnail images available with the suffix a.

    Frank
    Last edited by effpeetee; 11-23-2008 at 09:58 AM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #2
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    Here's the basic principle with the CSS altered. Get someone to fix the JavaScript (I can't imagine it'd be that hard but my JS knowledge is nil) and I'd say you're in business:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>We're getting there, thanks to Aero.</title>
    
    <style type="text/css">
    
    /*This program was written for me by Aero*/
    
    body {
    margin: 0;
    padding: 0;
    background-color:#050;
    overflow:hidden;
    }
    
    #thumbs {margin:0 auto;
    padding:0;
    margin-top:10px;
    text-align:center;
    list-style:none;
    width:100%;
    }
    
    #thumbs li {float:left;
    background-color:#070;
    border: 1px solid #000;
    margin:0 2px;
    display:inline;
    
    }
    
    a {
    display: block;
    width: 120px;
    height: 90px;
    color:#000;
    font-family:arial,non-serif;
    font-size:10px;
    text-decoration:none;
    overflow: hidden;
    }
    
    a .big, #imghold {
    border: 2px solid #000;
    visibility: hidden;
    }
    
    a:hover {
    overflow: visible;
    }
    
    a:hover .big, #imghold {
    position: absolute;
    left: 50%;
    margin-left: -240px; /* half img width */
    top: 55%;
    margin-top: -180px; /* half img height */
    visibility: visible;
    }
    
    
    
    </style>
    <script type="text/javascript">
    function getElementsByClassName(className, tag, elm){
    	var testClass = new RegExp("(^|\\\\s)" + className + "(\\\\s|$)");
    	var tag = tag || "*";
    	var elm = elm || document;
    	var elements = (tag == "*" && elm.all)? elm.all : elm.getElementsByTagName(tag);
    	var returnElements = [];
    	var current;
    	var length = elements.length;
    	for(var i=0; i<length; i++){
    		current = elements[i];
    		if(testClass.test(current.className)){
    			returnElements.push(current);
    		}
    	}
    	return returnElements;
    }
    function setShow()
    {
    	var createImg = document.createElement('img');
    	var links = getElementsByClassName('imgshow');
    	for(i = 0; i < links.length; i++)
    	{
    		links[i].onmouseover = function()
    		{
    			theimg = this.getElementsByTagName('img')[0].getAttribute('src');
    			theimgwidth = this.getElementsByTagName('img')[0].getAttribute('width');
    			theimgheight= this.getElementsByTagName('img')[0].getAttribute('height');
    			document.getElementById('imghold').setAttribute('width',theimgwidth);
    			document.getElementById('imghold').setAttribute('height',theimgheight);
    			document.getElementById('imghold').setAttribute('src',theimg);
    			document.getElementById('imghold').style.display = 'block';
    		}
    	}
    }
    window.onload = setShow;
    </script>
    </head>
    <body>
    <ul id="thumbs">
    	<li><a href="#" class="imgshow"><img src="6a.jpg" /><img class="big" src="6.jpg" width="480" height="360" /></a></li>
    	<li><a href="#" class="imgshow"><img src="7a.jpg" /><img class="big" src="7.jpg" width="480" height="360" /></a></li>
    	<li><a href="#" class="imgshow"><img src="8a.jpg" /><img class="big" src="8.jpg" width="480" height="360" /></a></li>
    	<li><a href="#" class="imgshow"><img src="9a.jpg" /><img class="big" src="9.jpg" width="480" height="360" /></a></li>
    	<li><a href="#" class="imgshow"><img src="17a.jpg" /><img class="big" src="17.jpg" width="480" height="360" /></a></li>
    	<li><a href="#" class="imgshow"><img src="18a.jpg" /><img class="big" src="18.jpg" width="480" height="360" /></a></li>
    	<li><a href="#" class="imgshow"><img src="19a.jpg" /><img class="big" src="19.jpg" width="480" height="360" /></a></li>
    	<li><a href="#" class="imgshow"><img src="20a.jpg" /><img class="big" src="20.jpg" width="480" height="360" /></a></li>
    	<li><a href="#" class="imgshow"><img src="21a.jpg" /><img class="big" src="21.jpg" width="480" height="360" /></a></li>
    	<li><a href="#" class="imgshow"><img src="22a.jpg" /><img class="big" src="22.jpg" width="480" height="360" /></a></li>
    	<li><a href="#" class="imgshow"><img src="23a.jpg" /><img class="big" src="23.jpg" width="480" height="360" /></a></li>
        <li><a href="#" class="imgshow"><img src="24a.jpg" /><img class="big" src="24.jpg" width="480" height="360" /></a></li>
    	<li><a href="#" class="imgshow"><img src="26a.jpg" /><img class="big" src="26.jpg" width="480" height="360" /></a></li>
    
    </ul>
    
    
    <img id="imghold" alt="" style="display:none;">
    </body>
    </html>
    Note the class added to the larger images to allow for the presence of another img tag in the anchor.
    matt | design | blog

  • #3
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    I'll grant you that I'm relatively new at this, but shouldn't this code work just fine without having to mess with the JS?

    Based on msuffern's code:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>We're getting there, thanks to Aero.</title>
    
    <style type="text/css">
    
    /*This program was written for me by Aero*/
    
    body {
    margin: 0;
    padding: 0;
    background-color:#050;
    overflow:hidden;
    }
    
    #thumbs {margin:0 auto;
    padding:0;
    margin-top:10px;
    text-align:center;
    list-style:none;
    width:100%;
    }
    
    #thumbs li {float:left;
    /*background-color:#070;*/
    border: 1px solid #000;
    margin:0 2px;
    display:inline;
    
    }
    
    a {
    display: block;
    width: 120px;
    height: 90px;
    color:#000;
    font-family:arial,non-serif;
    font-size:10px;
    text-decoration:none;
    overflow: hidden;
    }
    
    a .big, #imghold {
    border: 2px solid #000;
    visibility: hidden;
    }
    
    a:hover {
    overflow: visible;
    }
    
    a:hover .big, #imghold {
    position: absolute;
    left: 50%;
    margin-left: -240px; /* half img width */
    top: 55%;
    margin-top: -180px; /* half img height */
    visibility: visible;
    }
    
    
    
    </style>
    <script type="text/javascript">
    function getElementsByClassName(className, tag, elm){
    	var testClass = new RegExp("(^|\\\\s)" + className + "(\\\\s|$)");
    	var tag = tag || "*";
    	var elm = elm || document;
    	var elements = (tag == "*" && elm.all)? elm.all : elm.getElementsByTagName(tag);
    	var returnElements = [];
    	var current;
    	var length = elements.length;
    	for(var i=0; i<length; i++){
    		current = elements[i];
    		if(testClass.test(current.className)){
    			returnElements.push(current);
    		}
    	}
    	return returnElements;
    }
    function setShow()
    {
    	var createImg = document.createElement('img');
    	var links = getElementsByClassName('imgshow');
    	for(i = 0; i < links.length; i++)
    	{
    		links[i].onmouseover = function()
    		{
    			theimg = this.getElementsByTagName('img')[0].getAttribute('src');
    			theimgwidth = this.getElementsByTagName('img')[0].getAttribute('width');
    			theimgheight= this.getElementsByTagName('img')[0].getAttribute('height');
    			document.getElementById('imghold').setAttribute('width',theimgwidth);
    			document.getElementById('imghold').setAttribute('height',theimgheight);
    			document.getElementById('imghold').setAttribute('src',theimg);
    			document.getElementById('imghold').style.display = 'block';
    		}
    	}
    }
    window.onload = setShow;
    </script>
    </head>
    <body>
    <ul id="thumbs">
    	<li><a href="#" class="imgshow"><img src="6a.jpg" height="auto" width="100%" /><img class="big" src="6.jpg" width="480" height="360" /></a></li>
    	<li><a href="#" class="imgshow"><img src="7a.jpg" height="auto" width="100%" /><img class="big" src="7.jpg" width="480" height="360" /></a></li>
    	<li><a href="#" class="imgshow"><img src="8a.jpg" height="auto" width="100%" /><img class="big" src="8.jpg" width="480" height="360" /></a></li>
    	<li><a href="#" class="imgshow"><img src="9a.jpg" height="auto" width="100%" /><img class="big" src="9.jpg" width="480" height="360" /></a></li>
    	<li><a href="#" class="imgshow"><img src="17a.jpg" height="auto" width="100%" /><img class="big" src="17.jpg" width="480" height="360" /></a></li>
    	<li><a href="#" class="imgshow"><img src="18a.jpg" height="auto" width="100%" /><img class="big" src="18.jpg" width="480" height="360" /></a></li>
    	<li><a href="#" class="imgshow"><img src="19a.jpg" height="auto" width="100%" /><img class="big" src="19.jpg" width="480" height="360" /></a></li>
    	<li><a href="#" class="imgshow"><img src="20a.jpg" height="auto" width="100%" /><img class="big" src="20.jpg" width="480" height="360" /></a></li>
    	<li><a href="#" class="imgshow"><img src="21a.jpg" height="auto" width="100%" /><img class="big" src="21.jpg" width="480" height="360" /></a></li>
    	<li><a href="#" class="imgshow"><img src="22a.jpg" height="auto" width="100%" /><img class="big" src="22.jpg" width="480" height="360" /></a></li>
    	<li><a href="#" class="imgshow"><img src="23a.jpg" height="auto" width="100%" /><img class="big" src="23.jpg" width="480" height="360" /></a></li>
                 <li><a href="#" class="imgshow"><img src="24a.jpg" height="auto" width="100%" /><img class="big" src="24.jpg" width="480" height="360" /></a></li>
    	<li><a href="#" class="imgshow"><img src="25a.jpg" height="auto" width="100%" /><img class="big" src="26.jpg" width="480" height="360" /></a></li>
    
    </ul>
    
    
    
    </body>
    </html>
    I realize you could use an image class rather than type in the height and width for each img tag, but I thought of that after I'd finished and I'm too lazy...

    Anyway, this works for me in IE7. God knows what the rest of the world would see...
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #4
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Thank you both for your efforts, but they do not work for me. I have already tried most things that seem obvious with no success. The program is supposed to show the large image on hover and stay on screen until another is hovered over. Getting it to work without the "stay on screen function" is relatively easy.

    I too am no real use at Javascript. I have all the books but my eyesight is not good and reading is quite a feat.

    Any further ideas gratefully received.

    This is what I get with that code in IE7.It is better with FFox3 but does not stay on screen.

    This is the original.

    Frank
    Last edited by effpeetee; 11-21-2008 at 07:26 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #5
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    Frank, I don't see either of those pages holding the image onscreen - unless the large image overlaps the thumbnail. In ff3, they both work the same way. But if you click and drag from the thumb to the larger image, it will remain onscreen until you move the kouse off the large image.

    Have you looked at javascript kit.com?


    bazz
    Last edited by bazz; 11-21-2008 at 10:40 PM.
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #6
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Hello bazz,

    Using the original with IE7, IE8,. FFox3 (the latest) and Maxthon. All of them after hover leave the image on screen. This also on my laptop, so I can't understand why not with you.

    look here.

    I have Vista Ultimate fully up to date, 64 bit.

    Thanks for the links.

    Frank
    Last edited by effpeetee; 11-22-2008 at 07:25 AM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #7
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    Oops. I had noscript activated, which prevented the js from working.

    In the page which works, you have this code set-up

    Code:
    <li><a href="#" class="imgshow">A Japanese garden<img src="7.jpg" width="480" height="360" /></a></li>
    In the broken page you seem to have made it more complex and this might be why it isn't doing as you want.

    Code:
    <li><a href="#" class="imgshow"><img src="6a.jpg" height="auto" width="100%" /><img class="big" src="6.jpg" width="480" height="360" /></a></li>
    does this work?

    Code:
    <li><a href="#" class="imgshow"><img src="6a.jpg"  /><img src="6.jpg" width="480" height="360" /></a></li>
    bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • Users who have thanked bazz for this post:

    effpeetee (11-22-2008)

  • #8
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Thanks Bazz,
    If you check here you will see that a big step has been made. The thumb images now appear but I think that the Javascript must need attention.

    I am even worse with javascript than any thing else.

    It is better with FFox and Chrome.
    Any further ideas or pointers in the necessary direction will be welcome.

    Frank
    Last edited by effpeetee; 11-22-2008 at 08:23 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #9
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    This should work
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <base href="http://www.exitfegs.co.uk" />
    <title>We're getting there, thanks to Aero.</title>
    <base href="http://exitfegs.co.uk/">
    <style type="text/css">
    body {
    margin: 0;
    padding: 0;
    background-color:#050;
    overflow:hidden;
    }
    #thumbs {
    margin:0;
    padding:0;
    text-align:center;
    list-style:none;
    width:100%;
    }
    #thumbs li {
    float:left;
    /*background-color:#070;*/
    border: 1px solid #000;
    margin:2px;
    display:block;
    }
    a {
    display: block;
    width: 120px;
    height: 90px;
    color:#000;
    font-family:arial, non-serif;
    font-size:10px;
    text-decoration:none;
    overflow: hidden;
    }
    a .big, #imghold {
    border: 2px solid #000;
    visibility: hidden;
    }
    
    a img {
    	border:0;
    	display:block;
    }
    a:hover {
    overflow: visible;
    }
    a:hover .big, #imghold {
    position: absolute;
    left: 50%;
    margin-left: -240px; /* half img width */
    top: 50%;
    margin-top: -180px; /* half img height */
    visibility: visible;
    }
    </style>
    <script type="text/javascript">
    function getElementsByClassName(className, tag, elm){
    	var testClass = new RegExp("(^|\\\\s)" + className + "(\\\\s|$)");
    	var tag = tag || "*";
    	var elm = elm || document;
    	var elements = (tag == "*" && elm.all)? elm.all : elm.getElementsByTagName(tag);
    	var returnElements = [];
    	var current;
    	var length = elements.length;
    	for(var i=0; i<length; i++){
    		current = elements[i];
    		if(testClass.test(current.className)){
    			returnElements.push(current);
    		}
    	}
    	return returnElements;
    }
    function setShow()
    {
    	var createImg = document.createElement('img');
    	var links = getElementsByClassName('imgshow');
    	for(i = 0; i < links.length; i++)
    	{
    		links[i].onmouseover = function()
    		{
    			theimg = this.getElementsByTagName('img')[1];
    			theimgsrc = theimg.getAttribute('src');
    			theimgwidth = theimg.getAttribute('width');
    			theimgheight= theimg.getAttribute('height');
    			document.getElementById('imghold').setAttribute('width',theimgwidth);
    			document.getElementById('imghold').setAttribute('height',theimgheight);
    			document.getElementById('imghold').setAttribute('src',theimg.src);
    			document.getElementById('imghold').style.display = 'block';
    		}
    	}
    }
    window.onload = setShow;
    </script>
    </head>
    <body>
    <ul id="thumbs">
    	<li><a href="#" class="imgshow"><img src="6a.jpg" width="100%" /><img class="big" src="6.jpg" width="480" height="360" /></a></li>
    	<li><a href="#" class="imgshow"><img src="7a.jpg" width="100%" /><img class="big" src="7.jpg" width="480" height="360" /></a></li>
    	<li><a href="#" class="imgshow"><img src="8a.jpg" width="100%" /><img class="big" src="8.jpg" width="480" height="360" /></a></li>
    	<li><a href="#" class="imgshow"><img src="9a.jpg" width="100%" /><img class="big" src="9.jpg" width="480" height="360" /></a></li>
    	<li><a href="#" class="imgshow"><img src="17a.jpg" width="100%" /><img class="big" src="17.jpg" width="480" height="360" /></a></li>
    	<li><a href="#" class="imgshow"><img src="18a.jpg" width="100%" /><img class="big" src="18.jpg" width="480" height="360" /></a></li>
    	<li><a href="#" class="imgshow"><img src="19a.jpg" width="100%" /><img class="big" src="19.jpg" width="480" height="360" /></a></li>
    	<li><a href="#" class="imgshow"><img src="20a.jpg" width="100%" /><img class="big" src="20.jpg" width="480" height="360" /></a></li>
    	<li><a href="#" class="imgshow"><img src="21a.jpg" width="100%" /><img class="big" src="21.jpg" width="480" height="360" /></a></li>
    	<li><a href="#" class="imgshow"><img src="22a.jpg" width="100%" /><img class="big" src="22.jpg" width="480" height="360" /></a></li>
    	<li><a href="#" class="imgshow"><img src="23a.jpg" width="100%" /><img class="big" src="23.jpg" width="480" height="360" /></a></li>
    	<li><a href="#" class="imgshow"><img src="24a.jpg" width="100%" /><img class="big" src="24.jpg" width="480" height="360" /></a></li>
    	<li><a href="#" class="imgshow"><img src="25a.jpg" width="100%" /><img class="big" src="26.jpg" width="480" height="360" /></a></li>
    </ul>
    <img id="imghold" alt="" style="display:none;">
    </body>
    </html>
    Before we were getting the first image, now we want the second image so we change [0] to [1]. I've made it a little more efficient as well.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • The Following 2 Users Say Thank You to _Aerospace_Eng_ For This Useful Post:

    effpeetee (11-22-2008), oesxyl (11-22-2008)

  • #10
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    That's perfect Aero. Thanks once again. I have just got my book of Javascript out to try to understand. I know I'm well past my 'sell by date', but I'm not dead yet. At least, that's my story, and I'm sticking to it!.

    I have added some text. Not perfect, but I'll work on it.

    I've put the file here.

    Best wishes.

    Frank
    Last edited by effpeetee; 11-22-2008 at 10:33 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Posting Permissions

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