Want to hover over an object and have the other objects dim

Just learning how to use the mouse over layer. I have 6 thumbnail links on a page mouse off layer which link to other pages. I copied the six images on the mouse off layer, pasted them into the current layer Mouse Over, located them over those six thumbs on the Mouse Off layer, then color edited them to make them dim. When I preview them if I mouse over one it dims the bright image under it on the Mouse Off layer. That's fine, but I want to mouse over one and have the other 5 dim out, not the one I am moused over.

I just thought of a way to do it, but don't know whether it will work or if it's the best way... Should I make a square that is transparent and covers all the thumbs, then paste the six thumbs onto it some how, then make six dups of these six squares, then paste them into the mouse off layer and make them all dim like before, then erase one thumb on each one that will allow it to stay clear when moused over but cause the other 5 to dim??

Not sure if I am thinking this through clearly or explaining it clearly yet.

Thanks,

Well, that worked.. I made the rectangle to cover all the thumbs, then made it transparent. Then I selected 5 of the thumbs and copied them with the rectangle to the mouse over layer. I grayed the five thumbs on the mouse Over layer then grouped them with the clear rectangle... it works! When I preview and mouse over the area missing a thumb the other ones all dim. Will make 5 more like this with a blank area for each mouse over thumb.

If someone has an easier way to do this I'm all ears. Thanks,

Am doing something wrong. With multiple layers of these in the Mouse Over, if I mouse over one, it dims all of them... #%*+#

Do you want to dim the content of the entire page or just the other thumbnails?

Create a layer for each of the thumbnails. On the specific layer place transparent rectangles over all but the current thumbnail. I think that would work.

I don't think it can be done using a mouse over layer. I think you need to do it with multiple pop-up layers.

Gary: I set up a new test page with only three thumbs to make it easier. I want all of them to be full color until one of them is moused over and that is the "active" link thumb. When that happens I want the other two thumbs to dim.

Am having no luck, I made a transparent rectangle around what will be the "active" thumb and dimmed the other two and grouped them together on the mouse over layer. I did the same with the other thumbs so I ended up with three groups on the mouse over layer, each with a clear rectangle active area over one thumb and two dimmed thumbs. When I preview, if I click on any of the rectangle active areas, ALL the thumbs dim, not just the two other ones.

Egg, not sure how you are suggesting to do it. I don't want a click and pop up, I want a mouse over action.

Quote:

---

Egg, not sure how you are suggesting to do it. I don't want a click and pop up, I want a mouse over action.

---

The Mouse Over layer is a depository of alternative images. i.e. it holds the alternative image for a mouse-over event. You cannot have shapes in the Mouse Over layer that overlap buttons within the Mouse-Off layer.

Ah, you know it will be effected by the layer order.

Here's a link to a demo http://gwpriester.xara.hosting/dim-layers/

Xara file attached

Egg: What about navigation buttons? They have shapes that change the look of the shapes in the mouse-off layer, right? Or maybe I'm not understanding you?

Maybe misunderstood the requirement, but here is an example using placeholders with the htmlclass=... name attached and some css at the website head section.
The upper buttons dim the full page and the lower only a region defined in the css.

Gary, wow, how did you do that? I'm going to have to study this one, I had tried putting the three different variations of the three thumbs on layers above the mouse off button and I couldn't get it to work, a big thank you!

Siran: Thank you very much, but when I click on any of the boxes it dims the whole background which dims the other boxes, not just the other boxes. Take a look at Gary's demo.

Gary: I'm still trying to figure out how this is working.. when I tried the layers thing after trying my #6 post again, I had put two new layers above the mouse-over layer and put the box groups in each of these layers, which didn't work.. if I clicked on one box it made them all dim. Must be something to do with trying to use a transparent box for one of them.. I'm going to have to really study how you did this.

You have them in separate layers above the mouse-over layer and it seems to be working. I entered different links on the mouse-off boxes and when previewed that also works. Having an image also pop up is also a neat idea, I may also use that on the page.

Thanks so much,

The dimmed version of the thumbnails appears on the individual layers. If you isolate each layer (press the S icon next to the layer in the Page & Layer Gallery) you will see the two dimmed thumbnails. So the thumbnails are not really dimming, the images on the layers are creating the illusion that they have dimmed by covering the original images.

Does this make any sense?

Yeah, I get it now, brilliant, Gary, or maybe I'm just really a nube on all this, anyway, really appreciate your help and everyone else here. I have this habit of trying to do things differently and it always results in questions, so hope you don't mind, there will probably be more for all of you. ;-)

