Div Rollovers

[Emmanize]

I have a couple of questions about div rollovers:

1: How do you make a div rollover (not as a link?)
2: How can I give it the fade in/fade out effect?

If anyone knows the JS please post it as I have searched google and never found a straight forward answer.

[Drazan]

funny - google popped up very valid responses for:
javascript menu face buttons

Everything from source code examples to downloadable programs to do it for you.

also when searching try different arangement of the words you are searching for.

[JPnyc]

Well the event handlers are onmouseover,and onmouseout, but you didn't say what you want to happen, on the rollover

[tZ]

javascript


window.onload = function() {
var node = document.getElementById('box');
node.color1 = [256,256,256];
node.color2 = [50,240,90];
transform(node);
}

function roundto(base,precision) {
var m = Math.pow(10,precision);
var a = Math.round(base*m)/m;
return a;
}

function transform(node) {
node.transform = [];
node.steps = 200;
for(var i=0;i<node.color1.length;i++) {
if(Math.abs(node.color2[i]-node.color1[i]) >= node.steps) {
node.transform[i] = (node.color2[i]-node.color1[i])/node.steps;
} else {
node.transform[i] = (node.color2[i]-node.color1[i])/node.steps;
}
node.transform[i] = roundto(node.transform[i],2);
}
gradient(node);
}

function gradient(node) {
node.incerment = [];
node.newcolor = [];
for(var i=0;i<node.transform.length;i++) {
node.incerment[i] = 0;
}
function set_gradient(node) {
if(node.incerment[0] == node.steps) {
alert(node.newcolor);
clearInterval(node.interval);
} else {
for(var i=0;i<node.transform.length;i++) {
node.incerment[i] = node.incerment[i]+1;
node.newcolor[i] = node.color1[i] + Math.round(node.incerment[i] * node.transform[i]);
}
node.style.backgroundColor = 'rgb('+ node.newcolor[0] +','+ node.newcolor[1] +','+ node.newcolor[2]+')';
}
}
node.interval = setInterval(set_gradient,50,node);
}



var node = document.getElementById('box');

This statement gets the element you want to change the color of.

node.color1 = [256,256,256];

color1 is color the object is initially. So this will be color of the object that is set in CSS.

node.color2 = [50,240,90];

This will be the color of the object after the transformation.

node.steps = 200;

can be any value but this simply put the number of frames in the animation. So if you have 200 frames then the animation will be slower then if you only have 50 frames.

[Emmanize]

Thanks Guys,

Its not for a nav menu, its actually for six paragraphs that I want to be highlighted when the user hovers over them. Mainly to make the site more colourful and interactive. The paragraphs are listed so this would also help separate them a little bit. As the paragraphs are not going to br full links I am not sure how to do it.

Here is an example:


<div class="information">
<div class="small_image_b"><img src="images/aboutgess.jpg" alt="" /></div>
<h3>Why Exhibit at Gess</h3>
<p>Morbi tincidunt porta neque. Nulla facilisi. Mauris nec eros. Sed pretium magna et ipsum. Donec aliquet. Fusce varius dictum magna. Curabitur tempor.</p>
</div><!--INFO DIV-->

<div class="information">
<div class="small_image_b"><img src="images/why_exhib.jpg" alt="" /></div>
<h3>Why Exhibit at Gess</h3>
<p>Morbi tincidunt porta neque. Nulla facilisi. Mauris nec eros. Sed pretium magna et ipsum. Donec aliquet. Fusce varius dictum magna. Curabitur tempor.</p>
</div><!--INFO DIV-->

<div class="information">
<div class="small_image_b"><img src="images/sponceropp.jpg" alt="" /></div>
<h3>Sponsership</h3>
<p>Morbi tincidunt porta neque. Nulla facilisi. Mauris nec eros. Sed pretium magna et ipsum. Donec aliquet. Fusce varius dictum magna. Curabitur tempor.</p>
</div><!--INFO DIV-->

<div class="information">
<div class="small_image_b"><img src="images/stand.jpg" alt="" /></div>
<h3>Reserve a Stand</h3>
<p>Morbi tincidunt porta neque. Nulla facilisi. Mauris nec eros. Sed pretium magna et ipsum. Donec aliquet. Fusce varius dictum magna. Curabitur tempor.</p>
</div><!--INFO DIV-->

<div class="information">
<div class="small_image_b"><img src="images/venue.jpg" alt="" /></div>
<h3>The Venue</h3>
<p>Morbi tincidunt porta neque. Nulla facilisi. Mauris nec eros. Sed pretium magna et ipsum. Donec aliquet. Fusce varius dictum magna. Curabitur tempor.</p>
</div><!--INFO DIV-->

