View Full Version : image swaping and style changing

07-31-2006, 05:31 PM
I'm working on a portfolio project that has a page containing up to 8 image thumbnails down the side, and in the middle one large image which is the selected. What i'm trying to do is have the selected image thumbnail stay solid and color, while the rest are in a gray scale and slightly transparent, and when there rolled over they will change to solid. I have this working correctly. The problem is when i click on one of the other images i need it to change the "onmouseover" and "onmouseout" for that image so that it doesn't change and is now the selected one, while all the others now have rollovers. Everything is dynamically driven so i will never truly know file names or the amount (just up to 8) of the images which makes this a little tougher.

Here is what i've come up with so far...

function ShowColor(image){
document.getElementById(image).style.filter = '';
function HideColor(image){
document.getElementById(image).style.filter = 'Gray Alpha(Opacity=50)';


function SwapImage(image_name, num){
var NewImage = document.getElementById(image_name).value;
var ProjID = document.getElementById('ProjID').value;

document.getElementById('MainImage').src = '/graphics/portfolio/' + ProjID + '/' + NewImage;

for(j=1; j<9; j++)

if(document.getElementById('thumb'+j) != null){

document.getElementById('thumb'+j).style.filter = 'Gray Alpha(Opacity=50)';
document.getElementById('thumb'+j).onmouseover = function(){ShowColor('thumb' + j);}
document.getElementById('thumb'+j).onmouseout = function(){HideColor('thumb' + j);}

document.getElementById('thumb' + num).onmouseout = '';
document.getElementById('thumb' + num).onmouseover = '';
document.getElementById('thumb' + num).style.filter = '';


and there are 8 images called as follows...

<img src="/graphics/portfolio/#thisPageContent.PortfolioID#/#Replace(thisPageContent.ProjImage2,".jpg","","ALL")#_small.jpg" border="0" style="Filter: Gray Alpha(Opacity=50);" id="thumb2" onmouseover="ShowColor('thumb2');" onmouseout="HideColor('thumb2');" onClick="SwapImage('image2',2);" />

So basically what this does is the first 2 functions takes in the id in an event handler and either shows it in color or grey depending on mouseover or out. Each of the eight images have id's thumb1 - thumb8.

The only part of this that doesn't work is in the SwapImage function. What this does is actually swaps the large image with whatever thumbnail was clicked (that is all working so now worries there) but then what it does in the for loop is sets each image (if they exist) to grey and then adds a the mouseover and mouseout to each one (even the clicked one). And then after the clicked one it sets the stlye, mouseover, and mouseout based on which was clicked (which is passed through the event handler, this is also working). So basically the only piece of this thing i'm having a hard time with is in the SwapImage function, when trying to set the mouseover and mouseout events. All its trying to do is set them to call the original functions but it doesn't seem to want to take it with the event handler.

Any help or advice would be great, thanks,

EDIT: i also just noticed that in the for loop the variable "j" is getting into the functions called on mouseover and mouseout as "9" as if the functions get called after the loop is run.

07-31-2006, 06:46 PM
why are you putting

document.getElementById('thumb'+j).onmouseover = function(){ShowColor('thumb' + j);}
document.getElementById('thumb'+j).onmouseout = function(){HideColor('thumb' + j);}

arent those functions already defined above that part? try:

document.getElementById('thumb'+j).onmouseover = ShowColor('thumb' + j);
document.getElementById('thumb'+j).onmouseout = HideColor('thumb' + j);

07-31-2006, 06:52 PM
right they are already defined. I wasn't redefining them. I was having a hard time calling a function that also contained an eventhandler when setting it that way, so i was trying to create another function as shown that just calls my initial function.

either way both of the above examples don't work.

07-31-2006, 06:56 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<script language="JavaScript" type="text/javascript">

function zxcAddGray(zxccls,zxcid){
var zxcdivs=document.getElementsByTagName('BODY')[0].getElementsByTagName('DIV');
var zxcobj=document.getElementById(zxcid);
var zxcimgs=zxcobj.getElementsByTagName('IMG');
for (var zxc0=0;zxc0<zxcimgs.length;zxc0++){ zxcStyle(zxcimgs[zxc0],{position:'absolute',visibility:'hidden',left:'0px',top:'0px'}); }
var zxccnt=0;
for (var zxc0=0;zxc0<zxcdivs.length;zxc0++){
if (zxcdivs[zxc0].className){
if (zxcdivs[zxc0].className.match(zxccls)){
var zxcgd=zxcStyle('DIV',{position:'absolute',left:'0px',top:'0px',width:'100%',height:(zxcdivs[zxc0].offsetHeight)+'px',backgroundColor:'gray'});
if (zxcOpacity(zxcgd,50)){

function zxcMse(){
var zxcimgs=this.obj.getElementsByTagName('IMG');
for (var zxc0=0;zxc0<zxcimgs.length;zxc0++){ zxcimgs[zxc0].style.visibility=(zxc0==this.cnt)?'visible':'hidden'; }
var zxcgd=this.getElementsByTagName('DIV')[0];
if (!zxcgd){ return; }

function zxcStyle(zxcele,zxcstyle,zxctxt){
if (typeof(zxcele)=='string'){ zxcele=document.createElement(zxcele); }
for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }
if (zxctxt){ zxcele.appendChild(document.createTextNode(zxctxt)); }
return zxcele;

function zxcOpacity(zxcobj,zxcopc) {
if (zxcopc<0||zxcopc>100){ return false; }
if (zxcobj.style.MozOpacity!=null){ zxcobj.style.MozOpacity=(zxcopc/100)-.001; return true; }
else if (zxcobj.style.opacity!=null){ zxcobj.style.opacity=(zxcopc/100)-.001; return true; }
else if (zxcobj.style.filter!=null){ zxcobj.style.filter = 'alpha(opacity='+zxcopc+')'; return true; }
else if (zxcobj.KHTMLOpacity!=null){ zxcobj.KHTMLOpacity=(zxcopc/100)-.001; return true; }
return false;

function zxcEventAdd(zxco,zxct,zxcf) {
if ( zxco.addEventListener ){ zxco.addEventListener(zxct, function(e){ zxco[zxcf](e);}, false); }
else if ( zxco.attachEvent ){ zxco.attachEvent('on'+zxct,function(e){ zxco[zxcf](e); }); }
else {
var zxcPrev=zxco["on" + zxct];
if (zxcPrev){ zxco['on'+zxct]=function(e){ zxcPrev(e); zxco[zxcf](e); }; }
else { zxco['on'+zxct]=zxco[zxcf]; }

var zxcEvt=0;

function zxcAddEvt(zxco,zxcfun,zxcevt){
if (zxco['zxc'+zxcfun+zxcevt]){ return; }


<body onload="zxcAddGray('zxcgray','Main');" >
<div class="zxcgray" style="position:relative;overflow:hidden;width:50px;height:50px;" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="50" height="50" >
<div class="zxcgray" style="position:relative;overflow:hidden;width:50px;height:50px;" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width="50" height="50" >
<br />
<div class="zxcgray" style="position:relative;overflow:hidden;width:50px;height:50px;" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" width="50" height="50" >

<div id="Main" style="position:relative;width:400px;height:400px;" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="400" height="400" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width="400" height="400" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" width="400" height="400" >