In general, Is the mouse-over layer any different than any other layer above the mouse-off layer.. does it have special properties?

Well you could start with dimmed thumbnails and place a bright thumbnail on the mouse over layer. I use this effect here and throughout the site http://placitasartists.com/gallery_04.html

MouseOver lets you have the effect and a link at the same time. So in my example the photo links to the artist's gallery.

Gary's solution is excellent but it does require largish gaps between the buttons otherwise the pop-up doesn't close.

The example Siran provided eliminates this problem. Buttons can be flush together and it only requires mouse-off & mouse-over layers.

Quote:

---

Siran: Thank you very much, but when I click on any of the boxes it dims the whole background which dims the other boxes, not just the other boxes. Take a look at Gary's demo.

---

Sirans example:

The top 4 buttons darken the whole page.
The bottom 4 buttons only darken the lower 4 buttons, not the page.

Here's an example using Sirans code. I believe it supplies exactly what you're after. (I've chosen to make the 'off' buttons paler, not darker)

EXAMPLE

Egg: Your attached example works and I like it, can you attach a Xara version of it so I can study it? When I previewed Siran's attachment in post #10 before it didn't do that, I had the problems I mentioned, top row dimmed the whole BG and bottom row dimmed a big rectangle around everything:

Attachment 120880Attachment 120879

Here it is with no mouse over:Attachment 120881

Thanks, Gary, yes, I was aware of that way of doing it, just felt like doing it differently as I didn't want all the images dimmed or without color to start out, but that would be good for other situations, thanks, and nice site!

Glad we could help.

Egg: Will you please post the Xara file for the "Example" in your post? The earlier one from Siran didn't work like this one.

Appreciate it,

Not much point me uploading my xar Duane, it only contains Sirans code. However here's a video re how to use it as well as a link to a more complex button layout.

IMPORTANT EDIT: I keep referring to JavaScript throughout but I should be referring to CSS. Senior moment. No JavaScript involved ASIF!

2nd Example.

Egg: You completely lost me. I appreciate your going to the trouble of making a video on this, but I don't understand or know java script and I don't understand what you are trying to explain.
So, thanks anyway... That just went way over my head.

Very nice examples Egg, and great video as always. =D>

Thanks Siran. Can't sleep tonight, not tired thus the JS/CSS cockup.
Finally thought the background doesn't have to be a coloured semi transparent rectangle, it could equally be an image.

Changed

Quote:

---

background:rgba(104, 142, 210, 0.85);

---

To

Quote:

---

background-image: url("index_htm_files/background.jpg");

---

Could you tell be how to apply a part transparency to the background.jpg if required please?

EXAMPLE

Wow that looks great!
Had the same idea too, but not looking as good as your example off course. ;) And it was more meant to show that you don't need to have a solid background.
Edit: Sorry, overlooked your question. Simply adding opacity:0.5; to the css should do that.

Tried the opacity but I couldn't get it to work. But it can be done easy enough by creating a bitmap copy with required transparency, 50% here,
and forcing it to png in xara. Course the image name needs to be changed to background.png ;)

EXAMPLE

That looks good too, Egg

Thanks, Siran, this one works with no dark rectangles or backgrounds like the first one you posted, all I needed was a good xar file to look at it in Xara so I could start to understand it. I've been experimenting with it this morning and I find, that like the other Xara widgets, unless it is in the currant arrangement it has the problem of cropping images. BUT I also found, with yours, it isn't difficult to resize the placeholders on the three different levels after loading an image into one of them and easily move them around, etc. and I also like how the unselected images can be dimmed or darkened, or colored, etc. I think this is going to work really well for me and it's an excellent design, thank you again!

http://doanehoag.com/Forums/Xara/siran_dim/index.htm

Attachment 121043

Spoke to soon... I thought it was all working nicely till I tried to resize the page to 960 and enlarged all the images for the page size. Now, when I preview it it cuts off half of the three images on the right side, though it still looks like the selection dimming is working. Now what?

You forgot to increase the page size width to 960px, it still is 482px.

This program is tricky... I had changed the page size drop down to 960 from your custom setting of 482. I see now that that didn't actually change the grayed out, hard to read width to 960. Once I clicked on custom on the drop down and then back to 960, it changed the width to 960. Weird.. I didn't notice that and would not have even thought that changing the drop down would not actually change the setting... doesn't make sense *%#@

Thanks, Siran, did that and it fixed it! Great solution, will be using it.

Yes. This is really great solution. Thanks a lot
قیمت طراحی سایت

I think the auto fit to page width may have been on and that may have been the problem