Hello,
This is a stupid beginner question I have a row of images with the
class of "highlight" I would like to make them fade from 100% opacity
to say 50%. I'm pretty sure i have to use the new Effect.Opacity
("class", {duration:0.5, from:1.0, to:0.5});
here is what I've tried as far as javascript:
<script type="text/javascript">
Event.observe(window, 'load', function() {
$$(".highlight").observe('mouseover', function() {
new Effect.Opacity(".highlight", {duration:0.5, from:1.0, to:
0.5});
});
$$(".highlight").observe('mouseout', function() {
new Effect.Opacity(".highlight", {duration:0.5, from:0.5, to:
1.0});
});
});
</script>
then my image row:
<table width="300">
<tr>
<td>
<a href="web/bandonrandon.php" class="highlight"><img
src="../../
Images/portfolio/thumb_bandonrandon.jpg" /></a>
</td>
<td>
<a href="web/tjsherrill.php" class="highlight"><img
src="../../
Images/portfolio/thumb_TJ.jpg" /></a>
</td>
<td>
<a href="web/almendrasandoval.php"
class="highlight"><img
src="../../Images/portfolio/thumb_sandoval.jpg" /></a>
</td>
</tr>
</table>
I believe an alternative solution would be to use the onmouseover and
onmouseout to each link but i think that it would be a more bloated
way of doing it.
Any help on this would be great. I'm trying to get familiar with
prototype. I have found jquary alternatives but I'm using prototype
all over this site and don't want to load a library just for one
function.
Thanks,
Brandon
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---
