Participating Frequently

Question

How to tap an image for rollover effect

Forum|Forum|4 years ago
March 9, 2021
4 replies
909 views

If anyone can glance at my site and advise me on rollover a better setting, that would be much appreciated! Here's an individual page:

http://www.crossboardcreative.com/retouch/pages/poststreet/poststreet.htm

As you can see, I have a note at the top that tells mobile users to "tap insdie/outside the photo" to see the before/after versions.

I would hope there's a way to allow the user to simply touch the image repeatedly to switch back and forth between the 2 images, rather than touching on the grey area which falls outside the rollover hotspot. I don't know how to revise things to achieve this, and I sure hope it's even doable!!

I have looked around at various turn-key services (Wix, etc.) but I've never seen anyone who offers this exact type of simple rollover. All they seem to offer is the kind of mobile device rollover wherein you have to drag a little bar across the image to reveal the alternate image. And this method is definitely what I can't use. I need to viewer to see INSTANT change between images, not a dissolve and not a "drag across" interaction. When computer viewers drag their mouse cursor across the edge of the image, they get an instant image switch. This is what I'm looking for with my mobile device viewers - - and instant switch by tapping their finger anywhere on the image.

Hoping this makes sense, and sure hoping that Dreamweaver has the ability to update my current code!

Any advice much appreciated.

--Brian

This topic has been closed for replies.

Jon Fritz

Community Expert

How are your coding chops?

I made this little page as an example of what you can do to get a toggle (basically what you're talking about) into your page without using a javascript library or framework. It's a simple HTML/CSS toggle that targets the state of a few hidden checkboxes, controlled by their respective <label> tags, that will work on tap or click across every platform I've tested (no idea about smart fridges).

Copy and paste into a new document.

<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>Checkbox On-Tap Image Swap (no javascript)</title>
<style>
/* hides the checkboxes that we're using for CSS toggles*/
input[type=checkbox]{
display:none;
}
/**/
label {
display:block;
}

/*styles image boxes */
.tapbox {
display: block;
width:144px;
height:144px;
border:1px solid black;
cursor:pointer;
}

/* this controls the before and after states of the first image */
.one {
background-image:url("http://via.placeholder.com/150");
background-size:cover;
}
#image1:checked ~ label[for="image1"] > a {
background-image:url("http://via.placeholder.com/250");
background-size:cover;
}
/* end image one */

/* this controls the before and after states of the second image */
.two {
background-image:url("http://via.placeholder.com/350");
background-size:cover;
}
#image2:checked ~ label[for="image2"] > a {
background-image:url("http://via.placeholder.com/450");
background-size:cover;
}
/* end image two */

</style>
</head>

<body>

<input type="checkbox" name="image1" id="image1">
<input type="checkbox" name="image2" id="image2">


<label for="image1">
<a class="tapbox one"> 
</a>
</label>


<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero quod est, voluptatibus quam sit dignissimos! Aliquam explicabo sint rem, quis ut fuga magni minima, corporis fugiat quasi odio autem, in sapiente tempore similique ratione temporibus vero commodi.
</p>


<label for="image2">
<a class="tapbox two"> 
</a>
</label>

</body>
</html>

B

Brian5C29Author

Participating Frequently

Hi Jon, thanks!

My coding chops are pretty much limited to typing my ZIP Code 🙂

When I get around to pasting this code into one of my before/after pages, I'm a little confused about how the coding gets connected with my existing hotspot.

but I am eager to paste your html into a new window and check out what it does. Much appreciated!

Jon Fritz

Community Expert

Yeah, that one might not work for you then.

It's more for when you absolutely don't want javascript. It would require some bigger rewriting of your current html.

Maybe an onclick/tap javascript toggle would be a little more down your alley. It's a lot simpler...

<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>

/* styles the image box */
#theimage {
width:300px;
height:300px;
border:1px solid black;
}
/* the before state of your image */
.offclass {
background-image:url("http://via.placeholder.com/350");
background-size:cover;
}
/* the after state of your image */
.onclass {
background-image:url("http://via.placeholder.com/450");
background-size:cover;
}
</style>

<script type="text/javascript">
function toggle(id)
{if(document.getElementById(id).className == "onclass")
{document.getElementById(id).className = "offclass";}
else{document.getElementById(id).className = "onclass";}}
</script>

</head>

<body>

</div>

</body>
</html>

B

Brian5C29Author

Participating Frequently

Does anyone know if Dreamweaver has a ready-made feature which allows for a mobile device user to tap an image and reveal the rollover image, and then tap the same image again and return to the original image.

My web page is set up so that the user can tap the image and see the rollover, but tapping again does not reveal the original image. Before I investigate custom JavaScript coding, I'd want to confirm that this feature is not available.

I'll admit that my site has not been optimized for mobile devices, but I'm mainly wanting to utilize a simpler viewing experience for the mobile viewers.

Nancy OShea

Community Expert

Yes and the answer is no. DW can't do this for you.

Google penalizes sites that are not optimized for mobile users. A slightly better experience with before & after images won't matter a hill of beans to search engines. Best advice, rebuild your site responsively with Bootstrap or some other responsive framework. Or hire a developer. Or pay for commercial extensions. Your choice.

Nancy O'Shea— Product User & Community Expert

Nancy OShea

Community Expert

Hover doesn't do anything on touch screens.

Just because you can do something complicated doesn't always mean you should. So just keep it simple. When you want a before and after image, make one in Photoshop and insert that into your web page. EZPZ. No special scripts or programming needed.

Nancy O'Shea— Product User & Community Expert

B

Brian5C29Author

Participating Frequently

Thanks again Nancy!

On mobile devices, my image switches to the rollover image when the user taps on the image, but in order to see the original image once again, they must then tap outside of the image (i.e. they must tap outside the hotspot which covers the image.)

Yes, I'm looking to make it as simple as possible for the user, and that would be to let them click continuously on the image to cycle between the before and after images.

If any others have some feedback, very much appreciated!

Nancy OShea

Community Expert

You have a choice:

Program a toggle with plain vanilla JavaScript.
Or use jQuery.

EDIT: Here's an example on JS Fiddle.

https://jsfiddle.net/guspersson/s8qLg7ur/

Nancy O'Shea— Product User & Community Expert

B

Brian5C29Author

Participating Frequently

A quick followup on my initial post…

I see that for some reason my web link does not go to a specific page, but rather to my home page. Please click any image category at the top, then choose any photo. They all have the same instruction for mobile users…

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded