behaviors on mobile

Report · Apr 03, 2020

Hi,

How can I make the mouseover / mouseout and click behaviors work the same on a mobile device as they do on a desktop?

Thank you!

Report · Apr 03, 2020

Mobile devices don't support mouseover/mouseout behaviours, you should add the onclick behaviour to cover those devices.

Report · Apr 03, 2020

Don't use hover or mouseover triggers for anything important. The majority of Internet users are on touch screen devices that have no mouse. OnClick event triggers are more user-friendly.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Apr 03, 2020

Thank you for the click information but unfortunitly it doesnt work for what I want it to do.

I want to mouse over or touch a word on a list and have an image relating to the word appear in a target area. The desktop works great for the mouseover: swap image, mouseout: image restore and Onclick goes to a link. This senario on the phone swaps the image on first tap and immediaty transfers to the link. They almost happen simultainiously. The one tap does both.

I know the commands are possible because I have seen it happen on other websites. Maybe I shouldn't use the behaviors panel...

I need to have 2 of the functions on a mobile device. ontap: should swap the placeholder image with an image having to do with the word and on a doubletap link to a new page that holds information about the word.

Thanks again!

Report · Apr 03, 2020

1. Double taps are not normal or expected browser behavior. Everyone expects a single tap.

2. Often the best solution is the simplest one. Avoid gimmicks for the sake of gimmickery.

3. Below is an ordinary browser tooltip on linked text.

The pot at the end of this rainbow is the destination page, not the tooltip.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Tooltip Example</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<p><a href="detail_page.html" title="This is some descriptive text inside a tooltip">Some Link</a></p>
</body>
</html>

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Apr 03, 2020

You can simulate the effect by using css animations, (also works on desktop).

Set the animation to first increase the size of the image, (or whatever) then pause when the effect is at the desired size. Then un-pause the effect by having the user touch/click again. You can also just have the image pause for a set time, before shrinking the image.

Unfortunatly Dw does not have anything to help with the creation of such effects. The old google css designer app is probably the only free app I know of to 'visually' help, but it is dated, and only supports creating with webkit prefixed css.

For multiple images, (or whatever) you will have to create the animation for each image, (cut/past and use image specific css selectors).

Adobe Community

behaviors on mobile