-
Posts
-
Hi,
I have created an image in Illustrator to use as my main image on my homepage.
I have uploaded it and it looks great however I would like the button on the image to be clickable. I have looked online for ‘image map’ but it doesn’t seem to work with what I have as I am currently using the ‘Fullscreen Slider’.
I did try placing a button there using Enfold, however that moves up and down on scroll because I am using a minus margin to get it to a similar spot to where I drew my button in Illustrator.
Unfortunately, I cannot replicate the right positioning and colour combinations for text using the ‘Fullscreen Slider’. Ultimately, it looks like the only way to get a button there is to create an image map is I understand it correctly.
I’m open to suggestions if you know of any other ways of course.
Here is a link to the image in question if you could please advise on how I can make the button I have drawn clickable it would be a massive help.
https://ibb.co/5j5b0R1Thank you very much.
Hey Christopher,
Thank you for the inquiry.
We can manually add the button as an image in the caption field or adjust the style of the slider button. Have you tried doing something like that? Please post the site URL so that we can inspect the slider.
Example:
<img src="URI OF THE IMAGE BUTTON class="slider-button-custom" />For additional style adjustment, use the custom class attribute above.
.slider-button-custom { /* more styles here */ }Best regards,
IsmaelHi Ismael,
I have tried creating a button and then using a negative margin to bring it to the area of where the button is in the image. However it moved when scrolled so I couldn’t make it work sadly.
I did try and do this with a PNG image using a colour section and a negative margin again. However, it showed up for a second then disappeared.
I have created a login for you to see what you can do.
if you could possibly get the position of the button somewhere similar to where it is now then that would be perfect.
Thank you.
And you do not like to use the advanced layerslider on that?
______
Next hint: if you are in illustrator – why don’t you save the image as svg ( and embed images – this man in overalls )
then use the svg as inline svg – you can have links in areas – on headings etc. pp in your svg – that is the
<a xlink:href="url" > svg group </a>option
look at – and hover the enter now on this: https://webers-testseite.de/pureinstall/wp-content/uploads/test.svg
Hi Guenni,
Thank you very much for taking the time to write this – it’s really insightful.
Unfortunately, I don’t have the knowledge and skills to do this, above saving the image as an SVG.
If I could trouble you for a bit more of a guide then that would be massively appreciated because how you have the clickable image in the link you sent is perfect.
Thank you again.
Best,
ChrisIf you have downloaded the svg – you can open the svg in a good text editor.
F.e. on OSX with sublime text or on Windows notepad++you can see that the structure of a svg file is similar to a html code. There are styling infos and a heading part. etc. pp.
on illustrator you can group objects. You can have layers and you can place images f.e. that man as a png file with transparent background – and place it where you like.
On saving as svg you can decide if the image is embeded (as base64 png file) or just link to it. For your usage the embedded image is best.
But makes the svg bigger.The groups in illustrator are in the svg code represented by the
<g>– tag and can have on that ID and classes.
If a group is surrounded by an<a xlink:href="https://webers-testseite.de/" > … </a>they can link to what you like.See f.e. this svg: https://webers-testseite.de/pureinstall/wp-content/uploads/test2.svg
it is nearly the same as the svg above – but has a little info in head area of svg:
preserveAspectRatio="xMinYMin meet"
that means the svg shrinks to the top left corner xMidYMid would be the center center etc. pp.Hi Guenni,
Thank you so much for helping with the details here, you are very knowledgable.
I have tried to follow the steps you mentioned.
Here is what I have:
If this is correct, how do I save this (in Sublime Text) so it can then be added to my Enfold website?
Thank you once, again. this coding aspect is very new to me.
an image of the code is not so nice for me to look into it.
But why don’t you download that svg to see what i had done: https://webers-testseite.de/pureinstall/wp-content/uploads/test2.svgHi,
Thanks for helping out @guenni007. Please let us know if you should need any further help on the topic @chris.
Best regards,
RikardThank you for the help Guenni007 (I’m a 007 too in parts of the online world ;)).
I tried my best with the .svg aspect but it is above my skill set right now, working on another solution positioning the button instead in another thread for now. It’s definitely a skillset for me to strive for.
Thanks again.
Hi,
I’ve tried to find a work around that I need some support with asap #1229623 along with a few unknown issues.
Thanks.
- The topic ‘Make a specific are of an Image clickable’ is closed to new replies.