I'm using pointer-events:none; on the main photograph at the top of my site http://www.onedirection.net/, to allow the user to select the navigation behind the image.
However, I'd like to let the user click on each member of the band to go to a separate page, but ONLY for the parts of the image that don't overlap into the navigation.
I'm a bit stuck with this. Can it be done? I was thinking of using an image map, but can't get it working without the navigation becoming "less clickable".
Related
This image contains the code I am using but it doesn't behave correctly. like in websites we see as we scroll down images or anything were not present and then comes from the right. like if we go to end of the page a contact form should appear from right. this is what i am trying to achieve
So I'm trying to build a site where the "title page" is basically one big image that takes up the entire screen, and if you scroll down you get to the content beneath it.
My code so far is:
What I'm trying to do is to put two GIFs on the bottom left and right corners of my image, and of which can be clicked to navigate to another page of the site. I'm unsure though of how to put them onto the larger image and how to position them.
Edit: the HTML code I put in my post is not showing to me?
I need to create a webpage with images at bottom of the page of 50 px height and the top of the page will be blog/text.
Users should be able to scroll the images left or right at bottom and when they click on the photos it would zoom into the photo from the blog.
The photos will load as the user scrolls left and right at bottom div.
Example :
https://www.google.com/maps/place/Yosemite+National+Park/#37.74145,-119.59168,3a,75y,90t/data=!3m8!1e2!3m6!1s15587532!2e1!3e10!6s%2F%2Fstorage.googleapis.com%2Fstatic.panoramio.com%2Fphotos%2Fsmall%2F15587532.jpg!7i1536!8i2048!4m2!3m1!1s0x8096f09df58aecc5:0x2d249c2ced8003fe!6m1!1e1
if you post code then we can help better, but if you haven't written any yet then it's worth checking out something like the following link (there's a plethora out there)
The zoom you're talking about is normally referred to as lightbox (darken or lightened background behind the image)
lightbox example
You also seem to be describing 2 things:
- a horizontal gallery display in the footer
- an image clicked from within a blog
if you've built a blog then you should check out the associated docs (assuming you've utilised something like Wordpress) as they'll likely already have a solution or plugin available.
My question is somewhat broad - I am trying to allow the user to navigate my site using their arrow keys. So, when the user presses the up arrow from the landing page, a separate screen from the top will slide into the user's view.
My current approach is to create a view for each of these different pages (landing, top, bottom, left, right), and make their positions relative and slide them to different areas of the browser using commands like left: -100% etc. I would make the overflow of the landing page hidden so the user would not be able to navigate to the other areas of the page without using the arrow keys.
However, as I am trying to move the locations of these pages, they don't seem to comply because the landing page always loads at the top left, and I cannot seem to reposition where my page lands. Is there any way for me to make it so that when the user loads my page, his view point lands at a screen that has been shifted using say the top/left commands?
I am making a simple website and I am encountering a problem whenever I reload it.
I placed my menu at the middle of the screen and when you clicked it, it needs to go down to the content. My problem is, whenever I reload it, it would still go up and show the upper picture. What I want is that after one of the menu is pressed, the menu should now stay on the upper corner of the screen without showing the upper picture (Sample website -> http://ec2-54-84-168-45.compute-1.amazonaws.com/Teapop/)
It seems like my url code that directs it on a particular div (e.g menu#teapop_nav)` doesn't work as I expected after I deployed it on the hosting site even though it works well on my local build.
Without using any javascript code, is there a fix for this using html5/css3?
Thank you.
i just tested it on my computer (chrome & firefox) and it seems to work. And also on page refresh. The picture is always on the top.