Quote:
Originally Posted by vincentccw
Im a designer and i m a total noob in javascript, would appreciate very much if you could be patient with me....  |
Lucky you! I'm very patient today....
Look in the comments for instructions on how to use the script. Good luck!
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">
<head>
<title>Click Rollovers</title>
<script type="text/javascript">
/* <![CDATA[ */
//Cross-Browser Events (required)
function addEvent(elm, evType, fn) {
if (elm.addEventListener) {
elm.addEventListener(evType, fn, false);
} else if (elm.attachEvent) {
elm.attachEvent('on' + evType, fn);
} else {
elm['on' + evType] = fn;
}
}
//Generic function for retrieving an event's target (required)
function getTarget(e){
var target = window.event ? window.event.srcElement : e ? e.target : null;
if (!target){return false;}
while(target.nodeType!=1 && target.nodeName.toLowerCase()!='body'){
target=target.parentNode;
}
return target;
}
rollover = {
preLoads:[],
init: function () {
var imgs = document.images;
for( var i=0; i<imgs.length; i++ ) { //loop through the images
if ( imgs[i].className == 'roll' ) { //if they have the 'roll' className then...
var oversrc = imgs[i].src.replace('.', ('_on' + '.') ); //create a variable and store the on/rollover version of each image, which is the initial image's name plus the "_on" addon
rollover.preLoads[i] = new Image();
rollover.preLoads[i].src = oversrc; //Preload the on/rollover image
addEvent( imgs[i], 'click', rollover.roll ); //onclick...
}
}
},
roll: function (e) {
var t = getTarget(e);
var c = t.src;
var ison = c.indexOf('_on');
if ( ison == -1 ) {//If the clicked image does not have the "_on" addon then...
t.src = c.replace( '.', ('_on' + '.') ); //we add the "_on" addon to that clicked image
}
else { //else we take it out
t.src = c.replace( ('_on' + '.'), '.' );
}
}
};
addEvent( window, 'load', rollover.init );
/* ]]> */
</script>
</head>
<body>
<!-- There must be an image named "first_on" in your directory -->
<img src="first.png" class="roll" alt="" /> <br />
<!-- There must be an image named "second_on" in your directory -->
<img src="second.png" class="roll" alt="" />
<!--//Add as many as you want... ***remenber the "_on" addon//-->
</body>
</html>
Before you post, read our: 
