Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: Want to enlarge image thumbs (on mouseover) inside tabs

  1. #1
    Join Date
    Jan 2013
    Location
    California
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Want to enlarge image thumbs (on mouseover) inside tabs

    1) Script Title: Tab Content, CSS Image Enlarger

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...tabcontent.htm,
    http://www.dynamicdrive.com/style/cs...mage_enlarger/

    3) Describe problem: I have a projects page one which I would like to tab between project types (commercial, residential, etc.) I have that part working ok (except for the look of the tabs, but I am not worrying about that now). However, on the individual tabs, I would like the project photos, some of which are quite large, to be thumbs that will enlarge upon mouseover. That way I can get all the thumbs (up to 12 thumbs) on the screen without having to scroll down. I combined the two codes above, and it sort of works, but funny things happen (with only two thumbs on each tab) - photos on one tab show up on others. The enlarging seems to work though.

    If this combo cannot be made to work, perhaps there are other codes that would work? Here is my test file containing the code copied from the script & CSS above:



    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    
    
    <style type="text/css">
    
    /* smart image enlarger starts here */
    /* If your images are not linking to other pages leave the links as <a href="#nogo"> Otherwise enlarger won't work in IE6 */
    
    .ienlarger {
    	float: left;
    	clear: none; /* set to left or right if needed */
    	padding-bottom: 5px; /* space between thumbs. Don't change this to margin */
    	padding-right: 5px; /* space between thumbs and wrapping text when there is any text around it */
    }
    
    .ienlarger a { 
    	display:block;
    	text-decoration: none;
    /* add cursor:default; to this rule to disable the hand cursor */
    }
    
    .ienlarger a:hover{ /* don't move this positioning to normal state */
     	position:relative;
    }
    
    .ienlarger span img {
    	border: 1px solid #FFFFFF; /* adds a border around the image */
    	margin-bottom: 8px; /* pushes the text down from the image */
    }
    
    .ienlarger a span {  /* this is for the large image and the caption */
    	position: absolute;
    	display:none;
    	color: #FFCC00; /* caption text colour */
    	text-decoration: none;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 13px; /* caption text size */
    	background-color: #000000;
    	font-weight: bold;
    	padding-top: 10px;
    	padding-right: 10px;
    	padding-bottom: 13px;
    	padding-left: 10px;
    }
    
    .ienlarger img { /* leave or IE puts a border around links */
    border-width: 0;
    }
    
    .ienlarger a:hover span { 
    	display:block;
    	top: 50px; /* means the pop-up's top is 50px away from thumb's top */
    	left: 90px; /* means the pop-up's left is 90px far from the thumb's left */
    	z-index: 100;
    	
    /* If you want the pop-up open to the left of thumb, remove the left: 90px; and add  
    right: 90px; This would mean the right side of the pop-up is 90px far from the right side of thumb */	
    
    /* If you want the pop-up open above the thumb, remove the top: 50px; and add  
    bottom: 50px; This would mean the bottom of the pop-up is 50px far from the bottom of thumb */	
    
    /* add cursor:default; to this rule to disable the hand cursor only for the large image */
    }
    
    .resize_thumb {
    	width: 150px; /* enter desired thumb width here */
    	height : auto;
    }
    
    /* smart image enlarger ends here */
    
    </style>
    <link rel="stylesheet" type="text/css" href="styles/tabcontent.css" />
    
    <script type="text/javascript" src="javascript_files/tabcontent.js">
    
    /***********************************************
    * Tab Content script v2.2-  Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    
    </script>
    
    
    </head>
    
    <body>
    
    
    
    <h3>Demo #1- Basic implementation</h3>
    
    <ul id="countrytabs" class="shadetabs">
    <li><a href="#" rel="country1" class="selected">Tab 1</a></li>
    <li><a href="#" rel="country2">Tab 2</a></li>
    <li><a href="#" rel="country3">Tab 3</a></li>
    <li><a href="#" rel="country4">Tab 4</a></li>
    </ul>
    
    <div style="border:1px solid gray; width:750px; margin-bottom: 1em; padding: 10px">
    
    
    
    <div id="country1" class="tabcontent">
    <div class="ienlarger"><a href="http://www.dynamicdrive.com/"><img src="http://img406.imageshack.us/img406/4920/63734582.jpg" alt="thumb" class="resize_thumb" /><span>
        <img src="http://img406.imageshack.us/img406/4920/63734582.jpg" alt="large" /><br />
        Some text can go here.</span></a></div>
    	<div class="ienlarger"><a href="http://www.dynamicdrive.com/"><img src="http://img406.imageshack.us/img406/4920/63734582.jpg" alt="thumb" class="resize_thumb" /><span>
        <img src="http://img406.imageshack.us/img406/4920/63734582.jpg" alt="large" /><br />
        Some text can go here.</span></a></div>
    </div>
    
    
    
    <div id="country2" class="tabcontent">
     <div class="ienlarger"><a href="http://www.google.co.uk/"><img src="http://img257.imageshack.us/img257/1926/92628379.jpg" alt="thumb" class="resize_thumb" /><span>
        <img src="http://img257.imageshack.us/img257/1926/92628379.jpg" alt="large" /><br />
        Some text can go here.</span></a></div>
    	 <div class="ienlarger"><a href="http://www.google.co.uk/"><img src="http://img257.imageshack.us/img257/1926/92628379.jpg" alt="thumb" class="resize_thumb" /><span>
        <img src="http://img257.imageshack.us/img257/1926/92628379.jpg" alt="large" /><br />
        Some text can go here.</span></a></div>
    </div>
    
    
    
    <div id="country3" class="tabcontent">
    <div class="ienlarger"><a href="http://www.facebook.com/"><img src="http://img442.imageshack.us/img442/6325/87011940.jpg" alt="thumb" class="resize_thumb" /><span>
        <img src="http://img442.imageshack.us/img442/6325/87011940.jpg" alt="large" /><br />
        Some text can go here.</span></a></div>
    	<div class="ienlarger"><a href="http://www.facebook.com/"><img src="http://img442.imageshack.us/img442/6325/87011940.jpg" alt="thumb" class="resize_thumb" /><span>
        <img src="http://img442.imageshack.us/img442/6325/87011940.jpg" alt="large" /><br />
        Some text can go here.</span></a></div>
    </div>
    
    
    
    <div id="country4" class="tabcontent">
    <div class="ienlarger"><a href="#nogo"><img src="http://img691.imageshack.us/img691/7360/89815502.jpg" alt="thumb" class="resize_thumb" /><span>
        <img src="http://img691.imageshack.us/img691/7360/89815502.jpg" alt="large" /><br />
        Some text can go here.</span></a></div>
    </div>
    <div class="ienlarger"><a href="#nogo"><img src="http://img691.imageshack.us/img691/7360/89815502.jpg" alt="thumb" class="resize_thumb" /><span>
        <img src="http://img691.imageshack.us/img691/7360/89815502.jpg" alt="large" /><br />
        Some text can go here.</span></a></div>
    
    </div>
    
    <script type="text/javascript">
    
    var countries=new ddtabcontent("countrytabs")
    countries.setpersist(true)
    countries.setselectedClassTarget("link") //"link" or "linkparent"
    countries.init()
    
    </script>
    
    
    </body>
    </html>
    Last edited by ddadmin; 02-08-2013 at 02:40 AM.

  2. #2
    Join Date
    Aug 2004
    Posts
    9,910
    Thanks
    3
    Thanked 969 Times in 957 Posts
    Blog Entries
    15

    Default

    Inside the HTML markup of your page, you have an extra closing </div> tag inside one of the contents that's throwing off the rendering of the tab contents. Remove the part in red below:

    Code:
    <div id="country4" class="tabcontent">
    <div class="ienlarger"><a href="#nogo"><img src="http://img691.imageshack.us/img691/7360/89815502.jpg" alt="thumb" class="resize_thumb" /><span>
        <img src="http://img691.imageshack.us/img691/7360/89815502.jpg" alt="large" /><br />
        Some text can go here.</span></a></div>
    </div>
    <div class="ienlarger"><a href="#nogo"><img src="http://img691.imageshack.us/img691/7360/89815502.jpg" alt="thumb" class="resize_thumb" /><span>
        <img src="http://img691.imageshack.us/img691/7360/89815502.jpg" alt="large" /><br />
        Some text can go here.</span></a></div>
    
    </div>
    DD Admin

  3. #3
    Join Date
    Jan 2013
    Location
    California
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Thank you ddadmin. Click image for larger version. 

Name:	TabEnlarge.jpg 
Views:	298 
Size:	34.4 KB 
ID:	4936 Alas, removing the extra div did not solve the problem. I have attached a photo of the result. As you can see, all of the tabs display at once, although the enlarging works nicely as before.

  4. #4
    Join Date
    Aug 2004
    Posts
    9,910
    Thanks
    3
    Thanked 969 Times in 957 Posts
    Blog Entries
    15

    Default

    Hmm it seems to do the trick for me- here is the modified page:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    
    
    <style type="text/css">
    
    /* smart image enlarger starts here */
    /* If your images are not linking to other pages leave the links as <a href="#nogo"> Otherwise enlarger won't work in IE6 */
    
    .ienlarger {
    	float: left;
    	clear: none; /* set to left or right if needed */
    	padding-bottom: 5px; /* space between thumbs. Don't change this to margin */
    	padding-right: 5px; /* space between thumbs and wrapping text when there is any text around it */
    }
    
    .ienlarger a { 
    	display:block;
    	text-decoration: none;
    /* add cursor:default; to this rule to disable the hand cursor */
    }
    
    .ienlarger a:hover{ /* don't move this positioning to normal state */
     	position:relative;
    }
    
    .ienlarger span img {
    	border: 1px solid #FFFFFF; /* adds a border around the image */
    	margin-bottom: 8px; /* pushes the text down from the image */
    }
    
    .ienlarger a span {  /* this is for the large image and the caption */
    	position: absolute;
    	display:none;
    	color: #FFCC00; /* caption text colour */
    	text-decoration: none;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 13px; /* caption text size */
    	background-color: #000000;
    	font-weight: bold;
    	padding-top: 10px;
    	padding-right: 10px;
    	padding-bottom: 13px;
    	padding-left: 10px;
    }
    
    .ienlarger img { /* leave or IE puts a border around links */
    border-width: 0;
    }
    
    .ienlarger a:hover span { 
    	display:block;
    	top: 50px; /* means the pop-up's top is 50px away from thumb's top */
    	left: 90px; /* means the pop-up's left is 90px far from the thumb's left */
    	z-index: 100;
    	
    /* If you want the pop-up open to the left of thumb, remove the left: 90px; and add  
    right: 90px; This would mean the right side of the pop-up is 90px far from the right side of thumb */	
    
    /* If you want the pop-up open above the thumb, remove the top: 50px; and add  
    bottom: 50px; This would mean the bottom of the pop-up is 50px far from the bottom of thumb */	
    
    /* add cursor:default; to this rule to disable the hand cursor only for the large image */
    }
    
    .resize_thumb {
    	width: 150px; /* enter desired thumb width here */
    	height : auto;
    }
    
    /* smart image enlarger ends here */
    
    </style>
    <link rel="stylesheet" type="text/css" href="tabcontent.css" />
    
    <script type="text/javascript" src="tabcontent.js">
    
    /***********************************************
    * Tab Content script v2.2-  Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    
    </script>
    
    
    </head>
    
    <body>
    
    
    
    <h3>Demo #1- Basic implementation</h3>
    
    <ul id="countrytabs" class="shadetabs">
    <li><a href="#" rel="country1" class="selected">Tab 1</a></li>
    <li><a href="#" rel="country2">Tab 2</a></li>
    <li><a href="#" rel="country3">Tab 3</a></li>
    <li><a href="#" rel="country4">Tab 4</a></li>
    </ul>
    
    <div style="border:1px solid gray; width:750px; margin-bottom: 1em; padding: 10px">
    
    
    
    <div id="country1" class="tabcontent">
    <div class="ienlarger"><a href="http://www.dynamicdrive.com/"><img src="http://img406.imageshack.us/img406/4920/63734582.jpg" alt="thumb" class="resize_thumb" /><span>
        <img src="http://img406.imageshack.us/img406/4920/63734582.jpg" alt="large" /><br />
        Some text can go here.</span></a></div>
    	<div class="ienlarger"><a href="http://www.dynamicdrive.com/"><img src="http://img406.imageshack.us/img406/4920/63734582.jpg" alt="thumb" class="resize_thumb" /><span>
        <img src="http://img406.imageshack.us/img406/4920/63734582.jpg" alt="large" /><br />
        Some text can go here.</span></a></div>
    </div>
    
    
    
    <div id="country2" class="tabcontent">
     <div class="ienlarger"><a href="http://www.google.co.uk/"><img src="http://img257.imageshack.us/img257/1926/92628379.jpg" alt="thumb" class="resize_thumb" /><span>
        <img src="http://img257.imageshack.us/img257/1926/92628379.jpg" alt="large" /><br />
        Some text can go here.</span></a></div>
    	 <div class="ienlarger"><a href="http://www.google.co.uk/"><img src="http://img257.imageshack.us/img257/1926/92628379.jpg" alt="thumb" class="resize_thumb" /><span>
        <img src="http://img257.imageshack.us/img257/1926/92628379.jpg" alt="large" /><br />
        Some text can go here.</span></a></div>
    </div>
    
    
    
    <div id="country3" class="tabcontent">
    <div class="ienlarger"><a href="http://www.facebook.com/"><img src="http://img442.imageshack.us/img442/6325/87011940.jpg" alt="thumb" class="resize_thumb" /><span>
        <img src="http://img442.imageshack.us/img442/6325/87011940.jpg" alt="large" /><br />
        Some text can go here.</span></a></div>
    	<div class="ienlarger"><a href="http://www.facebook.com/"><img src="http://img442.imageshack.us/img442/6325/87011940.jpg" alt="thumb" class="resize_thumb" /><span>
        <img src="http://img442.imageshack.us/img442/6325/87011940.jpg" alt="large" /><br />
        Some text can go here.</span></a></div>
    </div>
    
    
    
    <div id="country4" class="tabcontent">
    <div class="ienlarger"><a href="#nogo"><img src="http://img691.imageshack.us/img691/7360/89815502.jpg" alt="thumb" class="resize_thumb" /><span>
        <img src="http://img691.imageshack.us/img691/7360/89815502.jpg" alt="large" /><br />
        Some text can go here.</span></a></div>
    
    <div class="ienlarger"><a href="#nogo"><img src="http://img691.imageshack.us/img691/7360/89815502.jpg" alt="thumb" class="resize_thumb" /><span>
        <img src="http://img691.imageshack.us/img691/7360/89815502.jpg" alt="large" /><br />
        Some text can go here.</span></a></div>
    
    </div>
    
    </div>
    
    <script type="text/javascript">
    
    var countries=new ddtabcontent("countrytabs")
    countries.setpersist(true)
    countries.setselectedClassTarget("link") //"link" or "linkparent"
    countries.init()
    
    </script>
    
    
    </body>
    </html>
    I added an extra </div> tag towards the end of the page, to close off the div tag:

    Code:
    <div style="border:1px solid gray; width:750px; margin-bottom: 1em; padding: 10px">
    though that doesn't pertain to the issue at hand it seems either way.
    DD Admin

  5. #5
    Join Date
    Jan 2013
    Location
    California
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Hello DD Admin,

    Thank you for the trouble you are taking on this. I copied the code from DD site into Dreamweaver. When I test in Firefox, I still see the contents of all 4 tabs displayed, instead of just the tab I click on. Each tab clicked should display only two identical photos. What do you get?

  6. #6
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    597
    Thanks
    43
    Thanked 28 Times in 28 Posts

    Default

    I posted this in the other thread which was closed.

    I made this using the demo that was on the tabs script page on the bottom.

    http://www.web-user.info/test/thumbs/bigtest2.html

    I used the same image on each tab but added an extra break at the top to each set of images.

    So you can just change the images and/or adjust the css thumbnail size to work with your needs
    Thanks,

    Bud

  7. #7
    Join Date
    Jan 2013
    Location
    California
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Hello Bud,

    That's looking better! I will see if I can get mine to work.

    Did you notice that each tab moves the images down a bit? Is there a way to keep the images in the same location?

  8. #8
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    597
    Thanks
    43
    Thanked 28 Times in 28 Posts

    Default

    Yes,I mentioned in the post I made above,that I added a break("to move each page down a little to make sure you saw a difference">
    remove the
    Code:
    <br>
    tags from each tab and the all should be the same-if you want to move the pics a little from the top then leave one of the tags there for each tab.

    I redid that page and removed the tags I was talking about.Go back to my page and reload it when you get there.There should no longer be any space from the top of the tabs and they are all the same now
    Last edited by ajfmrf; 02-14-2013 at 12:17 AM. Reason: I edited my page.
    Thanks,

    Bud

  9. #9
    Join Date
    Aug 2004
    Posts
    9,910
    Thanks
    3
    Thanked 969 Times in 957 Posts
    Blog Entries
    15

    Default

    Quote Originally Posted by Granny View Post
    Hello DD Admin,

    Thank you for the trouble you are taking on this. I copied the code from DD site into Dreamweaver. When I test in Firefox, I still see the contents of all 4 tabs displayed, instead of just the tab I click on. Each tab clicked should display only two identical photos. What do you get?
    For me, testing the modified page in FF (18.02) works as intended- I see two images in each tab content area.
    DD Admin

  10. #10
    Join Date
    Jan 2013
    Location
    California
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Hello DD Admin & Bud,

    I hope I am not being pesty...I can't seem to make this combination work. There must be something (somethings!) I don't get.

    I copied bigtest2 and inserted a few of my photos - see code below (some photo divs removed to shorten to the 10,000 max characters). Here is a partial image of the result on tab one. Attachment 4940. I seem to have the same problem as before with displaying two of each photo instead of one. And this time, there is no enlarging (and I don't see the enlarging script in Bud's revised code). Also, I don't see Bud's "thumb" or "resize_thumb" classes in the CSS file or referred to in the JS file.

    Where oh where am I going wrong?

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="tabs.css">
    
    <style type="text/css">
    
    * { margin:0;padding:0; }
    html, body { height:100%; width:100%; text-align:center; }
    #workspace { position:relative; margin-left:auto; margin-right:auto; text-align:left; width:1400px; height:500px; border:1px solid red; }
    
    </style>
    
    <link rel="stylesheet" type="text/css" href="tabcontent.css" />
    
    <script type="text/javascript" src="tabcontent.js">
    
    /***********************************************
    * Tab Content script v2.2-  Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
    
    ***********************************************/
    
    </script>
    
    </head>
    
    <body>
    
    
    
    <div id="workspace">
    
    	<h3>Demo #1- Basic implementation</h3>
    
    
    <ul id="countrytabs" class="shadetabs">
    <li><a href="#" rel="country1">Tab 1</a></li>
    <li><a href="#" rel="country2">Tab 2</a></li>
    <li><a href="#" rel="country3">Tab 3</a></li>
    <li><a href="#" rel="country4">Tab 4</a></li>
    </ul>
    
    
    
    <div style="border:1px solid gray; width:1300px; margin-bottom: 1em; padding: 10px">
    
    
    <div id="country1" class="tabcontent">
    
    <div id="set_3">   
    
    <div class="thumbnail"><a href="#thumb"><img src="projthms/2sconce_miror220.jpg" alt="thumb" class="resize_thumb" /><span>
     <img src="projthms/2sconce_miror220.jpg" alt="large" /><br />Some text can go here.</span></a></div>
    
    <div class="thumbnail"><a href="#thumb"><img src="projthms/2sconce_tree220.jpg" alt="thumb" class="resize_thumb" /><span>
     <img src="projthms/2sconce_tree220.jpg" alt="large" /><br />Some text can go here.</span></a></div>
    
    <div class="thumbnail"><a href="#thumb"><img src="projthms/archwin_227x446.jpg" alt="thumb" class="resize_thumb" /><span>
    <img src="projthms/archwin_227x446.jpg" alt="large" /><br />Some text can go here.</span></a></div>
    
    <div class="thumbnail"><a href="#thumb"><img src="projthms/bdining_220x277.jpg" alt="thumb" class="resize_thumb" /><span>
     <img src="projthms/bdining_220x277.jpg" alt="large" /><br />Some text can go here.</span></a></div>
    
    <div class="thumbnail"><a href="#thumb"><img src="projthms/bedroom_litg220.jpg" alt="thumb" class="resize_thumb" /><span>
    <img src="projthms/bedroom_litg220.jpg" alt="large" /><br />Some text can go here.</span></a></div>
    
    <div class="thumbnail"><a href="#thumb"><img src="projthms/bentry_220x277.jpg" alt="thumb" class="resize_thumb" /><span>
     <img src="projthms/bentry_220x277.jpg" alt="large" /><br />Some text can go here.</span></a></div>
    
    <br><br>
    
    
    <div class="thumbnail"><a href="#thumb"><img src="../p7.jpg" alt="thumb" class="resize_thumb" /><span>
     <img src="../p7.jpg" alt="large" /><br />Some text can go here.</span></a></div>
    
    <div class="thumbnail"><a href="#thumb"><img src="../p8.jpg" alt="thumb" class="resize_thumb" /><span>
     <img src="../p8.jpg" alt="large" /><br />Some text can go here.</span></a></div>
    
    <div class="thumbnail"><a href="#thumb"><img src="../p9.jpg" alt="thumb" class="resize_thumb" /><span>
     <img src="../p9.jpg" alt="large" /><br />Some text can go here.</span></a></div>
    
    <div class="thumbnail"><a href="#thumb"><img src="../p10.jpg" alt="thumb" class="resize_thumb" /><span>
     <img src="../p10.jpg" alt="large" /><br />Some text can go here.</span></a></div>
    
    
    </div> 
    <p style="clear:left" >*</p>
    </div> 
    
    
    <div id="country2" class="tabcontent">
    
    <div id="set_3">   
    
    <div class="thumbnail"><a href="#thumb"><img src="../p1.jpg" alt="thumb" class="resize_thumb" /><span>
     <img src="../p1.jpg" alt="large" /><br />Some text can go here.</span></a></div>
    
    <div class="thumbnail"><a href="#thumb"><img src="../p2.jpg" alt="thumb" class="resize_thumb" /><span>
     <img src="../p2.jpg" alt="large" /><br />Some text can go here.</span></a></div>
    
    <div class="thumbnail"><a href="#thumb"><img src="../p3.jpg" alt="thumb" class="resize_thumb" /><span>
     <img src="../p3.jpg" alt="large" /><br />Some text can go here.</span></a></div>
    
    <div class="thumbnail"><a href="#thumb"><img src="../p4.jpg" alt="thumb" class="resize_thumb" /><span>
     <img src="../p4.jpg" alt="large" /><br />Some text can go here.</span></a></div>
    
    
    <br><br>
    
    
    <div class="thumbnail"><a href="#thumb"><img src="../p7.jpg" alt="thumb" class="resize_thumb" /><span>
     <img src="../p7.jpg" alt="large" /><br />Some text can go here.</span></a></div>
    
    <div class="thumbnail"><a href="#thumb"><img src="../p8.jpg" alt="thumb" class="resize_thumb" /><span>
     <img src="../p8.jpg" alt="large" /><br />Some text can go here.</span></a></div>
    
    <div class="thumbnail"><a href="#thumb"><img src="../p9.jpg" alt="thumb" class="resize_thumb" /><span>
     <img src="../p9.jpg" alt="large" /><br />Some text can go here.</span></a></div>
    
    <div class="thumbnail"><a href="#thumb"><img src="../p10.jpg" alt="thumb" class="resize_thumb" /><span>
     <img src="../p10.jpg" alt="large" /><br />Some text can go here.</span></a></div>
    
    </div> 
    <p style="clear:left" >*</p>
    </div>  
    
    
    
    
    <div id="country3" class="tabcontent">
    
    <div id="set_3">   
    
    <div class="thumbnail"><a href="#thumb"><img src="../p1.jpg" alt="thumb" class="resize_thumb" /><span>
     <img src="../p1.jpg" alt="large" /><br />Some text can go here.</span></a></div>
    
    <div class="thumbnail"><a href="#thumb"><img src="../p2.jpg" alt="thumb" class="resize_thumb" /><span>
     <img src="../p2.jpg" alt="large" /><br />Some text can go here.</span></a></div>
    
    <div class="thumbnail"><a href="#thumb"><img src="../p3.jpg" alt="thumb" class="resize_thumb" /><span>
     <img src="../p3.jpg" alt="large" /><br />Some text can go here.</span></a></div>
    
    <div class="thumbnail"><a href="#thumb"><img src="../p4.jpg" alt="thumb" class="resize_thumb" /><span>
     <img src="../p4.jpg" alt="large" /><br />Some text can go here.</span></a></div>
    
    
    
    <br><br>
    
    <div class="thumbnail"><a href="#thumb"><img src="../p7.jpg" alt="thumb" class="resize_thumb" /><span>
     <img src="../p7.jpg" alt="large" /><br />Some text can go here.</span></a></div>
    
    <div class="thumbnail"><a href="#thumb"><img src="../p8.jpg" alt="thumb" class="resize_thumb" /><span>
     <img src="../p8.jpg" alt="large" /><br />Some text can go here.</span></a></div>
    
    <div class="thumbnail"><a href="#thumb"><img src="../p9.jpg" alt="thumb" class="resize_thumb" /><span>
     <img src="../p9.jpg" alt="large" /><br />Some text can go here.</span></a></div>
    
    <div class="thumbnail"><a href="#thumb"><img src="../p10.jpg" alt="thumb" class="resize_thumb" /><span>
     <img src="../p10.jpg" alt="large" /><br />Some text can go here.</span></a></div>
    
    
    </div> 
    <p style="clear:left" >*</p>
    </div> 
    
    
    
    
    <div id="country4" class="tabcontent">
    
    <div id="set_3">   
    <div class="thumbnail"><a href="#thumb"><img src="../p1.jpg" alt="thumb" class="resize_thumb" /><span>
     <img src="../p1.jpg" alt="large" /><br />Some text can go here.</span></a></div>
    
    <div class="thumbnail"><a href="#thumb"><img src="../p2.jpg" alt="thumb" class="resize_thumb" /><span>
     <img src="../p2.jpg" alt="large" /><br />Some text can go here.</span></a></div>
    
    <div class="thumbnail"><a href="#thumb"><img src="../p3.jpg" alt="thumb" class="resize_thumb" /><span>
     <img src="../p3.jpg" alt="large" /><br />Some text can go here.</span></a></div>
    
    <div class="thumbnail"><a href="#thumb"><img src="../p4.jpg" alt="thumb" class="resize_thumb" /><span>
     <img src="../p4.jpg" alt="large" /><br />Some text can go here.</span></a></div>
    
    <div class="thumbnail"><a href="#thumb"><img src="../p5.jpg" alt="thumb" class="resize_thumb" /><span>
     <img src="../p5.jpg" alt="large" /><br />Some text can go here.</span></a></div>
    
    <br><br>
    
    <div class="thumbnail"><a href="#thumb"><img src="../p7.jpg" alt="thumb" class="resize_thumb" /><span>
    <img src="../p7.jpg" alt="large" /><br />Some text can go here.</span></a></div>
    
    <div class="thumbnail"><a href="#thumb"><img src="../p8.jpg" alt="thumb" class="resize_thumb" /><span>
     <img src="../p8.jpg" alt="large" /><br />Some text can go here.</span></a></div>
    
    <div class="thumbnail"><a href="#thumb"><img src="../p9.jpg" alt="thumb" class="resize_thumb" /><span>
     <img src="../p9.jpg" alt="large" /><br />Some text can go here.</span></a></div>
    
    <div class="thumbnail"><a href="#thumb"><img src="../p10.jpg" alt="thumb" class="resize_thumb" /><span>
     <img src="../p10.jpg" alt="large" /><br />Some text can go here.</span></a></div>
    
    <div class="thumbnail"><a href="#thumb"><img src="../p11.jpg" alt="thumb" class="resize_thumb" /><span>
     <img src="../p11.jpg" alt="large" /><br />Some text can go here.</span></a></div>
    
    
    <p style="clear:left" >*</p>
    
    </div>
    
    </div> 
    
    
    
    <p style="clear:left" >*</p>
    
    </div> 
    
    </div> 
    
    <script type="text/javascript">
    
    
    
    var countries=new ddtabcontent("countrytabs")
    
    countries.setpersist(true)
    
    countries.setselectedClassTarget("link") //"link" or "linkparent"
    
    countries.init()
    
    
    
    </script>
    
    </div>
    
    </body>
    
    </html>
    Last edited by ddadmin; 02-15-2013 at 06:48 PM.

Similar Threads

  1. Mouseover Tabs Menu - IE6 issue with image rollovers
    By slippery_jack in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 12-20-2008, 09:44 PM
  2. Help in mouseover and popup enlarge image
    By giselle2008 in forum JavaScript
    Replies: 1
    Last Post: 03-28-2008, 09:17 AM
  3. Tabs Menu (mouseover) Image Rollover?
    By whitewolf in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 11-10-2007, 10:37 AM
  4. Tabs Menu (mouseover) how to include search so on mouseover form appears
    By parthatel in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 11-11-2006, 06:38 PM
  5. Replies: 2
    Last Post: 02-15-2006, 03:32 PM

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
  •