<div class="information">
<div class="small_image_b"><img src="images/contact.jpg" alt="" /></div>
<h3>Contact Us</h3>
<p>Morbi tincidunt porta neque. Nulla facilisi. Mauris nec eros. Sed pretium magna et ipsum. Donec aliquet. Fusce varius dictum magna. Curabitur tempor.</p>
</div><!--INFO DIV-->



I want each info div to become highlighted when a mouse hovers over them,
in different colours if that is possible..

[tZ]

I don't know if your still looking but, I wrote up how to add eventlisteners to a node and register them. Then handle the event with a handler here:

http://www.graphicdesignforum.com/forum/showthread.php?p=398882#post398882

[tZ]

This will change the paragraphs color based on the color you set in the nc attribute of each div.

listeners.js

function addEvent(elm,evType,fn,useCapture) {
if(elm.addEventListener) {
elm.addEventListener(evType,fn,useCapture);
return true;
} else if(elm.attachEvent) {
var r = elm.attachEvent('on'+evType,fn);
return r;
} else {
elm['on'+evType]=fn;
}
}



window.onload = function() {

load_listeners();

}



function load_listeners() {

var list = document.getElementById('paragraphs');
var para = list.getElementsByTagName('div');
for(var i=0; i< para.length;i++) {

/*nav_list[i].link = nav_list[i].getElementsByTagName('a')[0];

para[i].style.cursor = "pointer";
nav_list[i].images = nav_list[i].link.getElementsByTagName('img')[0];*/
addEvent(para[i],'mouseover',over,false);

addEvent(para[i],'mouseout',out,false);

}

}



function over(e) {

var el;
if(window.event && window.event.srcElement)
el = window.event.srcElement;
if(e && e.target)
el = e.target;
while(el.nodeName.toLowerCase() != 'div' &&
el.nodeName.toLowerCase() != 'body')
el = el.parentNode;
if(el.nodeName.toLowerCase() == 'body')
return;


el.newcolor = (el.getAttribute('nc'));
el.heading = el.getElementsByTagName('h3')[0];
el.copy = el.getElementsByTagName('p')[0];
el.heading.style.color = el.newcolor;
el.copy.style.color = el.newcolor;

}



function out(e) {

var el;
if(window.event && window.event.srcElement)
el = window.event.srcElement;
if(e && e.target)
el = e.target;
while(el.nodeName.toLowerCase() != 'div' &&
el.nodeName.toLowerCase() != 'body')
el = el.parentNode;
if(el.nodeName.toLowerCase() == 'body')
return;



el.heading = el.getElementsByTagName('h3')[0];
el.copy = el.getElementsByTagName('p')[0];
el.heading.style.color = "black";
el.copy.style.color = "black";
}


I had to fiddle around with your html to set this up somewhat correctly- so here is that:

home.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>portfolio</title>
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<script language="javascript" type="text/javascript" src="listeners.js"></script>
<head>
</head>
<body>

<div id = "paragraphs">

<div id="info1" nc = "blue">
<!--<div class="small_image_b"><img src="images/aboutgess.jpg" alt="" /></div>-->
<h3>Why Exhibit at Gess</h3>
<p>Morbi tincidunt porta neque. Nulla facilisi. Mauris nec eros. Sed pretium magna et ipsum. Donec aliquet. Fusce varius dictum magna. Curabitur tempor.</p>
</div><!--INFO DIV-->

<div id="info2" nc = "red">
<!--<div class="small_image_b"><img src="images/why_exhib.jpg" alt="" /></div>-->
<h3>Why Exhibit at Gess</h3>
<p>Morbi tincidunt porta neque. Nulla facilisi. Mauris nec eros. Sed pretium magna et ipsum. Donec aliquet. Fusce varius dictum magna. Curabitur tempor.</p>
</div><!--INFO DIV-->

<div id="info3" nc = "green" >
<!--<div class="small_image_b"><img src="images/sponceropp.jpg" alt="" /></div>-->
<h3>Sponsership</h3>
<p>Morbi tincidunt porta neque. Nulla facilisi. Mauris nec eros. Sed pretium magna et ipsum. Donec aliquet. Fusce varius dictum magna. Curabitur tempor.</p>

</div><!--INFO DIV-->

</div>

</body>
</html>


The main thing to remember is that I added a attribute of nc(new color) to each div. This attribute represents the color that each will change to. I also wrapped the entire thing in another div of ID paragraphs to make it easier to reference the child divs.

You don't really need to know anything about the javascript. Just that the last two statements in the out function set the paragraphs to their default color- in this case its black but, you can make it what ever you like.

Just copy the javascript and save it as listeners.js. Then place it in the same folder as this "home.html" page. It should then work without a problem. In this instance, you won't need to cancel any click effects because there isn't a anchor present. It all works using listeners that are attached to the divs themselves.

hope that helps