How to add opacity rollover to these images?

vanbeugen · Sep 26, 2006

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/">

http://www.festifood.nl/aardbei.jpg...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>

ggriffit · Sep 27, 2006

from the look of it you need to add a element to the DATA and URL arrays. For a finished example take a look at

http://www.greggriffiths.org

although this is similar it is not standards compliant at the mo, a standards compliant one can be found at

http://www.cognitaparents.org.uk/

Greg Griffiths
Livelink Certified Developer & ECM Global Star Champion 2005

http://www.greggriffiths.org/livelink/

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

How to add opacity rollover to these images?

vanbeugen

IS-IT--Management

ggriffit

Programmer

Similar threads

Part and Inventory Search

Sponsor