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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Simple question about javascript function

    Dear all,

    I'm making a portfolio website on wordpress, with on the left side a list of titles of the works and on the right side a grid with their thumbnails.
    What I want to achieve: when you hover over an image the title of the work is highlighted, and the reverse, when you hover the thumbnail of a work, you see its title.

    You can see my code here:
    http://tinyurl.com/6cyoxxu

    I made a jquery script which works for one instance, but I cant make a function to make it work automatically for all the entries. I'm sure it may sound easy for some of you, but javascript is not my strong side. Any hint would be more than appreciated!


    $("#link1").hover(

    function () {
    $("#link1b").addClass("hoverb");
    $(this).addClass("hover");
    },
    function () {
    $("#link1b").removeClass("hoverb");
    $(this).removeClass("hover");
    }
    );
    $("#link1b").hover(
    function () {
    $("#link1").addClass("hover");
    $(this).addClass("hoverb");
    },

    function () {
    $("#link1").removeClass("hover");
    $(this).removeClass("hoverb");
    }
    );
    I want that the div id "link1" or "link1b" be automatically changed to the actual hovered div...

  • #2
    Regular Coder
    Join Date
    Nov 2009
    Posts
    247
    Thanks
    4
    Thanked 22 Times in 22 Posts
    sebstck:

    Try this with your images.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>None</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript">	
    
    	function init(){
    
    		var IE = navigator.appName == "Microsoft Internet Explorer" ? true : false;
    		var nDiv = document.getElementsByTagName('div');
    		for (i=0; i<nDiv.length; i++)
    			{
    			 if (nDiv[i].className == "wrapper")
    				{
    				 var nTitle = nDiv[i].getElementsByTagName('div')[0].getElementsByTagName('li');
    				 var nImage = nDiv[i].getElementsByTagName('div')[1].getElementsByTagName('a');				
    				}
    			}	
    		var nSheet = document.styleSheets;
    		for (i=0; i<nSheet.length; i++)
    			{
    			 IE ? nRule = nSheet[i].rules : nRule = nSheet[i].cssRules;
    			 for (n=0; n<nRule.length; n++)
    				{								
    			 	 if (nRule[n].selectorText == ".title_container")
    					{
    				 	 var resetColor = nRule[n].style.backgroundColor;						 							
    					}
    				}
    			}		
    		var indexContainer = "";
    		var t = 0;
    		for (i=0; i<nTitle.length; i++)
    			{
    			 indexContainer = document.createElement('span');
    			 indexContainer.style.display = "none";
    			 indexContainer.appendChild(document.createTextNode(t));
    			 nTitle[i].appendChild(indexContainer);
    			 indexContainer = document.createElement('span');
    			 indexContainer.style.display = "none";
    			 indexContainer.appendChild(document.createTextNode(t++));
    			 nImage[i].appendChild(indexContainer);
    			}
    		var nIndex = "";
    		for (i=0; i<nTitle.length; i++)
    			{
    			 nTitle[i].onmouseover = function()
    				{
    				 nIndex = this.getElementsByTagName('span')[0].firstChild.data;	
    				 IE ? nImage[nIndex].firstChild.style.filter = "alpha(opacity = 20)" : nImage[nIndex].style.opacity = .2;
    				 this.onmouseout = function()
    					{
    					 IE ? nImage[nIndex].firstChild.style.filter = "alpha(opacity = 100)" : nImage[nIndex].style.opacity = 1;
    					}				
    				}	
    			 nTitle[i].onclick = function()
    				{
    				 nIndex = this.getElementsByTagName('span')[0].firstChild.data;	
    				 location.href = nImage[nIndex].href;		
    				}		 
    			 nImage[i].onmouseover = function()
    				{
    				 nIndex = this.getElementsByTagName('span')[0].firstChild.data;	
    				 nTitle[nIndex].style.backgroundColor = "#87cefa";
    				 this.onmouseout = function()
    					{
    					 nTitle[nIndex].style.backgroundColor = resetColor;
    					}
    				}			 
    			}
    	}
    
    	navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);	
    
    </script>
    <style type="text/css">
    
    	 body {background-color: #f0fff0; margin-top: 50px;}
    
    	.wrapper {width: 530px; height: 355px; margin-left: auto; margin-right: auto;
    		  background-color: #fafad2; border: 1px solid black;}
    
    	.title_container {float: left; width: 37%; height: 100%; border-right: 1px solid black; 
    			  background-color: #f0f8ff;}
    	.title_container ul {list-style: none; margin: 0px; padding: 0px;}
    	.title_container li {text-indent: 8px; font-family: times new roman; font-size: 12pt; 
    			     cursor: pointer; margin-bottom: 5px;}
     	
    	.thumbnail_container {float: left; width: 62%; text-align: center; margin-top: 3px;}
    	.thumbnail_container a {text-decoration: none;}
    	.thumbnail_container img {margin-top: 5px; width: 138px; height: 104px; border: 1px solid blue;}		
    	
    </style>
    </head>
    	<body>
    		<div class="wrapper">
    			<div class="title_container">
    				<ul>
                                  		<li>Title One</li>
    					<li>Title Two</li>
    					<li>Title Three</li>
    					<li>Title Four</li>
    					<li>Title Five</li>
    					<li>Title Six</li>                                               
                            	</ul>					
    			</div>
    			<div class="thumbnail_container">
    				<a href="./images/hard_rock.jpg"><img src="./images/hard_rock.jpg" alt="First Image Description" title="First Image Description"></a>
    				<a href="./images/free_stamp.jpg"><img src="./images/free_stamp.jpg" alt="Second Image Description" title="Second Image Description"></a>
    				<a href="./images/playhouse.jpg"><img src="./images/playhouse.jpg" alt="Third Image Description" title="Third Image Description"></a>
    				<a href="./images/old_court.jpg"><img src="./images/old_court.jpg" alt="Fourth Image Description" title="Fourth Image Description"></a>
    				<a href="./images/society_tower.jpg"><img src="./images/society_tower.jpg" alt="Fifth Image Description" title="Fifth Image Description"></a>
    				<a href="./images/skyline.jpg"><img src="./images/skyline.jpg" alt="Sixth Image Description" title="Sixth Image Description"></a>
    			</div>
    		</div>
    	</body>
    </html>
    Last edited by Sciliano; 07-14-2011 at 07:32 PM. Reason: minor improvements

  • Users who have thanked Sciliano for this post:

    sebstck (07-14-2011)

  • #3
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Waaaa... It worked like a charm. Thank you so much Sciliano!
    I will dissect the code to see how it works out. Anyway, thanks a bunch !!!


  •  

    Tags for this Thread

    Posting Permissions

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