How to add opacity rollover to these images?

kippie · 09-26-2006, 11:09 PM

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

</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 · 09-27-2006, 11:55 PM

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

Rollover

Comtrad · 10-02-2006, 03:13 PM

09-26-2006, 11:09 PM	#1 (permalink)
kippie Registered User Join Date: Jan 2005 Posts: 10 OS: XP	How to add opacity rollover to these images? 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=(totalRowscellsPerRow)-totalCells; maxCells=totalRowscellsPerRow; 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>

09-27-2006, 11:55 PM	#2 (permalink)
xpspecial Registered User Join Date: Aug 2003 Posts: 77 OS: XP	Does this help any? (I apologize if not, I tried) Rollover

10-02-2006, 03:13 PM	#3 (permalink)
Comtrad Registered User Join Date: Sep 2006 Location: Somewhere in Illinois Posts: 279 OS: Windows XP	<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.