jQuery Simple question about javascript function

sebstck · 07-14-2011, 12:17 PM

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!

Quote:

$("#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...

Sciliano · 07-14-2011, 04:41 PM

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>

sebstck · 07-14-2011, 05:50 PM

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 !!!