I have an old website I started learning using Dreamweaver on some years ago that I’d like to pick up again . The Home page uses OnMousover to give a hover / image to be followed by a click to link to different topic pages. (You have to move your cursor around to discover the images) Is there a way I can get this to work with touchscreen devices? Link here http://olimalarky.co.uk/
I’m sorry, I have not got an SSL Certificate , I hope that’s not a problem.
To a degree it already works with touch screens. If the user touches the right area the image shows and then navigates to the page concerned.
You also need to try and think through the logic of what you are asking. There is no hover on touch devices so what do you want to happen when the user touches the right area?
e.g.
the image should show and stay shown?
Then a second touch navigates to the destination?
This means that if you touch and don’t navigate the image is still there and won’t go away until you find something else to touch which will then stick until navigated or something else is touched?
You would need js to detect the number of clicks and act appropriately although some devices already treat a first touch as hover and a second or pro-longed touch as a click.
the image should show only when being touched and disappears when the finger is removed
The problem with this is that if the image disappears like a hover effect then there is no way to navigate to the destination as you only have touch and not hover and click.
As you see just understanding the logic of what you are asking is not easy because there is no straight forward approach. As far as navigating websites these days is concerned it is advised that you simply do not use hover effects to indicate navigation unless the default state is obvious. Simply don’t rely on hover effects to convey important meaning.
In order to achieve what you want I would suggest a different approach in that clicking an image shows the new image in a small overlay which itself will have close and navigate icons present so that touch users can then close the overlay or indeed navigate somewhere else. This old example shows a similar effect except that I have not added the ability to close the overlay.
In light of the above problems would it not be wise to re-design the site to modern standards and introduce a proper navigation system for all devices. You don’t have the meta viewport tag in place anyway so mobiles are just getting a shrunken version of your image which makes it too small to use anyway. The desktop version is too rigid anyway and the image should fill the whole screen (or be responsive) rather than just being a fixed size.
We can help you if you wish to learn new techniques but you may be flogging a dead horse (to coin a horrible phrase) if you just want to patch in mobile support without doing it properly.
You should also be very careful of “mystery meat navigation” techniques as users hate them. I realise this is just a hobby site and so you aren’t bound by the same constraints as the rest of us but navigating a site is a very important concept and you shouldn’t obfuscate it to your users.
I’ve only put in place three placeholder images but you would need to work out the other positions for all the others and their appropriate percentage dimensions etc. The site is fully responsive and scales up and down (just drag the window to test).
If you view on mobile you will see the image appear when touched and then you can either click again to navigate or click the ‘X’ icon to close. It uses the Jquery library but could be converted to vanilla js (if someone has the time). There is no js needed for the desktop version as you can do mouseovers with :hover rather than using js.
As I said I am uncomfortable with navigation being revealed by hover and for mobile it may simply be better to add a hamburger menu with proper link destinations. However if this is just for a hobby site for yourself then you can carry on with your own approach.
