Ambiera Forum

Discussions, Help and Support.

Ambiera Forum > RocketCake
Hyperlinks and images

petesteven
Guest
Quote
2017-03-10 14:38:00

Hello expert friends!

I'm trying to build a grid of 9 image squares 3 tiles wide by 3 tiles deep when in its non-squashed big-screen state. I have done this by setting up a stack of 3 containers with columns - each having 3 columns. This system seems to work well when the screen size is reduced as the responsive formatting stacks the image squares in a logical order.

I want to fill each square with a different image or plain colour without obvious borders so that each image or colour adjoins the next. I also want to put some text over each image or colour.

When the viewer clicks anywhere on an individual image square, I want it to hyperlink to a new page.

My questions are:

Is there a neat way of filling a square with an image so that the image fills the entire square without leaving a border? And can this be done in cases where the proportion of the original image does not match the proportion of the square?

I want to hyperlink each square to another page but it seems that I can only hyperlink to an image or some text. For example, if I fill a square with a background colour, I cannot insert a hyperlink into the colour alone. Is there a any way of making the whole of an individual square sensitive so that it will hyperlink wherever it is clicked?

Many thanks for your advice.


niko
Moderator
Quote
2017-03-12 05:23:02

I'd add a button into the containers and set the background mode of the those to 'image'. You can then also add the hpyerlink to the buttons. Obviously, you probably want to set the border of the button to 'none'.


petesteven
Guest
Quote
2017-03-13 18:05:09

Thank you Niko.

Following your advice I've got the images and sizing sorted.

Regards the hyperlinking. I can certainly do as you suggest and place a styled button on the background image and put a hyperlink in the button but what I'd really like to do is make the whole of the background image a hotspot that will hyperlink to a new page whichever part of the image is clicked/tapped.

I tried expanding the button so that it covered all of the background image (making it transparent so that the image showed through) but I found that I could not size or place the button accurately. Is there a way of doing this?

Thanks for your help.


niko
Moderator
Quote
2017-03-14 09:10:17

Set the padding and margin of the container to 0, set the width of the button to 100% and the height to the height of the container (150 or what you want). Then it should work.


petesteven
Guest
Quote
2017-03-14 16:32:42

Works a treat - thanks!


Create reply:


Posted by: (you are not logged in)


Enter the missing letter in: "Int?rnational" (you are not logged in)


Text:

 

  

Possible Codes


Feature Code
Link [url] www.example.com [/url]
Bold [b]bold text[/b]
Image [img]http://www.example.com/image.jpg[/img]
Quote [quote]quoted text[/quote]
Code [code]source code[/code]

Emoticons


   






Copyright© Ambiera e.U. all rights reserved.
Privacy Policy | Terms and Conditions | Imprint | Contact