How to tap an image for rollover effect

New Here ,
Mar 09, 2021 Mar 09, 2021

Copy link to clipboard

Copied

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

 

Views

242

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Mar 09, 2021 Mar 09, 2021

Copy link to clipboard

Copied

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…

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 09, 2021 Mar 09, 2021

Copy link to clipboard

Copied

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, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Mar 09, 2021 Mar 09, 2021

Copy link to clipboard

Copied

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!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 09, 2021 Mar 09, 2021

Copy link to clipboard

Copied

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, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Mar 10, 2021 Mar 10, 2021

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 10, 2021 Mar 10, 2021

Copy link to clipboard

Copied

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, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 11, 2021 Mar 11, 2021

Copy link to clipboard

Copied

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>
<!-- These checkboxes should stay at the top of your html, don't worry, they're hidden with CSS -->
<input type="checkbox" name="image1" id="image1">
<input type="checkbox" name="image2" id="image2">

<!-- this is the html for the first image, along with the first checkbox above -->
<label for="image1">
<a class="tapbox one">&nbsp;
</a>
</label>
<!-- end first image html -->

<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>

<!-- this is the html of the second image, along with the checkbox up top -->
<label for="image2">
<a class="tapbox two">&nbsp;
</a>
</label>
<!-- end second image html -->
</body>
</html>

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Mar 11, 2021 Mar 11, 2021

Copy link to clipboard

Copied

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!

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 11, 2021 Mar 11, 2021

Copy link to clipboard

Copied

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>

<!--the script that changes the image back and forth-->
<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 id="theimage" class="offclass" onclick="toggle(id);">

</div>

</body>
</html>

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Mar 11, 2021 Mar 11, 2021

Copy link to clipboard

Copied

Thanks again! Much appreciated Jon!

(by the way, you spell your name correctly, just like my dad does 🙂

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 11, 2021 Mar 11, 2021

Copy link to clipboard

Copied

LATEST

You have the mistaken idea that scripting is complicated but it's not. The JS Fiddle I posted above uses minimal JavaScript, no libraries and no dependancies.  Simply replace placeholder images with your own. 

 

<script>

function change() {
var img1 = "https://placehold.it/350x150",
img2 = "https://placehold.it/200x200";
var imgElement = document.getElementById('test');
imgElement.src=(imgElement.src=== img1)? img2 : img1;
}
</script>

 

HTML:

<img src="https://placehold.it/350x150" id="test" onclick ="change();">

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines