Visual Tools (non-coding) to add simple image rollover effects?

Wappler General How To
#1

This could just be my own shortcomings because I’m coming at this from a classic Dreamweaver mindset, but are there any simple tools in Wapper for adding hover and click effects to image buttons?

Yes, I am aware that I can go into the styles panel and code everything by hand, but for a “cutting edge” tool, this feels like I’m back in the dark ages.

Right now I’m still struggling to learn Wappler, but the lack of simple behaviors and actions (at least that I’ve been able to find) are making me question if I should just go back to Dreamweaver and figure out how to make that work for me.

#2

Hello @mmitchell_houston,
What kind of effects would you like to apply - can you provide an example?
Also - “image buttons” - I don’t think anybody’s still using image buttons in 2019, that’s so 90s? :slight_smile:

1 Like
#3

I doubt if that would be necessary - depending on what you want of course. You mention hover and click effects. I’ve just added some navigation A-Z buttons to a page. The Wappler/Bootstrap defaults result in this, without me doing anything extra:

image

… and if I hover over the listed results to take me to another page - hover effects are there too.

#4

I shouldn’t have used the word “button” in my question. Sorry.

And I also realize that I should go hunt down some URL that has some neat hover effects with swapped images, or images that grow/shrink slightly or a semi-transparent div tag appears over them to make them appear lighter or darker.

But I am not going to. Anyone reading my question above should be able to figure out what sort of I am iasking: Any sort of effect to give the user feedback when the mouse hovers or clicks on something? There is not some specific thing I am trying to do. I am trying to get ANY effect done.

So my question stands as it was written: Are there ANY point-and click tools or pre-built “components” (or whatever) in Wappler that can do this sort of thing? Or do I have to write the CSS by myself?

#5

No there isn’t. You would have to write your own CSS,

#6

Thank you. But I have poked around all of the image settings and do not see anything that creates any sort of effect or allows me to define one when something is clicked or as a hover effect. I am definitely new to this, and I am strongly suspecting there is something built in but I just don’t know what to use on the page to get it. Is there some sort of special image container that I should be using?

#7

Can you clarify a bit - are you asking about image effects or about button effects, as the Bootstrap framework features hover (also click and focus) effects on all of the buttons, as already mentioned?

#8

Here is the code I’m using to get the hover effects in the screenshot above:

image
image.png888×82 4.16 KB

… no extra css, javascript or images.

#9

Thank you. That is what I was afraid of. I have to say that this greatly undermines my enthusiasm for this application.

#10

Thank you very much for that info about buttons. That will come in useful later. Right now I am dealing with images, not standard button controls. Unless I can add an image to a button? I don’t think that’s what I’m looking for but right now I’m just poking around to see what is possible

#11

Feel free to add it as a feature request. Wappler gets updates with fixes and new features almost weekly.

#12

I’d really appreciate if you can describe what effects and how would you like to achieve, as there are already animation effects available in Wappler (from fade in to bounce… and many more) on different mouse events, that can be applied fully visual thanks to the animated region component.

#13

I believe what he is looking for is something like on hover to swap images or perhaps have a text div overlay the image for example.

#14

Please look at this page on a NARROW browser:
http://mikemitchellonline.com/pddmappweb/00-toc-main.aspx

If you go full width, the menu will vanish (I was experimenting with different menus for the wide version and smaller menus for the tablet version and I wasn’t finished when my workday ended and I needed to leave). So, please resize your browser so it is narrow and five menu images will appear.

Right now these are just images. When the users click on one they will go (via link) to another page. Very simple. I just want to add some sort of feedback:

  • Ideally, I would add a rollover effect (i.e. hover) for those using browsers (as an internal site, we estimate 80% will be using browsers on a desktop)

  • I would also like to add some sort of feedback when users click on an item (for those using a tablet)

I know this sounds odd (or lazy), but I really don’t care how I do it. I don’t care if I use buttons, divs, images or tap-dancing penguins (okay, I might have trouble getting that budget item approved). I just need a slightly fancy looking menu screen to bring a little bling to the screen before we go into the rather dull contents of the site itself (and trust me, the contents are VERY dull).

#15

You are correct. Swap image or any sort of effect.

#16

@Teodor Okay, this is something that interests me. I had not seen the “Animated Region” component. Now I’ve got some place to start looking.

#17

By the way, our “Design” panel (currently available under experimental features), when fully developed, is going to include options for customizing hover states, so you will be able to style any element easily.

Screenshot_14
Screenshot_14.jpg356×1193 59.1 KB

2 Likes
#18

The “Design” feature is not visible to me. Can I enable it, somehow?

#19

Please check: Enable Design panel