thanks for you reply.
I need the highlighter to integrat ein an existing script, that is
loading images sequential one after another and fades them in. So I
thought about the idea of the overlay and think it would be better to
just give all images an alpha of 60% and when rolling over they get to
100%. Can you help me to integrate this into that existing script?
that would be great!
// DOM Ready
$(function () {
// Image Sources
var images = new Array();
images[0] = 'http://imagesource.com/image1.jpg';
images[1] = 'http://imagesource.com/image2.jpg';
images[2] = 'http://imagesource.com/image3.jpg';
// images length
var max = $(images).length;
// at least 1 image exist
if(max>0)
{
// create the UL element
var ul = $('<ul id="portfolio"></ul>');
// append to div#wrapper
$(ul).appendTo($('#wrapper'));
// load the first image
LoadImage(0,max);
}
// function of loading image
// params: (int) index of image in array, (int) length of images
array
function LoadImage(index,max)
{
// if current index is lower then max element (max-1)
if(index<max)
{
// create the LI, add loading class
var list = $('<li id="portfolio_'+index+'"></
li>').attr('class','loading');
// append to UL
$('ul#portfolio').append(list);
// current LI
var curr = $("ul#portfolio
li#portfolio_"+index);
// new image object
var img = new Image();
// image onload
$(img).load(function () {
$(this).css('display','none'); //
since .hide() failed in safari
$(curr).removeClass('loading').append(this);
$(this).fadeIn('slow',function(){
// once the current loaded, trigger
the next image
LoadImage(index+1,max);
});
}).error(function () {
// on error remove current
$(curr).remove();
// trigger the next image
LoadImage(index+1,max);
}).attr('src', images[index]);
}
}
});
On 2 Okt., 14:53, BB <[EMAIL PROTECTED]> wrote:
> Try this:
> $(".overlay-div").hover(function() {
> $(this).fadeTo("fast", 0);}, function() {
>
> $(this).fadeTo("fast", 0.6);
>
> });
>
> On 2 Okt., 09:13, christianslater <[EMAIL PROTECTED]>
> wrote:
>
> > hi there,
> > I`m really new to Javascript and looking for a solution to highlight
> > images. So there are small thumbs on the page with an black overlay
> > with maybe 60% opacity. If You rollover the image the opacity fades to
> > 0...
>
> > Can anyone help me?
>
> > thanks in advance!
