A few questions - resizing image and change image on the same page

[Lopez]

Hello

I need your help, I have the site ready, but I need to design a flat, just like on this page https://zielonetarasy.org/mieszkania/
1. So that the main photos change size just like on this page. Stretch cuts the photo in half :/
2. And if there is an option when you click on the apartment will appear below, and not on the new page
3. Change of storey or can it be done this way? all on one page and display it when you hover over the flat

BIG THX for HELP!

[Initiostar]

Hello

I need your help, I have the site ready, but I need to design a flat, just like on this page https://zielonetarasy.org/mieszkania/
1. So that the main photos change size just like on this page. Stretch cuts the photo in half :/
2. And if there is an option when you click on the apartment will appear below, and not on the new page
3. Change of storey or can it be done this way? all on one page and display it when you hover over the flat

BIG THX for HELP!

The example you provide is a purpose-designed responsive website; you cannot replicate that using Xara, but here's an idea for what you might do.



1. Xara v16 upwards provides an export option with Scale-to-Fit width. This provides the image scalability you see in your example. For example, if your website width is 1200px and you have a good quality image you can set the maximum scale-width to 1980px (full HD). This will for most devices fill the browser, but when you view it on a 4K screen you will see the pasteboard surround. You can of course use HTML/CSS to overcome this issue by setting up a background image cover, but then steps (2) & (3) become more complicated (and need more code).

2. Clicking on a specific area of the image to create a popup of the apartment is possible. I would use a grid of transparent overlays that give you the apartment number/ref/sale price/ sold etc on mouseover (show popup title) and the apartment details with an onclick popup. You could also use a placeholder and call the apartment details as and when required using the apartment number, but this does require HTML/CSS.

3. Answered in (2) forget about the storeys - go to each apartment, but maybe add a separate floor plan for each storey as a guide.

Mobile Footnote: you will need to give careful thought as to how this needs to look in a mobile variant and manually restructure the site for portrait mode - and stay well way from share variants for this design. The mobile variant in practice will ONLY work using a list of apartments with the apartment details transformed into a portrait format popup. As you go up and down the apartment list on mobile you will likely need to use some HTML/CSS to Scroll to the top of page when opening the popup.

Gary

[Lopez]

ok thanks i'm looking for CSS scripts and somehow it will solve

I have a problem with layers, when I choose floors, it doesn't display properly, because the photo has a large background and catches other layers, it can be fixed
PopUP.web

[Egg Bramhill]

Lopez,
You're going to make it very hard for yourself if you use angled views of buildings. Mouse off/over layers can only contain rectangular images/hit-spots. Angle them and they just create larger hit spots which lead to one hit-spot overlaying another.

[Initiostar]

I cannot find a work-around for overlapping shapes in Xara!

@Egg the best compromise, but if you step away from storey's and go straight to apartments, the shapes will be much smaller and you could just about avoid overlapping shapes.

Alternatively, and again bypassing the storey's, you could have a mouseover button for the floors which brings up an apartments popup.

All of this of course works with Scale-to-fit-Width and achieves your first objective and without code.

[Lopez]

And how to do it because I don't remember anymore, after choosing a flat an information window appears, the test file is available for inspection

popup when click.web

[Acorn]

I cannot find a work-around for overlapping shapes in Xara!

If you make your Shape from the Rectangle Tool, you can curve it all the way to a circle, skew it and any links added to it are the boundary of the Shape and not its containing box (DIV).

A quick demo:

HTML Shapes with CSS Transforms in Action.xar

Pure Xara.

Acorn

[Initiostar]

And how to do it because I don't remember anymore, after choosing a flat an information window appears, the test file is available for inspection

popup when click.web

You want to get from here we you chose a flat to seeing it on a popup below the plan.



What you need to do is create a "button"; it has a flat(n) on a rectangle grouped on the MouseOff layer. The same combination on the MouseOver layer, only on the MouseOff layer you group these two objects with your flat overlay. Just like any other button.

The 'flat button' links to the 'flat popup", each flat has its own flat popup.

XAR attached.

[Lopez]

oh i forgot use pop-up layer now everything is clear, thank you all, I will play with this choice of storeys to make it work in the main picture, thanks again.

[Initiostar]

If you make your Shape from the Rectangle Tool, you can curve it all the way to a circle, skew it and any links added to it are the boundary of the Shape and not its containing box (DIV).

A quick demo:

HTML Shapes with CSS Transforms in Action.xar

Pure Xara.

Acorn

Thanks Acorn, the problem I encountered this afternoon is best described as overlapping buttons. On the MouseOff layer we had a standard rectangle (screwed and rotated) with the same shape on the MouseOver layer, soft-grouped with a link. We had two similar shapes (buttons) in close proximity.



When you MouseOver one button, depending on which direction you approach it, the MouseOver of the other buttons (in this case their colours) changes too.

You would not design something in this way, but in this particular situation the technique was being used to highlight the floors in a building which linked to their floor plan. The green highlighted shape across the picture was transparent on MouseOff, coloured on MouseOver, similar shapes were present for the ground floor and second floor. The intended outcome was that as your scrolled over the picture three links would take you to the corresponding floor plans. The original idea comes from this site https://zielonetarasy.org/mieszkania/



I could not see an easy way to make this work - hence the work-around proposed which does work.

Gary