PDA

View Full Version : How to reference parent layer of image?



toastie
09-30-2004, 10:23 AM
on mouseover I wish to call a function that will change the z-index of the layer containing the image, without calling the container layer by name.
So a function something like:

function bringtofront(cur)
{
(eg. cur.containerlayer.z-index=200)
}

and inside the <img> tag:
onMouseover=bringtofront(this)


Is there a way of passing the current object and referencing the current object's container layer's properties without using the name of the layer?
I need to do this because I will have a number of these on various pages.
Perhaps I can send the parent layer rather than the current object to the function?

Any suggestions welcome.
Thankyou.
(bit of a newb to .js, so the logic is fine but the syntax is missing!)

ddadmin
09-30-2004, 10:28 AM
It depends on how your image is nested within this layer. If you could post the code of both the layer and image (and how the later is enclosed within the former), that would help.

toastie
09-30-2004, 10:39 AM
Wow - that was quick!
I am pseudoing at the moment and just want to prove I can do what I'm planning. Perhaps if I explain that it will help.
As an exmple:
Target Layout: will have say 6 photo's in a row across the page, all in view
Target Effect: when mouse rolls over 1 image, the other 5 become 50% visible.

My plan is to do this using layers:
1. Each photo has a container layer (just to hold that photo) (z-index=100)
2. There is a single 'screen' layer behind all the container layers (z-index=0)
3. on mousover the following occurs:
a) the photo rolled over comes to the front (z-index=300)
b) the 'screen layer screens all the other photos (50% opacity) (z-index=200)

The effect is the all the others become less prominent and the 'infocus' (sotospeak) photo is clear and emphasised.

Its the reverse of one of your sites scripts, but if I used that approach and set all the 'other' images to 50% opacity individually I don't the effect would be slick enough.

What do you think?

thankyou.

toastie
09-30-2004, 10:29 PM
Well, I've made some progress. It's not slick enough yet but not too bad.
The styles need tidying up and the script could probably be made to loop if I was feeling really keen but this is the general idea of what I was aiming at. It will look better with better pics optimised for this screen too.

I've even got the opacity working with netscape - yippee.
I will tidy up my styles next. Not sure if I have time (for the money I'm getting!) but it would nice if the 'screen' layer gradually appeared, rather than just becoming visible. Anyone know how to do that?

If you'd like to look I have loaded it up here:
Demo of Picture Highlite - Picture de-focus using layers (http://www.linkmatics.com/public_html/testpage)
To use just mouseover any picture - the others will be grayed out.

simonf
10-01-2004, 05:36 AM
Hi Toastie

Why dont you just place the image in a table within the laer and them change the visability, i.e:

<font face="Verdana" onmouseout="FP_changePropRestore();" onmouseover=" FP_changeProp(/*id*/'layer3',1,'style.visibility','visible')" id="id5">
see a image pop-up for Toastie</font></td>

see http://www.cherrycreektrading.co.za/blossom.htm for an example

rgds,Simon

toastie
10-01-2004, 08:54 AM
Hi Simon, thanks for the interest.
I like the petals effect. Did your image a day work out?
Did you go to the demo page?
http://www.linkmatics.com/public_html/index.html

It is not about making the photos visible/hidden.

The effect is that when you rollover a photo (say photo4) ALL THE OTHER photos are screened by a layer (called 'screen' that comes in front of all the 'other' photos layers) with 45% opacity. This gives the 'optical illusion' effect of sharpening the picture you have rolled over.

I do this by calling show(id,photo_id) which;
1. brings the rolled over photo4 to the front by changing z-index to 40
2. making the 'screen' visible

when rollout hide(id,photo_id) :

1. Set photo4 back to z-index=20
2. make 'screen' hidden

Its easy enough to change a property of the object in question, but I am changing the visual effect off all the 'other' photos which is a bit more tricky.

Interested to know if you can think of a better way (my javascript vocab is pretty small!) - or a way to 'fadein' the screen layer?! Perhaps by stepped opacity...

toastie
10-04-2004, 03:05 PM
...because I use the 'opacity' filter it turns out this is not supported by Opera, and does not seem to work on Safari either (the effect is the 'screen' is not at all transparent - hence simonf's post I guess; I'm supposing he was using on of these browsers)

...any suggestion on a solution that complys with w3c (rather than an ie extension)???????????????????

thankyou

toastie
01-29-2005, 12:30 PM
Because this is kind of a favour for a photographer it has been on the back-burner for a while. However I have just picked it up again and I am doing it in flash because I could not find a way to do it in html/css with current browser incompatibilities.

I am using Macromedia Flash MX 2004 pro. and have successfully achieved the objective.

Once it is tidied up I will leave a site reference here for those interested.