# How to add opacity rollover to these images?



## kippie (Jan 29, 2005)

In the html below I would like to add a roll over to the 4 images to change their opacity from for example 60 to 100. I added another fifth image (druiven.jpg at the end of the html) to show what I would like to achieve with the 4 images also. I hope someone could help.

This is the html I have so far: 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Dom Table 2</title>
<base href="http://mysite.orange.co.uk/achelous/">

<style>
.pic, a.pic, a.pic img { filter: Alpha(opacity=60); -moz-opacity: 0.7; }
a.pic:hover, a.pic:hover img { filter: Alpha(opacity=100); -moz-opacity: 1.0; } 
</style>


<script type="text/javascript">
<!--
var mywindow;
var features='resizable=yes,width=320,height=320';

var data=['http://www.festifood.nl/aardbei.jpg','http://www.festifood.nl/appel.jpg','http://www.festifood.nl/broccoli.jpg','http://www.festifood.nl/citroenopt.jpg'];
var url=['contact.html','http://www.yahoo.com','http://www.google.com','http://www.w3schools.com'];
var cellsPerRow=2; // Number Of cells Per Row

var spanLastCell=0; // 0 = no, 1 = yes

function createTable() {
cellsPerRow=cellsPerRow;

if(cellsPerRow>window['data'].length) {
cellsPerRow=window['data'].length;
}

totalCells=window["data"].length;
totalRows=Math.ceil(totalCells/cellsPerRow);

if(spanLastCell==0) {
totalCells=Math.ceil(totalCells);
while(totalCells%cellsPerRow != 0) {
totalCells++;
window["data"][totalCells-1]=[' '];
}
}

startCount=0;
endCount=cellsPerRow;

newTable=document.createElement('table');
newTable.setAttribute('id','thumbtable');

newTBody=document.createElement('tbody');

for(i=0;i<totalRows;i++) {
newRow=document.createElement('tr');

for(j=startCount;j<endCount;j++){
newCell=document.createElement('td');

anc=document.createElement('a')
anc.setAttribute('href',url[j]);

newImg=document.createElement('img');
newImg.setAttribute('src',data[j]);
newImg.setAttribute('border',0);
anc.appendChild(newImg);
newCell.appendChild(anc);

spanSize=(totalRows*cellsPerRow)-totalCells;
maxCells=totalRows*cellsPerRow;
spanColumns=(maxCells-totalCells)+1;
if(j==totalCells-1) {
newCell.colSpan=spanColumns;
}
newRow.appendChild(newCell);
}

startCount+=cellsPerRow;
endCount+=cellsPerRow;
if(endCount>totalCells){
endCount-=endCount-totalCells;
}
newTBody.appendChild(newRow);
}
newTable.appendChild(newTBody);

document.getElementById('my_table').appendChild(newTable);
links=document.getElementById('my_table').getElementsByTagName('a');
for(c=0;c<links.length;c++) {
links[c].onclick=function() {
if(mywindow) {
mywindow.close();
}
mywindow=window.open(this.href,'',features);
mywindow.focus();
return false;
}
}
}

window.onload=createTable;
// -->
</script>

<style type="text/css">
#thumbtable {
border:1px solid #000;
}
#thumbtable td{
width:80px;
height:80px;
text-align:center;
border:0 solid;
}
#thumbtable img {
display:block;
width:70px;
height:70px;
margin:3px;
border:2px solid #000;
}
</style>

</head>
<body>

<div id="my_table"></div>

<a class="pic" href="#"><img class="pic" src="http://www.festifood.nl/druiven.jpg" width="80" height="80" border="0" alt=""></a>

</body>
</html>


----------



## xpspecial (Aug 12, 2003)

Does this help any? (I apologize if not, I tried)

Rollover


----------



## Comtrad (Sep 21, 2006)

<style>
.pic, a.pic, a.pic img { filter: Alpha(opacity=60); -moz-opacity: 0.7; }
a.pic:hover, a.pic:hover img { filter: Alpha(opacity=100); -moz-opacity: 1.0; } 
</style>

play with those #'s to change the opacity.


----------

